jquery - 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 上的点击事件并返回 false。

示例: 检查如果单击指定元素并将光标移动到该元素后面是否发生点击。请注意，如果该 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);
        }
    });
});