CODEWITHSUNDEEP
javascripttinymce
Hothi Jimit
Hothi Jimit

Reputation: 365

tinymce editor content value not showing

i will used tinymce html editor

my problem is when editor position change that time editor will null

enter image description here

see image when down arrow click editor position not change but content null

i can used javascript code for up arrow and down arrow code

$("body").on("click", ".upclass", function() {
     var click=this.id;



     console.log(click);    
 $('.div'+click+':parent').insertBefore($('.div'+click+':parent').prev());
});

 $("body").on("click", ".downclass", function() {

    var downclick=this.id;



    var demo=$('.div'+downclick+':parent');
     $(demo).insertAfter($(demo).next());
});

how to do this position change textarea id give dynamically means id is not static.

Upvotes: 0

Views: 3852

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13726

The issue you are running into is tied to how insertBefore and insertAfter manipulate the DOM. If you remove the underlying <textarea> from the DOM you break its connection to TinyMCE. When you re-insert the <textarea> into the DOM its a "new" <textarea> and TinyMCE is no longer connected to the <textarea>.

To successfully move the <textarea> you need to do 3 things...

  1. Call triggerSave() to update the underlying <textarea> with the current value of TinyMCE. TinyMCE does not keep the <textarea> in sync as you type - this would be a lot of overhead for the editor so it does not do this as you type. triggerSave() pushes the current content of the editor back into the <textarea>. https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave
  2. Use the remove() method to remove TinyMCE from the <textarea> you are about to move. Remove will properly "disconnect" TinyMCE from the <textarea>. You can target a specific instance of TinyMCE by using the id of the underlying <textarea>: tinymce.remove('#idoftextarea');
  3. After you move the <textarea> reinitialize TinyMCE on that <textarea>. You can use tinymce.init({}); just as you did when you first loaded the page to reload TinyMCE onto the <textarea>.

If you follow these steps the content should still appear properly after you move the <textarea> within the DOM.

Upvotes: 1

Related Questions