Как вставить текст с символами «<>» в 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 Part

$(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

Как вы заметили, все, что находится между <>, интерпретируется как html-тег в tinymce. При изменении строки в самом href на < и > она также преобразуется в < и > до ее вставки в редактор.

Однако вы можете вставить < и > непосредственно в редактор, и он будет работать так, как вам нужно.

Добавьте эту функцию для преобразования < и > в < и >:

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

и затем вызывайте его, когда вставляете code в tinymce, как это:

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

Это работало для меня раньше, так что я уверен, что это будет работать и здесь.