Setzen Sie den Textbereichswert mit Javascript nach der TinyMCE-Initialisierung

Ich habe ein Textarea und verwende tinyMCE für dieses Textarea.

Was ich eigentlich mache, ist, dass ich beim Öffnen der Seite den Textbereich mit etwas Text fülle und danach den tinyMCE initialisiere.

Das Problem ist, wenn ich versuche, den Wert des Textbereichs nach der Initialisierung von tinyMCE zu ändern, passiert nichts.

Hier ist ein Beispiel.

1. Erstellen des Textbereichs:

   <textarea style="width: 95%;" name="title"  id="title"></textarea>
   

2. Füllen des Textfeldes:

   $('#title').html("someText");
   

3. Initialisierung von tinyMCE

   tinyMCE.init({
           // General options
           mode : "specific_textareas",
           theme : "advanced",
           width: "100%",
           plugins : "pagebreak,paste,fullscreen,visualchars",
   
           // Theme options
           theme_advanced_buttons1 : "code,|,bold,italic,underline,|,sub,sup,|,charmap,|,fullscreen,|,bullist,numlist,|,pasteword",
           theme_advanced_buttons2 :"",
           theme_advanced_buttons3 :"",
           theme_advanced_buttons4 :"",
           theme_advanced_toolbar_location : "top",
           theme_advanced_toolbar_align : "left",
           theme_advanced_statusbar_location : "bottom",
           valid_elements : "i,sub,sup",
           invalid_elements : "p, script",
           editor_deselector : "mceOthers"
       });
   

4. Ich möchte den Inhalt der Textansicht ändern (funktioniert aber nicht)

Ich habe versucht den tinyMCE genauso zu initieren wie vorher

    $('#title').html("someModifiedText"); // does not work

Ich habe auch versucht, tinyMCE zu entfernen:

    if(tinyMCE.getInstanceById('title'))
    removeTinyMCE("title");

Mit

function removeTinyMCE (dialogName) {
    tinyMCE.execCommand('mceFocus', false, dialogName);
    tinyMCE.execCommand('mceRemoveControl', false, dialogName);

}

Und das zur Wiederverwendung:

    $('#title').html("someModifiedText"); // does not work

Mir gehen die Ideen aus… Vielen Dank für Ihre Hilfe….

Das Problem hierbei ist, dass Sie nichts sehen, wenn Sie Text oder HTML in Ihr Textfeld eingeben. Ihr Textbereich wird ausgeblendet, wenn tinymce initialisiert wird. Was Sie dann sehen, ist ein inhaltsbearbeitbarer Iframe, der zum Bearbeiten und Gestalten von Inhalten verwendet wird. Es gibt mehrere Ereignisse, die dazu führen, dass tinymce seinen Inhalt in das HTML-Quellelement des Editors (in Ihrem Fall Ihren Textbereich) schreibt.

Wenn Sie den Inhalt des Editors (der sichtbar ist) festlegen möchten, müssen Sie so etwas wie aufrufen

tinymce.get('title').setContent('<p>This is my new content!</p>');

Sie können auch direkt auf die Dom-Elemente zugreifen, indem Sie Folgendes verwenden

tinymce.get('title').getBody().innerHTML = '<p>This is my new content!</p>';

oder mit jQuery

$(tinymce.get('title').getBody()).html('<p>This is my new content!</p>');

Du kannst den … benutzen tinyMCE.activeEditor.setContent('<span>some</span> html');

Überprüfen Sie diese Antwort

Einfach das funktioniert für mich

$("#description").val(content);

<textarea id="content" name="content">{{html_entity_decode($yourstringdata)}}</textarea>

Das ist Arbeit für mich, entschlüsseln Sie Ihre HTML-Daten und platzieren Sie sie zwischen Start- und schließenden Textarea-Tags.

Ich hatte das gleiche Problem gelöst, indem ich sicherstellte, dass dies der Fall war setContent wurde gemacht, nachdem das Dokument fertig ist, also zuerst;

script(type="text/javascript").
  tinymce.init({
    selector: '#title',
    height: 350,
    menubar: false
  });

dann

script(type="text/javascript").
  $(document).ready(function(){
    tinymce.get('title').setContent('<span>someText</span> is html');
  })

Oben ist Code für Pug, aber der Schlüssel ist -wie erwähnt- um ihn auf das fertige Dokument zu laden.

einmal anrufen

tinymce.triggerSave();

dann wird der Wert von tinymce auf den ursprünglichen Textbereichswert übertragen. So können Sie das so bekommen, wie Sie es aus dem normalen Textbereich erhalten.

Für mich geht das. Platzieren Sie es einfach in Ihrem HTML-Code, anstatt auf tinymce zu gehen

    <textarea> html CONTENT</textarea>