web-dev-qa-db-fra.com

Comment ajouter du texte d'espace réservé à TinyMCE?

Pour les zones de texte standard, j'utilise placeholder="". Comment puis-je étendre tinymce pour qu'il fonctionne également de cette façon.

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

jquerytinymcetinymce-4
17
user1556571

Le plugin d'espace réservé a très bien fonctionné pour moi. Ce plugin apporte la fonctionnalité d'attribut d'espace réservé HTML5 pour l'éditeur TinyMCE.

19
Ryan Ahearn
    <html>
<head>
    <title>Bhanu Pratap, Tinymce with placeholder... </title>
    <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.PluginManager.add('placeholder', function (editor) {
            editor.on('init', function () {
                var label = new Label;
                onBlur();
                tinymce.DOM.bind(label.el, 'click', onFocus);
                editor.on('focus', onFocus);
                editor.on('blur', onBlur);
                editor.on('change', onBlur);
                editor.on('setContent', onBlur);
                function onFocus() { if (!editor.settings.readonly === true) { label.hide(); } editor.execCommand('mceFocus', false); }
                function onBlur() { if (editor.getContent() == '') { label.show(); } else { label.hide(); } }
            });
            var Label = function () {
                var placeholder_text = editor.getElement().getAttribute("placeholder") || editor.settings.placeholder;
                var placeholder_attrs = editor.settings.placeholder_attrs || { style: { position: 'absolute', top: '2px', left: 0, color: '#aaaaaa', padding: '.25%', margin: '5px', width: '80%', 'font-size': '17px !important;', overflow: 'hidden', 'white-space': 'pre-wrap' } };
                var contentAreaContainer = editor.getContentAreaContainer();
                tinymce.DOM.setStyle(contentAreaContainer, 'position', 'relative');
                this.el = tinymce.DOM.add(contentAreaContainer, "label", placeholder_attrs, placeholder_text);
            }
            Label.prototype.hide = function () { tinymce.DOM.setStyle(this.el, 'display', 'none'); }
            Label.prototype.show = function () { tinymce.DOM.setStyle(this.el, 'display', ''); }
        });

        tinymce.init({selector: ".EditorControl",plugins: ["placeholder"]});

    </script>
</head>
<body>
    <textarea class="EditorControl" placeholder="Bhanu Pratap welcomes you, please enter some text here...."></textarea>
</body>
</html>
  1. ici, nous ajoutons une étiquette et la transmettons aux méthos Bind de l'objet DOM de tinymce "tinymce.DOM.bind (label.el, 'click', onFocus);"
  2. masquage de l'espace réservé au clic ou s'il y a du texte dans l'éditeur.
  3. en définissant la couleur de l'espace réservé sur #aaaaaa, nous pouvons changer en fonction de l'exigence.
  4. définissant le remplissage à 0,25% et la marge à 5 px et la taille de police de l'espace réservé à 17 px, ces paramètres peuvent être modifiés en fonction des besoins.
  5. nous pouvons également modifier le message d'espace réservé et le définir dans un mannar significatif. enter image description here

Merci... :)

7
Bhanu Pratap

Avec TinyMCE 3 et inférieur, le plugin fonctionne très bien. Le plugin n'est pas disponible dans TinyMCE 4, mais on pourrait ajouter un espace réservé lors de l'initialisation, puis le supprimer sur le focus. N'oubliez pas que TinyMCE utilise un iframe.

tinymce.init({
  //here all the rest of the options
  //xxxxx
  //Add the placeholder
  setup: function (editor) {
    editor.on('init', function(){
      if (tinymce.get('Text').getContent() == ''){
        tinymce.get('Text').setContent("<p id='#imThePlaceholder'>Your Nice text here!</p>");
      }
    });
    //and remove it on focus
    editor.on('focus',function(){
      $('iframe').contents().find('#imThePlaceholder').remove();
    });
})
3
andyk

Il existe une nouvelle fonctionnalité pour les espaces réservés en ligne dans TinyMCE 5.2. Un exemple de ce qui pourrait être fait maintenant pour lui donner un espace réservé personnalisé:

<script type="text/javascript">
tinymce.init({
    selector: "textarea#classic"
});
tinymce.init({
    selector: "div#inline",
    inline: true,
    placeholder: "Type here..."
});
</script>

source: https://github.com/tinymce/tinymce/issues/481

0
liebezeit