I am looking for text synchronization solutions between the editor and the textarea field.

TE So that when editing data from the editor are automatically synchronized (saved) with the field "textarea"

... tinymce.init({ selector: "textarea", ... <textarea id="textarea" name="content">ΠœΠ΅ΡΡ‚ΠΎ для сохранСния(синхронизации)</textarea>

On the example of an editor on a stack β€” the top editor, at the bottom of the textarea with the result of editing, the built-in tinyMCE function does not fit.

The code below displays in the console, but not in the element, where is the error?

 setup: function(editor) { var div = document.getElementsByTagName('textarea'); editor.on('change', function(e) { console.debug(tinyMCE.activeEditor.getContent()); document.getElementById('#textarea').innerHTML = tinyMCE.activeEditor.getContent(); }); }
  • It's not entirely clear what you mean. But maybe it will help - tinymce.com/wiki.php/api4:event.tinymce.Editor.change , tinymce.com/wiki.php/Plugin:autosave - Reinq
  • Describe in detail, the points that you want. - RussCoder
  • So that if you change the editor field, the code from the editor will go directly to the <textarea> field - Vladimir H
  • Add a question - Vladimir H
  • Yes, but my nickname through @ did not indicate and I did not receive a notification, that they answered the comment. textarea is a text editing field, and on stackoverflow we edit the message in pure textarea which displays some similarity to the source code of the message, and how it will look is already below. TinyMCE - WYSYWIG editor - its meaning is that it immediately shows what happens, like MS Word, and the source code is hidden, the same will be displayed from the bottom as inside (on SO this is not at all). You need it? - RussCoder

2 answers 2

TinyMCE installation script - InitTinyMCE.js

 tinymce.init({ selector: '#forTinyMCE', width: 700, height: 100, resize: false, plugins: 'link emoticons table code image', menubar: "edit insert view format tools", toolbar1: 'fontselect fontsizeselect | bullist numlist | outdent indent blockquote ', toolbar2: 'code | undo redo | removeformat subscript superscript | alignleft aligncenter alignright alignjustify', toolbar3: 'table | bold italic underline strikethrough | link unlink | emoticons | image responsivefilemanager', relative_urls: false, setup: function (editor) { //ΠΏΡ€ΠΈ установкС tinyMCE editor.on('NodeChange', function (e) { // ΠΏΡ€ΠΈ вставкС var view = document.getElementById("view"); // нашли ΠΏΠΎΠ»Π΅ отобраТСния view.innerHTML = editor.getContent(); // ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ }); editor.on('keypress', function (e) { // ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши var view = document.getElementById("view"); view.innerHTML = editor.getContent(); }); } });

HTML page

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="//tinymce.cachefly.net/4.2/tinymce.min.js" defer></script> <script type="text/javascript" src="jslib/InitTinyMCE.js" defer></script> <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования tinymce</title> </head> <body> <div style="margin: 0 25%; position: relative"> <form action="post/postPool.php" name="textForm" method="post"> <textarea name="text" id="forTinyMCE" style="width: 200px; height: 100px;">Easy! You should check out MoxieManager!</textarea> <!--<input type="submit" value="Upload">--> </form> <div id="view" style="width: 700px; height: 200px; background: lightgoldenrodyellow; overflow: auto"> </div> </div> </body> </html>

Under the editor, the field with which the editor is synchronized. Idea: just handle the key press events and field changes (if the text inserts the key handler does not work) and overwrite the contents of the editor in a special field.

PS: You can use the change event, but it is not generated every time you press a key and not every time you change the text in the editor.

Update: The document.getElementById('#textarea') code is incorrect. Write document.getElementById('textarea') without # . And it is better not to use such id. Write at least mytextarea .

    the result of the editor can be obtained in js with

     tinyMCE.get('textareaβ€²).getContent();
    • We do not need a result, namely, synchronization with the field "textarea" - Vladimir H
    • so what's stopping to put this result in a textarea? or do you want continuous sync? I, for example, shift when I'm going to send the result to the server. AutoSave can also do this. And for every change - the resources of many things seem necessary - splash58
    • Well, I actually have shamanism now, I did not find a normal wysiwyg Editor for c #, so I am amused. In the toad, the script is rather weak :( and there’s some kind of trouble with auto saving, which is why continuous synchronization is. As I was told, it’s better to pick this `setup: function (editor) {editor.on ('change', function (e) { });} ` - Vladimir H
    • well, this is to run the function on every change in the text. what's next? My answer will allow you to take from the editor the result of his work. at least for every change, even before saving :) - splash58
    • I understood that, but here I have a little experience with JavaScript :( - Vladimir H