CODEWITHSUNDEEP
javascriptknockout.jsckeditor
Eugene
Eugene

Reputation: 103

CKEDITOR Widgets drag drop into needed element

I have a problem with ckeditor widgets. I have inline non-editable text widget which I can drag drop enywhere in editor (using its default functionality). So I need to check where I'm dropping my widget and if this place is undroppable (according my rules it us TABLE) do cancel events propagations and widget should stay on previous place.

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;                        
                }
            });
   }
});

Upvotes: 2

Views: 1358

Answers (1)

Dmitry Zaets
Dmitry Zaets

Reputation: 3277

Unfortunately there is no easy solution in this situation. The only one way you can do it is to subscribe to editor's drop event, and cancel it if needed, like:

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
    });
});

You can find how it works in CKEditor (See code of function setupDragAndDrop)

Upvotes: 3

Related Questions