Vue.js中TinyMCE编辑器formatselect下拉框CSS覆盖问题

问题背景 #

我已在Vue.js应用中集成TinyMCE编辑器，初始化配置如下：

:init="{
  height: 800,
  menubar: false,
  inline: true,
  setup: (editor) => {
    editor.on('change keyup undo', function(e) {
      updateValue(editor.getContent())
    })
  },
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount textcolor'
  ],
  toolbar: field.toolbar || 'undo redo | formatselect | bold italic forecolor | \
    alignleft aligncenter alignright alignjustify | \
    bullist numlist outdent indent | removeformat | help'
}"

当前遇到的问题是：点击编辑器formatselect下拉框中的段落等选项时，标题显示异常。我尝试添加以下CSS但未找到问题根源，请问如何修复该问题，使标题正常显示？

.mce-content-body {
  height: 100%;
  min-height: 300px;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background-color: white;
}

.tox-tinymce {
  @extend %formFieldBase;
}

修复方案 #

1. 隔离内联模式的样式冲突 #

开启inline: true后，编辑器会直接融入页面流，容易被全局样式干扰。给编辑器容器添加独立类名，并用更具体的选择器控制内容区域样式：

/* 给编辑器容器添加类名后，使用高优先级选择器 */
.tinymce-inline-editor .mce-content-body {
  height: 100%;
  min-height: 300px;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background-color: white;
}

/* 重置工具栏的继承样式，避免影响下拉框 */
.tox-tinymce {
  all: unset;
  @extend %formFieldBase;
}

2. 指定编辑器内部独立样式 #

在初始化配置中添加content_css，为编辑器内容区域指定独立的样式文件，彻底隔离全局样式：

:init="{
  height: 800,
  menubar: false,
  inline: true,
  content_css: '/css/editor-custom-styles.css', // 替换为你的样式文件路径
  setup: (editor) => {
    editor.on('change keyup undo', function(e) {
      updateValue(editor.getContent())
    })
  },
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount textcolor'
  ],
  toolbar: field.toolbar || 'undo redo | formatselect | bold italic forecolor | \
    alignleft aligncenter alignright alignjustify | \
    bullist numlist outdent indent | removeformat | help'
}"

在editor-custom-styles.css中可以自定义标题样式，比如：

h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}
h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.83em 0;
}
p {
  margin: 1em 0;
}

3. 排查全局样式干扰 #

用浏览器开发者工具查看异常标题元素的样式，检查是否有全局的h1/h2/p样式覆盖了编辑器的默认样式。如果有，针对性地取消继承或添加更具体的选择器覆盖。

内容的提问来源于stack exchange，提问作者Andrej Atanasovski