jQuery 如何将占位符文本添加到 TinyMCE？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27237876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add placeholder text to TinyMCE?
提问by Ryan Ahearn
For standard textareas, I use placeholder="". How can I extend tinymce so that it also works in this way.
对于标准文本区域，我使用placeholder="". 我怎样才能扩展 tinymce 以便它也能以这种方式工作。
Similar to this for CKEditor: http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html
与 CKEditor 类似：http: //alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html
回答by Ryan Ahearn
The placeholder pluginworked great for me. This plugin brings HTML5 placeholder attribute functionality for the TinyMCE editor.
该占位符插件对我来说真是棒极了。这个插件为 TinyMCE 编辑器带来了 HTML5 占位符属性功能。
回答by Bhanu Pratap
<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.
- 在这里，我们添加了一个标签并将其传递给 tinymce 的 DOM 对象“tinymce.DOM.bind(label.el, 'click', onFocus);”的绑定方法。
- 单击时隐藏占位符或编辑器中是否有任何文本。
- 将占位符的颜色设置为 #aaaaaa 我们可以根据需要进行更改。
- 将填充设置为 .25%，边距设置为 5px，占位符的字体大小设置为 17 px，这些设置可以根据需要进行更改。
- 我们也可以更改占位符消息并将其设置为有意义的 mannar。
Thanks... :)
谢谢... ：）
回答by andyk
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 3 及以下版本，该插件运行良好。该插件在 TinyMCE 4 中不可用，但可以在初始化时添加一个占位符，然后在焦点上将其删除。记住 TinyMCE 使用 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();
});
})
回答by liebezeit
There is a new feature for inline placeholders in TinyMCE 5.2. An example of what could be done now to give it a custom placeholder:
TinyMCE 5.2 中有一个内联占位符的新功能。现在可以做些什么来给它一个自定义占位符的例子：
<script type="text/javascript">
tinymce.init({
selector: "textarea#classic"
});
tinymce.init({
selector: "div#inline",
inline: true,
placeholder: "Type here..."
});
</script>
