TinyMCE添加运行时样式以禁用编辑元素

Question

我正在尝试为我的短代码创建更好的“编辑器”预览。

所以，我用CSS分类的div包装它们，我可以通过editor-styles.css来设置样式：

    if (customid != 0 && customid == 'divider_bar_soft_up' ){
        tagtext = "<div class=\"my_editor_style mceItemNoResize\">["+ customid + "/]</div>";
    }

除了mceItemNoResize类在转移到编辑器中时没有附加到元素上，它才能正常工作。编辑器中的源代码如下所示：

<div class="my_editor_style">[divider_bar_soft_up/]</div>

我的问题是“我如何将自定义css类或样式应用于此元素，以便不会无意中编辑（除了移动或删除）？

我试图阻止用户意外地将光标插入我的包装div并开始输入。

Answer 1

嗯，您可以在包装器div和return false上捕获点击事件。

示例： 如果单击指定的元素，则检查是否发生了ckick，并将光标移动到该元素之后。请注意，如果您在该div中有更多html元素，则需要进行附加检查。

ed.on('init', function(e){
    ed.on('click', function(evt){
        if (evt.target == 'DIV' && evt.target.className == 'my_editor_style')
        {
            // remove selection
            ed.selection.select(evt.target);
            // collapse selection range to end
            ed.selection.collapse(0);
        }
    });
});