在管理 TinyMCE 编辑器中突出显示文本而不更改 HTML 源？答案

【问题标题】：Highlight text in the admin TinyMCE editor without altering the HTML source?在管理 TinyMCE 编辑器中突出显示文本而不更改 HTML 源？
【发布时间】：2016-05-08 21:42:06
【问题描述】：

我自己的插件存储了每篇文章中的一些短句，我需要在文本编辑器中突出显示它们，以便作者看到它们的位置而不会触碰它们。

我现在找到的唯一方法是使用 TinyMCE 活动编辑器的搜索和替换功能，用黄色跨度包裹主题。然后我可以再次搜索和替换并打开它。

    <script>

        jQuery( window ).load(function() {

            var content = tinymce.activeEditor.getContent();

                content = content.replace(
                    "the text to highlight",
                    "<span style='background: yellow;'>the text to highlight</span>"
                );

                tinymce.activeEditor.setContent(content);

        });

    </script>

有没有比在提交时撤消更好的解决方案？如果有人更改了短语并且我的 unwrap 函数找不到跨度，该如何处理？

【问题讨论】：

或者您应该尝试编辑 tinyMCE iframe html 代码以突出显示。我认为这可能有助于您检查使用编辑内容：archive.tinymce.com/wiki.php/API3:event.tinymce.Editor.onChange

标签： javascript jquery wordpress tinymce

【解决方案1】：

您是否考虑过使用noneditable 插件？这允许您在标签上放置一个属性，使该标签的所有子元素都不可编辑。您还可以使用 CSS 来设置这些不可编辑部分的样式，以明确它们是不可编辑的。

https://www.tinymce.com/docs/plugins/noneditable/

【讨论】：