Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
363 views
in Technique[技术] by (71.8m points)

富文本编辑器tinymce阻止了拖动的问题

我的页面内容是左右flex布局,左侧是导航窗口,右侧是tinymce的编辑窗口,我是想通过drag中间的move-line来控制左右两个窗格的大小,现在的问题是使用draggabilly来拖动move-line时,向左拖动是可以的,但是向右边拖动时,遇到编辑器,就拖不过去了,请问是什么问题,望指教。
image

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,?initial-scale=1.0">
 <title>TinyMCE?Drag</title>
 <script src="../lib/jquery3.5.1/jquery-3.5.1.js"></script>
 <script src="../lib/tinymce_5.4.0/js/tinymce.min.js"></script>
 <script src="../lib/draggabilly/draggabilly.pkgd.min.js"></script>

 <style>
 html,
 body {
 margin: 0;
 padding: 0;
 height: 100%;
 width: 100%;
 }
 .all-warp {
 display: flex;
 flex-direction: row;
 width: 100%;
 height: 100%;
 }
 .left {
 width: 200px;
 background-color: burlywood;
 }
 .move-line {
 width: 4px;
 background-color: crimson;
 cursor:e-resize;
 }
 .editor-warp {
 flex-grow: 2;
 }
 </style>
</head>
<body>
 <div class="all-warp">
 <div class="left"></div>
 <div class="move-line"></div>
 <div class="editor-warp">
 <textarea id="editor"></textarea>
 </div>
 </div>

 <script>
 $(document).ready(function () {
 var $draggable = $('.move-line').draggabilly({
 axis: 'x',
 containment: '.all-warp'
 })
 });
 tinymce.init({
 selector: '#editor',
 menubar: false,
 statusbar: false,
 language: 'zh_CN',
 resize: false,
 height:500,
 });
 </script>
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

63 comments

56.6k users

...