web-dev-qa-db-fra.com

Comment définir le contenu dans TinyMCE 4, de préférence dans le $ (document) .ready (); bloc?

Comme le titre l'indique, j'ai consulté la documentation officielle mais cela ne fonctionne pas; voici mon code JavaScript (utilisant jQuery):

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        schema: "html4",
        menubar: false,
        plugins: 'preview textcolor link code',
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | code'
    });
    tinymce.activeEditor.setContent($('TEXTAREA#rtf').text());
});
  1. J'ai essayé d'inspecter des instances tinymce _ et tinyMCE (obtenues de Google), et elles sont toutes deux - objets bien.
  2. J'ai également essayé d'inspecter tinymce.activeEditor et tinyMCE.activeEditor, mais ils s'avèrent être null !

(Cough) D'une certaine manière, après avoir tout restauré là où j'ai commencé, cela fonctionne:

$(document).ready(function() {
    tinymce.init({
        element_format: "html",
        menubar: false,
        plugins: 'preview textcolor link code',
        schema: "html4",
        selector: 'TEXTAREA#rtf',
        toolbar: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote subscript superscript | code'
    });
});

Je suppose que cela est dû au cache UA ou au cache de résultats transformé XSLT qui a provoqué le problème; Merci encore pour votre temps!

javascriptjquerytinymce-4
9
高科技黑手

voici comment je l'ai implémenté:

setTimeout(tinyMCE.init({
                            selector: "textarea.edit_notes",
                            height: editor_height,
                            theme: "modern",
                            menubar: "tools table format view insert edit",
                            force_br_newlines : false,
                            force_p_newlines : false,
                            forced_root_block : '',
                            //plugins: "fullpage",
                            valid_elements : '*[*]',
                            setup: function(ed){
                                ed.on("init",
                                      function(ed) {
                                        tinyMCE.get('testeditor').setContent($('#testeditor').val());
                                        tinyMCE.execCommand('mceRepaint');

                                      }
                                );
                            }
                            }), 50);

Donner un coup de feu

6
Harsain

J'ai trouvé une meilleure solution qui fonctionne n'importe où dans le code (et ce n'est pas un hack, contrairement à l'astuce setTimeout)

tinymce.get('tinymce-element-id').on('init',function(e) {
      e.target.setContent('my custom content');
});
4
Radomír Laučík
tinymce.activeEditor.setContent('<span>some</span> html');

https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent

4
Fury

Ce fil m'a mis sur la bonne voie alors j'ai pensé partager ma solution avec v4

tinymce.init({
     ...,
     init_instance_callback:function(editor){
         editor.setContent(__YOUR_CONTENT__);  
     }
});
2
Eric

Ce code est exécuté dès que le document est prêt, de sorte que la seule chose à faire est de définir le contenu même avant que textarea ne contienne du contenu. Une question: où et comment le contenu est-il défini dans la zone de texte?

Deuxièmement, pouvez-vous placer tinyMCE.init({ .... }); dans setTimeOut.

J'espère que cela t'aides.

0
Harsain
tinymce.init({
    selector: "#txtSummary",
    width: '100%',
    height: 350,
    statusbar: false,
    menubar: false,

    setup: function (ed) {

        ed.on('init', function () {
            //Get a value from a hidden variable and set the tiny mce text to it
            var signature = $("#hidSignature").val();
            this.setContent(signature); 
        });
    },

    paste_data_images: true,

    plugins: [
        "advlist autolink lists link charmap hr anchor pagebreak image",
        "searchreplace wordcount visualblocks visualchars code",
        "media nonbreaking save table contextmenu directionality"
    ],
    toolbar: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | image"
});
0
Denys Wessels

Je me souviens avoir fait quelque chose comme ceci une fois, en ajoutant manuellement la valeur textarea à TinyMCE:

tinyMCE.init({
   ...
   setup : function(editor) {
      editor.setContent($('TEXTAREA#rtf').text());
   }
});

Le paramètre "editor" de la fonction de configuration est une instance de TinyMCE, garantie d’être présente. Je n'ai pas utilisé TinyMCE depuis un moment, mais je me souviens d'avoir eu de nombreux problèmes comme celui-ci! Vous n'êtes pas seul à trouver des problèmes ici.

Mais pourquoi ne pas utiliser quelque chose comme ça? http://www.tinymce.com/wiki.php/Configuration3x:editor_selector

tinyMCE.init({
        ...
        mode : "specific_textareas",
        editor_selector : "TEXTAREA#rtf" // CSS Selectors
});

Quel est le moyen par défaut d'utiliser TinyMCE. Il convertira vos zones de texte en instances TinyMCE et maintiendra la valeur synchronisée entre l’entrée et TinyMCE.

0
Jordan P