可调整大小的 tinyMCE 实例不适用于 jqueryUI 的 .draggable

Posted 2023-05-08

【中文标题】可调整大小的 tinyMCE 实例不适用于 jqueryUI 的 .draggable

【英文标题】：Resizable tinyMCE instance not working with jqueryUI's .draggable

【发布时间】：2012-05-31 06:09:03

【问题描述】：

我在容器 div 内有一个动态创建的 TinyMCE 文本区域（使用外部工具栏）。我试图让它可以拖动，并且可以调整大小（整个文本区域）。

jQueryUI 的 .draggable() 适用于 tinyMCE，但如果我使用 .resizable()，当我单击该区域时，不会出现 tinyMCE 外部工具栏。如果我在它的设置中使用了tinyMCE的resize选项，当我点击拖动来调整它的大小时，它会破坏jqueryUI的可拖动功能（整个框跟随鼠标以及调整大小，不会松手）。

【问题讨论】：

我遇到了完全相同的问题。您的问题是：如何将可调整大小拖到 tinymce 区域上？

你们解决了吗？

【参考方案1】：

我使用 jquery ui draggable 的 handle 选项和拖动函数回调解决了这个问题：

div.draggable.handle = "div[role=group], td.mceLast";
div.draggable.drag = function ( event, ui ) 
    if ( $( event.srcElement ).is( '.mceResize' ) || $( event.originalEvent.target ).is( '.mceResize' ) ) 

        return false;
    
;

【参考方案2】：

这是解决方案

".mce-resizehandle" 是 tinymce 调整大小按钮的类

$( ".selector" ).resizable(
  cancel: ".mce-resizehandle,input,textarea,button,select,option",
);

$( ".selector" ).draggable(
  cancel: ".mce-resizehandle,input,textarea,button,select,option",
);