jquery 如何将占位符文本添加到TinyMCE？

monwx1rj 于 2023-01-08 发布在 jQuery

关注(0)|答案(5)|浏览(176)

对于标准的文本区域，我使用placeholder=""，我如何扩展tinymce，使它也以这种方式工作。
与CKEditor类似：http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html

jquery

来源：https://stackoverflow.com/questions/27237876/how-do-i-add-placeholder-text-to-tinymce

5条答案

按热度按时间

sxpgvts31#

placeholder plugin非常适合我，这个插件为TinyMCE编辑器带来了HTML5占位符属性功能。

赞(0）回复(0）举报 2023-01-08

nwlls2ji2#

<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.这里我们添加了一个标签并将其传递给tinymce的DOM对象“tinymce.DOM.bind（label.el，'click'，onFocus）”的Bind方法;“
1.隐藏占位符点击或如果有任何文本到编辑器。
1.将占位符的颜色设置为#aaaaaa，我们可以根据需要进行更改。
1.将填充设置为.25%，边距设置为5 px，占位符的字体大小设置为17 px，这些设置可以根据需要进行更改。
1.我们也可以更改占位符消息，并以有意义的方式将其设置为。x1c 0d1x
谢谢......：）

赞(0）回复(0）举报 2023-01-08

zsbz8rwp3#

在TinyMCE 3和更低版本中，该插件工作正常。该插件在TinyMCE 4中不可用，但可以在init时添加占位符，然后在焦点处删除它。记住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();
    });
})

赞(0）回复(0）举报 2023-01-08

fquxozlt4#

TinyMCE 5.2中有一个新的内嵌占位符功能。下面是一个示例，说明如何为它提供一个自定义占位符：

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

来源：https://github.com/tinymce/tinymce/issues/4813

赞(0）回复(0）举报 2023-01-08

blmhpbnm5#

Tinymce 4.9.11，我不得不删除andyk的响应中的ID中的#，并将单词“Text”更改为我的文本区域的名称。

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();
    });
})

赞(0）回复(0）举报 2023-01-08

我来回答

jquery 如何将占位符文本添加到TinyMCE？

5条答案

相关问题

热门标签

最新问答