Comment définir le texte initial dans une textarea TinyMCE?

Question

Je suis dans une situation curieuse où, auparavant, je n'ai eu aucun problème à réaliser ce que je cherchais. Le code suivant fait partie d’une page HTML destinée à héberger une zone de texte enrichi TinyMCE:

...
<textarea id="editing_field">This text is supposed to appear in the rich textbox</textarea>
...

Au début, cela a fonctionné comme prévu: créer une zone de texte enrichie contenant le texte inclus. Cependant, le code TinyMCE a décidé à un moment donné de transformer le texte HTML en texte suivant:

<textarea id="editing_field" style="display: none;"/>
This text is supposed to appear in the rich textbox

Cela rend le texte sous la zone de texte, ce qui n’est pas exactement idéal. Je n'ai aucune idée de ce qui a provoqué ce changement de comportement, bien que j'utilise également jQuery si cela peut avoir un effet.

Je peux contourner le problème en chargeant le contenu dans la zone de texte avec javascript après le chargement de la page, soit en utilisant ajax, soit en masquant le texte dans le code HTML et en le déplaçant simplement. Cependant, je souhaiterais, si possible, émettre le texte dans la zone de texte directement à partir de PHP. Quelqu'un sait ce qui se passe ici et comment y remédier?

Mise à jour 2: J'ai reproduit avec succès la situation qui provoque le changement de comportement: au début, le texte brut dans la zone de texte était identique à celui du premier extrait de code. Cependant, après avoir enregistré le contenu, le texte ressemblerait à ceci:

<p>This text is supposed to appear in the rich textbox</p>

En raison de la présence de la balise p, TinyMCE déclenche la transformation entre une zone de texte englobante en une zone de texte qui est une balise unique (comme illustré ci-dessus).

Mise à jour 1: ajouté au fichier de configuration TinyMCE:

tinyMCE.init({
        // General options
        mode : "exact",
        elements : "editing_field",
        theme : "advanced",
        skin : "o2k7",
        skin_variant : "black",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        save_onsavecallback : "saveContent",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull", 
        theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor", 
        theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,fullscreen,code", 
        theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_toolbar_location : "top", 
        theme_advanced_toolbar_align : "left", 
        theme_advanced_statusbar_location : "bottom", 
        theme_advanced_resizing : false,

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        },

        width : "450",
        height : "500"
    });

Answer 1

Il semble que j’aie résolu le problème, sauf s’il existe des cas extrêmes qui ruineraient la solution. J'utilise le code PHP suivant dans le contenu de la page avant de l'enregistrer dans la base de données:

$content = str_replace(chr(10), "", $content);
$content = str_replace(chr(13), "", $content);
$content = str_ireplace('<','&#x200B;<',$content);

Cela supprime les nouvelles lignes, puis ajoute un caractère invisible de largeur zéro avant toute balise de début. Ce texte est ensuite inséré plus tard entre les balises textarea avant que TinyMCE ne fasse sa magie. Je ne sais pas pourquoi mais cela ne déclenche pas le problème et les caractères ajoutés ne sont pas affichés dans la version finale HTML ni dans la vue HTML de TinyMCE. Le seul problème que je peux voir avec cette solution est donc l'impact négatif sur les performances. Un détail est qu’il apparaît que seules les balises de départ doivent être ajoutées au début, mais je n’en ai pas tenu compte ici, par souci de simplicité.

Answer 2

Si vous n'appelez pas la fonction JavaScript de tinyMCE, vous devrez peut-être faire face à des problèmes de compatibilité de navigateur.

Si vous n'avez qu'un seul bloc tinymce sur la page, vous pouvez simplement faire ceci:

tinyMCE.activeEditor.setContent('<span>some</span>');

Vous pouvez également définir un format tel que BBCode. Consultez la la documentation de setContent .

Je voudrais que votre code PHP répercute le code HTML dans une fonction JavaScript et l'appelle avec onload:

function loadTinyMCE($html) {
    echo "
        <script type="text/javascript">function loadDefaultTinyMCEContent(){
             tinyMCE.activeEditor.setContent('$html');
        }</script>
    ";
}

puis

<body onload="loadDefaultTinyMCEContent()">

Si vous ne souhaitez pas utiliser l'événement <=> de la page, tinymce dispose d'une option init appelée oninit qui fonctionne de la même manière.

Vous pouvez également setupcontent_callback vous donner un accès direct à l'iframe.

Answer 3

Étant donné que la présence de <p> balises provoque la transformation, je soupçonne que votre code HTML finit par ressembler à:

...
<textarea id="editing_field"><p>This text is supposed to appear in the rich textbox</p></textarea>
...

Malheureusement, les éléments HTML n'étant pas autorisés techniquement dans les balises <textarea>, il est donc possible que les balises htmlspecialchars() soient considérées comme le début d'un nouvel élément de bloc, fermant implicitement votre zone de texte. Pour résoudre ce problème, vous pouvez encoder les chevrons:

...
<textarea id="editing_field">&lt;p&gt;This text is supposed to appear in the rich textbox&lt;/p&gt;</textarea>
...

À l'aide de PHP, cela peut être fait en envoyant votre valeur par <=> avant de la renvoyer à la page.

Answer 4

Ce deuxième exemple < textarea ... / > est une notation de balise vide. Si vous voulez que le texte soit à l'intérieur de la page, vous devez le faire comme le premier moyen & Lt; teatarea .... & Gt; foo & Lt; / textarea & Gt;

Qu'est-ce que la sortie des balises textarea? Pouvez-vous résoudre ce problème pour voir s’il utilise la notation de balise vide?

Eric

Answer 5

tinyMCE.activeEditor.setContent ('certains') fonctionne pour moi.Cheers

Answer 6

Nous utilisons TinyMCE ici également récemment. Je suis particulièrement intrigué par la modification de l'attribut style de la zone de texte pour masquer l'élément. Très étrange.

Je suis curieux de savoir à quoi ressemble votre fichier de configuration (documentation sur les fichiers de configuration à l'adresse: django )

---

UPDATE

wow ... vous utilisez BEAUCOUP de plugins tinyMCE. J'essaierai de chercher plus loin quand j'aurai un peu de temps et de voir si je ne parviens pas à identifier certains suspects potentiels.

Answer 7

Je suis arrivé au même problème en utilisant React, c'est peut-être lié à cela. La valeur initiale transmise au composant est la valeur d'origine. Une fois reçu, le composant prendra en charge et gérera le contenu, qu’une nouvelle valeur lui soit transmise ou non. Ainsi, si vous passez une chaîne, c'est une constante qui existe lors du rendu initial de votre composant. Mais si vous transmettez une variable, il est possible que la valeur initiale de la variable soit différente de la valeur que vous souhaitez afficher (comme c'est probablement nulle ou indéfinie jusqu'à ce que vous receviez la valeur à afficher). Dans mon cas, je reçois un objet avec le contenu de la page, dont le HTML à afficher en tant que contenu initial. Mais la méthode de rendu a d'abord été déclenchée avec un objet vide, puis avec l'objet réel avec les données.

Answer 8

défini dans tinyMCE.init -

init_instance_callback: function (editor) {
                AFunction();
            }

function AFunction(){
//your code here
tinyMCE.get('youtinytextareaname').setContent("your text here");
}

Answer 9

Pour modifier un champ tinymce spécifique, procédez comme suit:

tinyMCE.get('editing_field').setContent('your default text');