CODEWITHSUNDEEP
jquerytinymcetinymce-4
Alex
Alex

Reputation: 1309

TinyMCE 4 insertContent(); not behaving correctly

I got a TinyMCE editor instance running. And 

tinyMCE.activeEditor.insertContent('<div class="row"><div class="col-md-6"></div><div class="col-md-6"></div></div><div class="row"><div class="col-md-12"></div></div>');

This should generate : 

<div class="row"><div class="col-md-6"></div><div class="col-md-6"></div></div><div class="row"><div class="col-md-12"></div></div>

But instead of that it is generating:

<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>

When I am doing it step by step :

tinyMCE.activeEditor.insertContent('<div class="row">&nbsp;');
tinyMCE.activeEditor.insertContent('<div class="col-md-6">&nbsp;</div>');
tinyMCE.activeEditor.insertContent('<div class="col-md-6">&nbsp;</div>');
tinyMCE.activeEditor.insertContent('&nbsp;</div>');
tinyMCE.activeEditor.insertContent('<div class="col-md-12">&nbsp;</div></div>');

It gets me an even more curious result

<div class="row">&nbsp;
<div class="col-md-6">&nbsp;
<div class="col-md-6">&nbsp;&nbsp;
<div class="col-md-12">&nbsp;</div>
</div>
</div>
</div>

What am I missing??? Should I use another tag instead of insertContent?

Trying inyMCE.execCommand also does not work.

tinyMCE.execCommand('mceInsertContent',false,'<div class=row><div class=col-md-6></div><div class=col-md-6></div></div><div class=row><div class=col-md-12></div></div>');

Upvotes: 1

Views: 6753

Answers (1)

PalinDrome555
PalinDrome555

Reputation: 927

insertContent is intended for plain text. setContent is intended for HTML. However setContent only allows you to add one level of HTML at a time. A way around this is to use dom.add(). This will allow you create a parent element and allows you add children nodes to it.

HTML

<form>
    <textarea></textarea>
</form>

JS

//get inner element 'col-md-6'
//number is how many elements 
function getColMd6(number){
  var html = "";
  for(var i = 0; i < number; i++){
    html += '<div class="col-md-6"></div>';
  }
  return html;
}

//get inner element 'col-md-12'
function getColMd12(number){
  var html = "";
  for(var i = 0; i < number; i++){
    html += '<div class="col-md-12"></div>';
  }
  return html;
}   

tinymce.init({
    selector: 'textarea'
});

//Last parameter lets you specify extra inner html
tinymce.activeEditor.dom.add(tinymce.activeEditor.getBody(), 'div', {class: 'row'}, getColMd6(2));//or just plain html string at last param
tinymce.activeEditor.dom.add(tinymce.activeEditor.getBody(), 'div', {class: 'row'}, getColMd12(1));//or just plain html string at last param

Here is a example of it working DEMO

Upvotes: 3

Related Questions