Jquery UI 可调整大小不适用于 ckeditor

Question

我正在尝试在 div 上使用 ckeditor 的内联编辑功能，该 div 使用 jquery-ui 可拖动和调整大小。最初，拖动和调整大小功能完美无缺。但是一旦 ckeditor 初始化调整大小停止工作（点击 div 本身它变成编辑器）。

在检查元素时，ui-resize class 仍然存在。我怎样才能让这两个功能一起工作？

这是代码

$(document).ready(function() {

  $("#sample").draggable({
    containment: "#container"
  });
  $("#sample").resizable({
    containment: "#container",
    handles: 'all'
  });
  var editor = CKEDITOR.inline('sample');
});

#container {
  width: 400px;
  height: 500px;
  border: 1px solid #444;
}
#sample {
  height: 100px;
  width: 200px;
  border: 2px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/adapters/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<div id="container">


  <div id="sample" contenteditable="true">
    There is some random text here
  </div>

</div>

对于喜欢 jsfiddle 的人 - https://jsfiddle.net/L8f0oxq1/

Answer 1

我已经更新了你的 fiddle 请看看 https://jsfiddle.net/RRR0308/L8f0oxq1/3/

HTML

<div id="container">
  <div id="editor-container">
    <div id="sample">

    </div>
  </div>

CSS

#container {
  width: 400px;
  height: 500px;
  border: 1px solid red;
}

#editor-container{
  height:200px;
  width:200px;
  border: 2px solid #ccc;
}
#sample {
  height: 97%;
  width: 97%;
  z-index:999;
}

jQuery

$(document).ready(function() {

  $("#editor-container").draggable({

        containment: "#container"
  });

  $("#editor-container").resizable({
    containment: "#container",
    handles: 'all'
  });

  $('#sample').click(function(){
    $("#sample").focus();
    console.log('clicked');
  });

  var editor = CKEDITOR.inline('sample');

});

Jquery UI 可调整大小不适用于 ckeditor

Jquery UI resizable not working with ckeditor

javascript

jquery

jquery-ui

ckeditor