Tinymce html5 placeholder en lisant l’atsortingbut de textarea

Pour les zones de texte standard, j’utilise ce plugin pour créer un espace réservé. Comment puis-je prolonger tinymce pour que cela fonctionne aussi de cette façon.

Par exemple, la valeur par défaut est lue à partir de l’atsortingbut textarea, puis effacée lorsqu’un utilisateur se concentre sur l’iframe.

Similaire à ceci pour CKEditor: http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html

Je recevais une erreur s’il n’y avait pas d’atsortingbut de marque de réservation.

J’ai combiné le code de cette réponse: jQuery hasAttr vérifiant s’il existe un atsortingbut sur un élément pour obtenir le code modifié ci-dessous qui traite de ce scénario:

setup: function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); var attr = tinymce_placeholder.attr('placeholder'); // For some browsers, `attr` is undefined; for others, // `attr` is false. Check for both. if (typeof attr !== 'undefined' && attr !== false) { var is_default = false; ed.onInit.add(function(ed) { // get the current content var cont = ed.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); } // convert to plain text and compare ssortingngs is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.onMouseDown.add(function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.setContent(''); } }); } } 

J’ai refacturé le code de Tom Duke pour qu’il fonctionne sur TinyMCE4 avec son plugin jquery

 $('textarea.tinymce').tinymce({ script_url: _base + '/assets/js/tinymce/tinymce.min.js', theme: "modern", setup: function(editor) { // Set placeholder var placeholder = $('#' + editor.id).attr('placeholder'); if (typeof placeholder !== 'undefined' && placeholder !== false) { var is_default = false; editor.on('init', function() { // get the current content var cont = editor.getContent(); // If its empty and we have a placeholder set the value if (cont.length === 0) { editor.setContent(placeholder); // Get updated content cont = placeholder; } // convert to plain text and compare ssortingngs is_default = (cont == placeholder); // nothing to do if (!is_default) { return; } }) .on('focus', function() { // replace the default content on focus if the same as original placeholder if (is_default) { editor.setContent(''); } }) .on('blur', function() { if (editor.getContent().length === 0) { editor.setContent(placeholder); } }); } } }); 

Les réponses ci-dessus ne fonctionnaient pas pour moi, mais voici mon code de travail (pour moi) basé sur les réponses ci-dessus et utilisant onchange_callback. J’espère que ça aide quelqu’un!

 onchange_callback : function(ed){ var tinymce_placeholder = $('#' + ed.id).attr("placeholder"); setTimeout(function () { var content = ed.getContent().replace(/

|<\/p>/g, ''); if (content == '') { ed.setContent(tinymce_placeholder); } }, 200); }, setup: function (ed) { // Set placeholder var tinymce_placeholder = $('#' + ed.id); if (tinymce_placeholder.length) { ed.onInit.add(function (ed) { var cont = ed.getContent(); if (cont.length == 0) { ed.setContent(tinymce_placeholder.attr("placeholder")); } }); ed.onMouseDown.add(function (ed, e) { var content = ed.getContent().replace(/

|<\/p>/g, ''); if (content == tinymce_placeholder.attr("placeholder")) { ed.setContent(''); } }); } }

Essayez ce code:

Ajoutez un texte fictif pour l’éditeur en ligne tinyMCE:

  $scope.ContentOptions = { setup: function(editor) { editor.on('init', function () { // Default classes of tinyMCE are a bit weird // I add my own class on init // this also sets the empty class on the editor on init tinymce.DOM.addClass( editor.bodyElement, 'content-editor' ); }); // You CAN do it on 'change' event, but tinyMCE sets debouncing on that event // so for a tiny moment you would see the placeholder text and the text you you typed in the editor // the selectionchange event happens a lot more and with no debouncing, so in some situations // you might have to go back to the change event instead. editor.on('selectionchange', function () { if ( editor.getContent() === "" ) { tinymce.DOM.addClass( editor.bodyElement, 'empty' ); } else { tinymce.DOM.removeClass( editor.bodyElement, 'empty' ); } }); }} 

La partie HTML dans la vue

 

et enfin le CSS pour créer le texte de substitution (il l’obtient à partir de data-placeholder = “Content …” mais vous pouvez le faire directement en css

  .content-editorr:before { display: none; } .content-editor.empty:before { display: block; position: absolute; content: attr(data-placeholder); } 

Je l’ai trouvé sur github:

https://github.com/angular-ui/ui-tinymce/issues/197

J’ai essayé de nombreuses solutions de substitution pour tinymce et je l’ai trouvée très utile, car elle répond à toutes les exigences de substitution. Je pense que c’est la meilleure solution,

Pour tinymce 4, j’ai eu des problèmes avec les événements où ed.onInit n’était pas défini. tinymce 4 utilise ed.on (‘event’, callback) à la place. Voici ma mise en œuvre. J’ai également utilisé focus au lieu de mousedown comme événement à écouter lorsque vous effacez l’éditeur car l’éditeur ne fonctionnait pas pour une raison quelconque.

 setup : function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); var attr = tinymce_placeholder.attr('placeholder'); // For some browsers, `attr` is undefined; for others, // `attr` is false. Check for both. if (typeof attr !== 'undefined' && attr !== false) { var is_default = false; ed.on('init' , function(ed) { // get the current content var cont = ed.target.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.target.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); } // convert to plain text and compare ssortingngs is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.on('focus', function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.target.setContent(''); } }); } } 

espérons que cela aide pour tous ceux qui ont eu des problèmes avec les autres réponses

J’ai trouvé une autre méthode qui ne gâche jamais le contenu de la zone de texte. J’aime cela afin d’éviter des conditions particulières empêchant un utilisateur de soumettre un contenu qui n’est qu’un espace réservé. L’écriture se trouve ici , mais j’ai ajouté la méthode onclick pour que l’étiquette soit cliquable. Sans cela, l’utilisateur doit cliquer sous l’ ou sur le côté de celle-ci. Cela fonctionne très bien avec TinyMCE 4.

style

 .tinyMCEPlaceholder { top: 45px; left: 9px; z-index: 1; color: #bbbbbb; position: absolute; cursor:text; } 

html

 

Configuration de TinyMCE

  // setup setup : function(ed) { /* toggle all labels that have the attr 'tinymce' */ ed.on('init', function() { if(ed.getContent() != '') { $('label[for="tinymce"]').hide(); } $(ed.getDoc()).contents().find('body').focus(function(){ $('label[for="tinymce"]').hide(); }); $(ed.getDoc()).contents().find('body').blur(function(){ if(ed.getContent() == '') { $('label[for="tinymce"]').show(); } }); }); }, 

Exemple de tinymce:

 tinyMCE.init({ mode : "textareas", theme : "advanced", setup : function(ed) { var is_default = false; ed.onInit.add(function(ed) { ed.focus(); // set the focus var cont = ed.getContent(); // get the current content slen = cont.length; cont = cont.subssortingng(3,slen-4); // cut off 

and

to comply with XHTML ssortingct // these can't be part of the default_value is_default = (cont == tiny_mce_default_value); // compare those ssortingngs if (!is_default) return; // nothing to do ed.selection.select(ed.dom.select('p')[0]); // select the first (and in this case only) paragraph }); ed.onMouseDown.add(function(ed,e) { if (!is_default) return; // nothing to do ed.selection.setContent(''); // replace the default content with nothing }); // The onload-event in IE fires before TinyMCE has created the Editors, // so it is no good solution here. } });

http://www.tinymce.com/wiki.php/TinyMCE_FAQ#Select_if_default_text.2C_then_delete_when_typing_starts.3F

Mis à jour pour mieux fonctionner avec jquery

 setup: function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); if(tinymce_placeholder.length){ var is_default = false; ed.onInit.add(function(ed) { // get the current content var cont = ed.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); //cont = ed.getContent(); - too slow } // convert to plain text and compare ssortingngs is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.onMouseDown.add(function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.setContent(''); } }); } 

Ce plugin pour TinyMCE semble être une solution:

https://github.com/mohan/tinymce-placeholder

J’espère que ça aide!