CODEWITHSUNDEEP
javascripthtmlwordpresstinymce
Boopathi N
Boopathi N

Reputation: 406

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

In my project, I have used a TinyMCE text editor. I also have a button that, when clicked, my javascript code will copy the value from the button into the text editor.

For example : If the button value is [first_name], clicking the button will put the text [first_name] (short code format in wordpress) into the text editor.

That works, but now I have changed my button value from [first_name] to <<first_name>>. When I click the button it should put <<first_name>> into the text editor, but it is only putting <>. It is not putting the full value because the text editor considers <<first_name>> as a HTML tag.

Also, I have tried with HTML entities such as &lt; and &gt; but it doesn't work either.

Note: it should not be a source code editor. It must be a simple text editor.

Can anyone please guide me on how to solve this problem?

My HTML Code:

Button Part -

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

Text Editor Part

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

});

Upvotes: 3

Views: 1353

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

As you've noticed, everything between <> is being interpreted as a html tag in tinymce. In you change the string in the href itself to use &lt; and &gt; it is also getting converted to < and > before it is inserted into the editor.

However you can insert &lt; and &gt; directly into the editor, and it will work as you require.

Add this function to convert the < and > to &lt; and &gt;:

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

and then call it when you are inserting code into tinymce like this:

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

That has worked for me before so I'm sure it will work here too.

Upvotes: 2

Related Questions