可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

For standard textareas, I use placeholder="" . How can I extend tinymce so that it also works in this way.

回答1:

The placeholder plugin worked great for me. This plugin brings HTML5 placeholder attribute functionality for the TinyMCE editor.

回答2:

    <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>

here we are adding a lable and passing it to the Bind methos of tinymce's DOM object "tinymce.DOM.bind(label.el, 'click', onFocus);"
hiding placeholder on click or if there is any text into editor.
setting colour of placeholder to #aaaaaa we can change according to the requirement.
setting padding to .25% and margin to 5px and placeholder's font-size to 17 px these settings can be changed according to requirement.
we can change Placeholder message as well and set it to in a meaningful mannar.

Thanks... :)

回答3:

With TinyMCE 3 and below, the plugin works fine. The plugin isn't available in TinyMCE 4, but one could add a placeholder upon init, and then remove it on focus. Remember TinyMCE uses an 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();     }); })

文章来源: How do I add placeholder text to TinyMCE?

标签

placeholder

editor

label