Question

所以我的页面上有一个TinyMCE表单，它预先填充了“部分”（具有特定类名的div）。

我有几个插件会将更多“部分”添加到TinyMCE。

我需要它，所以当我按下插件按钮时，它会测试以确保光标不在“部分”内并将“部分”粘贴到另一个“部分”内。

不确定我需要采取的方向来实现这一目标。任何帮助都会很棒。

更多信息： 下面是一个插件的示例，它添加了一个按钮，只需将一个简单的dov插入到选择/光标的编辑器中。

ed.addButton('pluginbutton', {
    title : 'MyPlugin',
    image : 'img/test.png',
    onclick : function() {
        ed.selection.setContent('<div>test</div>');
    }
});

我目前认为onBeforeSetContent是我需要设置的API事件处理程序，以处理我是否在另一部分，如果是，则向屏幕发送消息。如果不是只做setContent方法。我不知道到底是怎么设置的，所以我仍然想到这一点。这里有什么帮助吗？

Answer 1

由于您似乎可以控制插件，因此我将编辑它以便工作。

注意：我使用的是jQuery方法closest。我想，既然你是jQuery核心团队的成员，那么你可能正在将它用于这个项目。如果没有，只需根据需要重构该行。重要的是selection.getNode()返回DOM元素，它是开始和结束选择点的父元素。：

ed.addButton('pluginbutton', {
    title : 'MyPlugin',
    image : 'img/test.png',
    onclick : function() {
        if( !$(ed.selection.getNode()).closest('div.section').length ){
            ed.selection.setContent('<div class="section">test</div>'); 
        }
    }
});

其他想法

另外，为了让您的插件足够清楚，以便它不会将div作为p标记的子项，您可以执行以下操作：

用以下内容替换onclick：

onclick: function(){
    var $node = $(ed.selection.getNode());
    if( !$node.closest('div.section').length ){
       // Get highest element that is a direct child of the `body` tag:
       var $parent = $node.closest('body > *');
       // Wrap with our special section div
       if($parent.length) $parent.wrap('<div class="section"></div>');
    }
}

Answer 2

我不具体了解TinyMCE，但应该可以从ed.selection中提取当前的DOM元素。如果这是可能的（我确定它使用某种getter函数或属性），你应该能够做到以下几点：

使用ID或类（“<div class='protected'>”）
遍历选择的祖先（使用元素的parentNode属性）并检查其中一个父元素是否具有“受保护”类或ID。
如果找到了ID，请不要执行setContent();否则执行它。

测试您是否在TinyMCE中的特定内容块中，并且不允许插件添加到该内容块（如果在其中）

2 个答案: