Question

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

在检查元素时，$(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>

$Validator->errors()->toArray()

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

Answer 1

我已经更新了您的小提琴，请查看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一起使用

1 个答案: