如何將帶有“< >”字符的文本作為純文本插入到 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));

這以前對我有用，所以我相信它也適用於這里。