通过在 tinymce 中显示来剥离 <![if !mso]>

Question

目前我使用的是 tinymce 的一个非常旧的版本 (2.8)，现在我正在尝试将其升级到最新版本 (4)。在那个过程中，我遇到了一些麻烦，主要的问题是在 html 查看器中显示 <![if !mso]>，它隐藏在旧版本中，

我正在使用此编辑器作为我的邮件编辑器，所以基本上我是在将响应式 html 邮件文本加载到编辑器中。但它在 html 查看器中显示 <![if !mso]> 这段代码，它没有解释为评论。

我使用的代码，（根据 example）

tinymce.init({
  selector: 'textarea',
  height: 500,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
  image_advtab: true,
  relative_urls : false
 });

任何人都知道我应该如何从 HTML 查看器中隐藏此 <![if !mso]> 代码。请注意，此注释非常重要，因此我不想在加载到编辑器之前将它们从 html 代码中删除。我只需要隐藏它们。

Answer 1

这里的核心问题是 <![if !mso]> 不是有效的 HTML 标签，因此 TinyMCE（作为 HTML 编辑器）将其视为文本。您可以通过在您的 TinyMCE 配置中使用 protect 选项来教 TinyMCE 保护编辑器中的某些文本：

https://www.tinymce.com/docs/configure/content-filtering/#protect

例如，您可以这样做：

tinymce.init({
    selector: textarea,
    protect: [
      /\<!\[if !mso\]\>/g,   // Protect <![if !mso]>
      /\<!\[if !vml\]\>/g,   // Protect <![if !vml]>
      /\<!\[endif\]\>/g,     // Protect <![endif]>
      /<\?php[\s\S]*?\?>/g   // Protect <?php ?> code
    ]
});

请注意，MS Office 文档中包含大量这些非标准标记，因此要捕获所有这些标记，您可能需要向 protect 配置选项添加其他项目。

通过在 tinymce 中显示来剥离 <![if !mso]>

stripping out <![if !mso]> by displaying in tinymce

html

javascript

tinymce

tinymce-4