单击CKEditor小组件的特定部分/元素上的事件

时间:2017-05-18 11:33:14

标签: javascript ckeditor

我们正在尝试构建如下的小部件:

<div class="main" id="req002"><br>
    <span class="marker"><br>
        <img class="imageMarker" src="myImage.png"><br>
        TITLE
        <br>
    </span>
    <br>
    <div class="content"><br>
        <p>Content line1 !!</p><br>
        <p>Content line2!!</p><br>
    </div>
    <br>
</div>

我们希望“图片”可点击但不可编辑,点击后会显示一个带有选项列表的菜单。从菜单中选择一个选项我们想要更改“图片”并设置一些属性值在小部件的外部'div'元素上。我查看了“上下文菜单”功能,但上下文菜单显示整个小部件,而不是专门针对'image'元素。在Widget API中,我找不到将侦听器附加到窗口小部件的各个部分的方法。

以下是代码:

CKEDITOR.plugins.add('mywidget', {
    requires: 'widget',
    icons: 'mywidget',
    init: function (editor) {

        editor.addCommand('changeType', {
            exec: function () {
                alert("Hello for the Widget!");
            }
        });

        editor.widgets.add('mywidget', {
            button: 'my widget',
            template:
            '<div class="main">' +
            '<span class = "marker"> <img src="img/main.png"> Title... </span>' +
            '<div class="content">' +
            '<p> content... </p>' +
            '</div>' +
            '</div>',
            editables: {
                title: {
                    selector: '.marker',
                    allowedContent: 'p br ul ol li strong em'
                },
                content: {
                    selector: '.content',
                    allowedContent: 'p br ul ol li strong em'
                }
            },
            allowedContent: 'div(!main);span(!marker);div(!content)',

            requiredContent: 'div(!main)',

            upcast: function (element) {
                return element.name == 'div' && element.hasClass('main');
            }
        });

        CKEDITOR.dtd.$editable = {
            address: 1,
            article: 1,
            aside: 1,
            blockquote: 1,
            body: 1,
            details: 1,
            div: 1,
            fieldset: 1,
            figcaption: 1,
            footer: 1,
            form: 1,
            h1: 1,
            h2: 1,
            h3: 1,
            h4: 1,
            h5: 1,
            h6: 1,
            header: 1,
            hgroup: 1,
            main: 1,
            nav: 1,
            p: 1,
            pre: 1,
            section: 1,
            span: 1
        }
    }
});

有人可以帮忙吗?[我在使用ckeditor 4.6.2]

0 个答案:

没有答案