tinymce editor content value not showing

Question

i will used tinymce html editor

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

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.

Answer 1

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.