如何将带有“< >”字符的文本作为纯文本插入到 TinyMCE 中，而不将其视为 HTML 标记答案

【问题标题】：How to insert text with "< >" characters into TinyMCE as plain text, without it being considered a HTML tag如何将带有“< >”字符的文本作为纯文本插入到 TinyMCE 中，而不将其视为 HTML 标记
【发布时间】：2019-03-07 16:38:07
【问题描述】：

在我的项目中，我使用了 TinyMCE 文本编辑器。我还有一个按钮，单击该按钮时，我的 javascript 代码会将按钮中的值复制到文本编辑器中。

例如：如果按钮值为[first_name]，点击按钮会将文本[first_name]（wordpress中的短代码格式）放入文本编辑器中。

这可行，但现在我已将按钮值从 [first_name] 更改为 <<first_name>>。当我单击按钮时，它应该将<<first_name>> 放入文本编辑器，但它只放入<>。由于文本编辑器将 <<first_name>> 视为 HTML 标记，因此它没有输入完整值。

另外，我尝试过使用 HTML 实体，例如 &lt; 和 &gt;，但它也不起作用。

注意：它不应该是源代码编辑器。它必须是一个简单的文本编辑器。

谁能指导我如何解决这个问题？

我的 HTML 代码：

按钮部分 -

<div class="panel-body">
<div class="col-md-6" style="margin-bottom: 10px;">
<a class="btn btn-primary sInput_netadvimage" href="<<first_name>>" style="width: 100%">FIRST NAME</a>
</div>
<div class="col-md-6" style="margin-bottom: 10px;">
<a class="btn btn-primary sInput_netadvimage" href="<<company_name>>" style="width: 100%">COMPANY NAME</a>
</div>
</div>
</div>

文本编辑器部分

<textarea name="content[]" id="tedit-1" class="tmeditor contentfield" name="area"></textarea>

Jquery 部分

$(document.body).on('blur', '.contentfield', function() {
    currentreplaceelement = $(this);
});

$(document.body).on('click', ".sInput_netadvimage", function(e) {
    e.preventDefault();

    var code = $(this).attr('href');
    alert(code);
    if (currentreplaceelement != '') {
        if (currentreplaceelement.hasClass('subjectfield')) {
            var a = currentreplaceelement.val();
            var output = [a.slice(0, currentreplaceposition), code, a.slice(currentreplaceposition)].join('');
            currentreplaceelement.val(output);
            //  currentreplaceelement = '';
            //   currentreplaceposition = '';
        } else {
            tinymce.activeEditor.execCommand('mceInsertContent', false, code);
        }
    } else {
        tinymce.activeEditor.execCommand('mceInsertContent', false, code);
    }

});

【问题讨论】：

抱歉，您能改写您的问题吗？您希望按钮显示<<firstname>>? 控制台中的简单测试显示console.log("<<firstname"") 在JavaScript 中显示<<firstname>> 没有问题。您用于将文本附加到按钮或 document.body 的确切代码是什么？您可以考虑的一种方法是使用button.textContent = "<<firstname>>（假设您有诸如`let button = document.createElement("button")`之类的东西`

标签： javascript html wordpress tinymce

【解决方案1】：

正如您所注意到的，之间的所有内容都被解释为 tinymce 中的 html 标记。在您将href 本身中的字符串更改为使用&lt; 和&gt; 时，它也会在插入编辑器之前转换为&lt; 和&gt;。

但是，您可以将&lt; 和&gt; 直接插入编辑器，它会按您的需要工作。

添加此函数将&lt;和&gt;转换为&lt;和&gt;：

function convertCode(code) {
    return String(code).replace('<', '&lt;').replace('>', '&gt;');
}

然后在您像这样将code 插入到 tinymce 中时调用它：

tinymce.activeEditor.execCommand('mceInsertContent', false, convertCode(code));

这对我有用，所以我相信它也可以在这里工作。

【讨论】：

谢谢，包含上述功能后它工作正常。
@BoopathiN 很高兴它成功了。这是一个棘手的问题！我已经编辑了您的问题，因此遇到类似问题的其他人可能会发现它也很有用。