Question

目前，如果我们在ckeditor中添加一个名为absolute的浮动div，则firefox中会出现一个可拖动的句柄。

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 46px; top: 90px;">Here is a floating layer</div>

但是浏览器的行为并不一致。有没有办法在ckeditor中启用拖动选项到选定的div？

可以在这里使用jquery draggable吗？在这种情况下，我们如何将所需的jquery库包含到ckeditor wysiwyg区域并将事件绑定到div？

Answer 1

我已针对上述问题制定了解决方法。在ckeditor instnaceReady中，我已将js添加到ckeditor iframe的head部分。

CKEDITOR.on('instanceReady', function(ev) {
   var oEditor = CKEDITOR.instances.editor;
   var h = oEditor.document.getHead();
   var element1 = oEditor.document.createElement( 'script' );
   element1.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
   element1.setAttribute('type','text/javascript');
   h.append(element1);
   var element2 = oEditor.document.createElement( 'script' );
   element2.setAttribute('src','//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js');
   element2.setAttribute('type','text/javascript');
   var element3 = oEditor.document.createElement( 'script' );
   element3.setAttribute('src','drag.js');
   element3.setAttribute('type','text/javascript');
   h.append(element2);
   h.append(element3);

   function drag() {
    try {
     $('iframe').get(0).contentWindow.EnableDrag();
    }
    catch(err) {
     setTimeout(drag,10);
    }
   };

  setTimeout(drag,10);
});

在drag.js中，我添加了EnableDrag（）函数。

EnableDrag = function() {
  $('#Layer1').draggable();                
}

此代码适用于ff，chrome和IE。

代码仍然存在一些问题，每次我们更改ckeditor的内容或使用源按钮时，头部中包含的绑定和js都会丢失。创建和附加对象后，功能EnableDrag也不会立即可用。所以我使用setTimeout来添加延迟。在Firefox中，拖动不是很顺利。

如果有人知道实施此方法的正确方法，请提供帮助。

如何在ckeditor中为所有浏览器实现可拖动的浮动div？

1 个答案: