Comment définir le texte initial dans une zone de texte TinyMCE?

Question

Je suis dans une situation curieuse où je n'avais jamais eu de problème pour atteindre ce que je cherchais. Le code suivant est une partie d'une page HTML qui est d'accueillir une TinyMCE riche zone de texte:

... 
<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éant une zone de texte riche avec le texte ci-joint en elle. À un certain moment, cependant, le code TinyMCE a décidé que le textarea HTML doit être transformé en ce qui suit:

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

Ceci rend le texte ci-dessous la zone de texte qui est pas tout à fait idéal. Je n'ai pas la moindre 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 du contenu dans la zone de texte avec javascript après le chargement de la page, soit en utilisant ajax ou en cachant le texte dans le HTML et en le déplaçant simplement. Cependant, je voudrais émettre le texte dans la zone de texte directement depuis PHP si possible. Quelqu'un sait ce qui se passe ici et comment le réparer?

Mise à jour 2: J'ai reproduit avec succès la situation qui provoque le changement de comportement: Au début, je n'avais que du texte brut dans la zone de texte comme dans le premier fragment de code. Cependant, après avoir sauvegardé le contenu du texte ressemblerait à ceci:

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

La présence des causes étiquette p TinyMCE pour déclencher la transformation entre un textarea englobante à une zone de texte qui est juste une seule étiquette (comme illustré ci-dessus) .

Mise à jour 1: ajouté le 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'ai résolu le problème, à moins qu'il y ait des cas de bord qui ruine la solution. J'utilise le code PHP suivant le contenu de la page avant de l'enregistrer à la base de données:

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

Ce qu'il fait est-il supprime les sauts de ligne, puis préfixer un caractère invisible zéro largeur avant toute balise de début. Ce texte est ensuite inséré entre les balises textarea avant que TinyMCE 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 le html final ou dans la vue html de TinyMCE, donc les seuls problèmes que je peux voir avec cette solution est le coup de performance. Un détail est qu'il semble que seules les balises de début doivent être préfixées de cette manière, mais je ne l'ai pas pris en considération ici, pour plus de simplicité.

Answer 2

Ce second exemple < textarea ... /> est la notation de balise vide. Si vous voulez que le texte soit à l'intérieur de la tage, vous devez le faire comme la première façon < teatarea ....> foo </textarea>

Qu'est-ce que la sortie des balises textarea? Pouvez-vous déboguer cela pour voir s'il fait la notation de balise vide?

Eric

Answer 3

Nous utilisons TinyMCE ici ces derniers temps aussi bien. Je suis particulièrement intrigué par le changement de l'attribut style de la zone de texte pour masquer l'élément. Très étrange.

Je suis curieux de savoir ce que votre fichier de configuration ressemble (de la documentation sur les fichiers de configuration à: django)

---

MISE À JOUR

wow ... vous utilisez un beaucoup de plugins tinyMCE. J'essaierai d'approfondir mes recherches lorsque j'aurai du temps et de voir si je n'arrive pas à comprendre certains suspects potentiels.

Answer 4

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

Si vous ne disposez que d'une boîte de 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 documentation setContent.

J'avoir votre code PHP echo le HTML dans une fonction JavaScript et l'ont appelé 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 la page onload événement, tinymce a une option init appelée oninit qui fonctionne de manière similaire.

Alternativement, setupcontent_callback vous donne un accès direct à l'iframe.

Answer 5

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

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

Malheureusement, des éléments HTML ne sont pas techniquement autorisés à l'intérieur <textarea> balises, donc quelque chose peuvent envisager les balises <p> 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 crochets:

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

En utilisant PHP, cela peut être fait en envoyant votre valeur par htmlspecialchars() avant écho à la page.

Answer 6

tinyMCE.activeEditor.setContent ('certains') travaille pour me.Cheers

Answer 7

Pour modifier un champ tinymce spécifique, vous pouvez le faire:

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

Answer 8

Je suis venu au même problème en utilisant React, peut-être que c'est lié à ça. La valeur initiale transmise au composant est la valeur d'origine. Une fois reçu, le composant prend le relais et gère le contenu, qu'une nouvelle valeur lui soit transmise ou non. Donc si vous passez une chaîne, alors c'est une constante et elle existe au 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 voulez afficher (comme c'est probablement nul ou indéfini jusqu'à ce que vous receviez la valeur à afficher). Dans mon cas, je reçois un objet avec le contenu de la page, dont l'un est 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 des données.