javascript - TinyMCE 清理输入

Question

我正在尝试使用 TinyMCE (版本 4.1.2)作为所见即所得编辑器。登录用户可以编写自己的页面，并直接查看访问者访问时页面上显示的内容。

现在，我想直接存储 html。例如:

登录用户看到This is my text! ，但实际上 TinyMCE 将其显示为 <p>This is my text!</p> 。还有某些样式，例如 <h1>以及可以添加的链接。

现在，用户可以插入超链接，给出应显示的链接和文本。然而问题是，如果用户手动写入 <a href='example.com'>Example</a> ，它像这样在编辑器中显示，但也以纯 html 形式存储，因此显示时它只是一个带有文本 Example 的超链接。 .

这就是我的代码的样子(省略配置):

tinymce.init({
    setup: function(editor){
        editor.on('change', function(e){
            $('[name="'+editor.id+'"]').next("textarea").html(editor.getContent({format: 'html'}));
        });
    }
});

因此，TinyMCE 字段中的文本被复制到 <textarea> 中。位于 <form> 内保存时提交。

类似这样的事情:

存储为:

<h1>Title</h1>
<p><a href="example.com">example</a></p>
<p><a href="example.com">test</a></p>

这让我无法区分真正的链接和纯文本，因此在存储数据后我无法对其进行处理。

我已经摆弄过 editor.getContent({format: 'html'})格式选项，例如 format: 'raw' ，但无济于事。我做错了什么？

Answer 1

希望我正确理解你的问题。

看起来您想要完全按照用户输入的内容显示用户输入的内容，而不实际将用户编写的任何 HTML 处理为 HTML。我对么？ 我相信这可以解决您遇到的问题:

https://kokoblog.net/php/fix-tinymce-auto-convert-html-code-to-element-tag

但是，如果您只关心它在存储时的外观，而不关心它在处理时的外观，那么您将需要向tinyMCE 添加代码块，并确保您的用户了解他们需要选择每当他们要编写原始 HTML 时，都会使用代码选项。

    style_formats : [{title : 'Code', inline : 'code'}]

源代码:Add "code" button to wordpress tinyMCE

我希望这有帮助! :)