如何向TinyMCE添加占位符文本？

Question

如何向TinyMCE添加占位符文本？

17 jquery tinymce tinymce-4

对于标准textareas,我使用placeholder="".如何扩展tinymce以便它也能以这种方式工作.

与CKEditor类似:http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html

Answer 1

Rya*_*arn 17

该占位符插件对我来说真是棒极了.该插件为TinyMCE编辑器带来了HTML5占位符属性功能.

Answer 2

Bha*_*tap 6

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

Run Code Online (Sandbox Code Playgroud)

在这里我们添加一个标签并将其传递给tinymce的DOM对象"tinymce.DOM.bind(label.el,'click',onFocus)的Bind方法;"
单击隐藏占位符或编辑器中是否有任何文本.
将占位符的颜色设置为#aaaaaa我们可以根据要求进行更改.
将填充设置为.25%,边距设置为5px,占位符的字体大小设置为17像素,可以根据需要更改这些设置.
我们也可以更改占位符消息并将其设置为有意义的mannar.

谢谢... :)

归档时间：	11 年前
查看次数：	19632 次
最近记录：	7 年，9 月前