TinyMCE行内编辑器覆盖遮挡可编辑文本问题求助

云上老周

2026-7-20

TinyMCE行内编辑器遮挡可编辑文本问题

编辑器激活时会覆盖并遮挡可编辑文本，预期应贴合文本正常显示。

我的TinyMCE初始化代码如下：

function initEditor(editableItemsClass) {
    tinymce.init({
        selector: editableItemsClass,
        inline: true,
        menubar: false,
        highlight_on_focus: true,
        plugins: [
            'link', 'autolink',
        ],
        toolbar: [
            'undo redo | bold italic underline | fontsize | forecolor | alignleft aligncenter alignright alignfull'
        ],
        valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
        valid_styles: {
            '*': 'font-size,font-family,color,text-decoration,text-align'
        },
    });
}

对应的HTML代码：

<div>
   <h3 class="text-uppercase text-white m-0 text-center editable_textfields" style="letter-spacing: 2px;" id="home_event_name_1">We are getting married</h3>
</div>

问题表现：编辑器工具栏激活后覆盖在可编辑文本上方，遮挡了原有的内容。

解决建议：

调整工具栏模式：在初始化配置中添加toolbar_mode: 'floating'，让工具栏以浮动方式显示，避免固定遮挡文本：
```
tinymce.init({
    // 原有配置...
    toolbar_mode: 'floating',
});
```
修复CSS冲突：页面中自定义样式（比如h3的m-0类导致内边距不足）可能和TinyMCE样式冲突，可通过添加内容样式给可编辑元素增加顶部内边距：
```
tinymce.init({
    // 原有配置...
    content_style: '.editable_textfields { padding-top: 35px; }'
});
```
禁用高亮聚焦：尝试注释掉highlight_on_focus: true配置，避免高亮层叠加导致遮挡。