TinyMCE 设置为内联时剥离样式标签答案

【问题标题】：TinyMCE stripping style tags when set to inlineTinyMCE 设置为内联时剥离样式标签
【发布时间】：2020-12-28 20:23:57
【问题描述】：

我正在尝试让 TinyMCE (v5.6.2) 在内联模式下使用样式标签，但它不起作用。这是一个演示问题的示例：

tinymce.init({
  selector: 'div#default',
  inline: true,
  schema: 'html5',
  valid_children: '+body[style]',
  fixed_toolbar_container: '#container',
  plugins: 'code',
  toolbar: 'code'
});

<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js"></script>
<div id="container">
  </div>
<div id="default">test</div>
<p>sample</p>

如果您编辑文本的源并添加样式标记，例如 (p{color:red})，则在您保存源时它会立即被删除（因此再次编辑源并消失）。但是，如果您将内联模式更改为 false，那么它会按预期工作。

我相信这是 TinyMCE 的一个错误，但很想知道是否有其他人遇到过这个问题以及是否有任何解决方法？

【问题讨论】：

标签： tinymce tinymce-5

【解决方案1】：

原来解决方案非常简单。因为它是内联的并且我使用的容器是一个 div，所以 valid_children 属性实际上需要设置为“+div[style]”。我错误地将文档解释为样式标记不需要是正文标记的直接后代，并且可以位于后代树中的任何位置；当然我现在知道这是不正确的，因为它必须是直系后代。

【讨论】：