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

Question

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

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

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

此外，我已经尝试使用 HTML 个实体，例如 < 和 >，但它也不起作用。

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

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

我的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);
    }

});

Answer 1

如您所见，<> 之间的所有内容在 tinymce 中都被解释为 html 标记。在您将 href 本身中的字符串更改为使用 < 和 > 时，它也会在插入编辑器之前转换为 < 和 > .

但是您可以将 < 和 > 直接插入到编辑器中，它会按您的要求工作。

添加此函数将<和>转换为<和>:

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

然后当你将 code 插入 tinymce 时调用它，如下所示：

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

我以前用过，所以我相信它在这里也能用。

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

How to insert text with "< >" characters into TinyMCE as plain text, without it being considered a HTML tag

html

javascript

wordpress

tinymce