CKEDITOR小部件将拖放到所需的元素中

CKEDITOR Widgets drag drop into needed element

本文关键字:元素 小部 拖放 CKEDITOR      更新时间:2023-09-26

我对ckeditor小部件有问题。我有一个内联的不可编辑的文本小部件,我可以在编辑器中拖放enywhere(使用其默认功能)。所以我需要检查我把小部件放在哪里,如果这个地方是不可访问的(根据我的规则,它是TABLE),请取消事件传播,小部件应该留在以前的地方。

editor.widgets.add('customWidgetAdd', {
   inline: true,
   template: '<span class="simplebox">' +
            '<span class="simplebox-title" ></span>' +
        '</span>',
   init: function(){
      var that = this;
            that.widgetData = ko.observable(self.activeWidgetData);
            var subscription = that.widgetData.subscribe(function (value) {                                        
                $(that.element.$).find('.simplebox-title').text(value.name);
                if (that.isSelected) {
                    self.activeWidgetData = value;
                }
            });
            var destroyListener = function(ev){
                subscription.dispose();
            };         
            that.once('destroy', destroyListener);
            that.on('doubleclick', function (evt) {
                editor.execCommand(editAction.command);
            });                
            that.on('select', function (evt){
                that.isSelected = true;
                self.activeWidgetData = that.widgetData();
            });
            that.on('deselect', function (evt){
                try {
                  var endContainer = editor.getSelection().getRanges()[0].endContainer.getName();
                } catch (e) {
                }
                that.isSelected = false;
                if (endContainer == 'td' || endContainer == 'th') {
                        //SO here comes the problem. My rule is executed and
//I want CKEDITOR do nothing from here... but stil widget is getting cutted     from DOM and inserted to place where I have dropped it...
                        //that.removeListener('destroy', destroyListener);
                        //that.removeAllListeners();
                        evt.cancel();
                        evt.stop();
                        return false;                        
                }
            });
   }
});

不幸的是,在这种情况下没有简单的解决方案。唯一可以做到这一点的方法是订阅编辑器的drop事件,并在需要时取消它,比如:

editor.on('contentDom', function() {
    var editable = editor.editable(),
        // #11123 Firefox needs to listen on document, because otherwise event won't be fired.
        // #11086 IE8 cannot listen on document.
        dropTarget = (CKEDITOR.env.ie && CKEDITOR.env.version < 9) || editable.isInline() ? editable : editor.document;
    editable.attachListener(dropTarget, 'drop', function(evt) {
        //do all checks here
    });
});

您可以在CKEditor中找到它的工作方式(请参阅函数代码setupDragAndDrop