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);
        }
    });
});