7

CKEDITOR wysiwyg コンテンツをインタラクティブにする方法を探しています。これは、たとえば、特定の要素にいくつかの onclick イベントを追加することを意味します。私はこのようなことができます：

CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');

このアクションを処理した後、うまく機能します。ただし、モードを source-mode に変更してから wysiwyg-mode に戻すと、javascript は実行されません。onclick アクションは source-mode で引き続き表示されますが、textarea 要素内ではレンダリングされません。

ただし、興味深いことに、これは常に正常に機能します。

CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');

また、textarea 要素内ではレンダリングされません。それはどのように可能ですか？CKEDITOR コンテンツ要素の onclick および onmouse イベントを操作する最良の方法は何ですか?

ソースモードでこれを手動で書いてみました：

    <html>
    <head>
        <title></title>
    </head>
    <body>
        <p>
            This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
    </body>
</html>

また、Javascript (onclick アクション) が機能しません。何か案は？

どうもありがとう！

私の最終的な解決策：

               editor.on('contentDom', function() {
                var elements = editor.document.getElementsByTag('span');
                for (var i = 0, c = elements.count(); i < c; i++) {
                    var e = new CKEDITOR.dom.element(elements.$.item(i));
                    if (hasSemanticAttribute(e)) {
                        // leve tlacitko mysi - obsluha
                        e.on('click', function() {
                            if (this.getAttribute('class') === marked) {
                                if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
                                    this.removeAttribute('class');
                                } else {
                                    this.setAttribute('class', marked_unique);
                                }
                            } else if (this.getAttribute('class') === marked_unique) {
                                this.removeAttribute('class');
                            } else {
                                this.setAttribute('class', marked);
                            }
                        });
                    }
                }
            });
4

1 に答える 1

13

フィルタリング (CKEditor >=4.1 のみ)

この属性は、CKEditor で許可されていないため削除されました。このフィルタリング システムは Advanced Content Filter と呼ばれ、ここで読むことができます。

onclickつまり、一部の要素の属性を許可するようにエディターを構成する必要があります。例えば：

CKEDITOR.replace( 'editor1', {
    extraAllowedContent: 'strong[onclick]'
} );

詳細はこちら: config.extraAllowedContent.

on*CKEditor 内の属性

CKEditor はon*、コンテンツをロードするときに属性をエンコードするため、編集機能が損なわれることはありません。たとえば、エディター内にonmouseoutなりdata-cke-pa-onmouseout、エディターからデータを取得するときに、この属性がデコードされます。

意味がないため、これには構成オプションはありません。

注：エディターの編集可能な要素内の要素の属性を設定しているため、保護された形式に設定する必要があります。

element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );

CKEditor のクリック可能な要素

エディターでクリック イベントを監視する場合、これが正しい解決策です。

editor.on( 'contentDom', function() {
    var element = editor.document.getById( 'foo' );
    editor.editable().attachListener( element, 'click', function( evt ) {
        // ...

        // Get the event target (needed for events delegation).
        evt.data.getTarget();
    } );
} );

このような場合に非常に重要なeditor#contentDomイベントのドキュメントを確認してください。

于 2013-06-11T18:47:26.340 に答える