CKEDITOR - 如何添加永久 onclick 事件？

2024-06-18

我正在寻找一种使 CKEDITOR wysiwyg 内容具有交互性的方法。这意味着例如向特定元素添加一些 onclick 事件。我可以做这样的事情：

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

处理完这个动作后效果很好。但因此，如果我将模式更改为源模式，然后返回所见即所得模式，则 javascript 将无法运行。 onclick 操作在源模式中仍然可见，但不会在 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);
                            }
                        });
                    }
                }
            });

过滤（仅限 CKEditor >=4.1）

该属性已被删除，因为 CKEditor 不允许。该过滤系统称为高级内容过滤器，您可以在此处阅读：

http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1 http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
http://ckeditor.com/blog/CKEditor-4.1-发布 http://ckeditor.com/blog/CKEditor-4.1-Released
高级内容过滤器指南 http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter

简而言之 - 您需要配置编辑器以允许onclick某些元素的属性。例如：

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

在这里阅读更多内容：config.extraAllowedContent http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent.

`on*`CKEditor 中的属性

CKEditor 编码on*加载内容时使用属性，这样它们就不会破坏编辑功能。例如，onmouseout变成data-cke-pa-onmouseout在编辑器内部，然后，当从编辑器获取数据时，该属性被解码。

没有为此的配置选项，因为它没有意义。

Note：当您在编辑器的可编辑元素内设置元素属性时，您应该将其设置为受保护的格式：

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 event http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-contentDom这在这种情况下非常重要。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Events

ckeditor