0

目前如果我们在ckeditor中添加一个绝对位置的浮动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？在这种情况下，我们如何将所需的 jquery 库包含到 ckeditor 所见即所得区域并将事件绑定到 div？

4

1 回答 1

2

针对上述问题，我做了一个解决方法。在 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的内容或者使用源码按钮，head里包含的binding和js都丢失了。此外，EnableDrag 函数在创建和附加对象后也不能立即使用。所以我使用 setTimeout 来添加延迟。在firefox中，拖动不是很流畅。

如果有人知道执行此操作的正确方法，请提供帮助。

于 2012-10-09T07:10:08.810 回答