Tinymce html5 占位符，通过从 textarea 读取属性答案

【问题标题】：Tinymce html5 placeholder by reading attribute from textareaTinymce html5 占位符，通过从 textarea 读取属性
【发布时间】：2012-10-02 16:03:01
【问题描述】：

对于标准文本区域，我使用 plugin 创建占位符。我如何扩展 tinymce 以便它也能以这种方式工作。

例如，从 textarea 属性读取默认值，然后在用户关注 iframe 时清除。

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

【问题讨论】：

标签： jquery tinymce

【解决方案1】：

我重构了 Tom Duke 的代码以使用它的 jquery 插件在 TinyMCE4 上工作

$('textarea.tinymce').tinymce({
  script_url: _base + '/assets/js/tinymce/tinymce.min.js',
  theme: "modern",
  setup: function(editor) {
    // Set placeholder
    var placeholder = $('#' + editor.id).attr('placeholder');
    if (typeof placeholder !== 'undefined' && placeholder !== false) {
      var is_default = false;
      editor.on('init', function() {
        // get the current content
        var cont = editor.getContent();

        // If its empty and we have a placeholder set the value
        if (cont.length === 0) {
          editor.setContent(placeholder);
          // Get updated content
          cont = placeholder;
        }
        // convert to plain text and compare strings
        is_default = (cont == placeholder);

        // nothing to do
        if (!is_default) {
          return;
        }
      })
      .on('focus', function() {
        // replace the default content on focus if the same as original placeholder
        if (is_default) {
          editor.setContent('');
        }
      })
      .on('blur', function() {
        if (editor.getContent().length === 0) {
          editor.setContent(placeholder);
        }
      });
    }
  }
});

【讨论】：

我首先尝试了接受答案的代码，但这是对我有用的代码。因为接受的答案是针对 tinymce 3 而这是针对 tinymce 4。
它对我不起作用。当我输入任何内容时，点击其他地方，然后点击编辑器，内容就会消失。
这可行，但它并不是真正的 HTML5 占位符。它只是一个文本填充器。我发现我们必须完成所有这些工作才能放置在占位符中，这很疯狂。有谁知道这是否可以通过 API 作为真正的占位符简单地完成？
@DiegoCamacho 截至目前，API 不提供将占位符添加到编辑框的方法
tinymce4 的更新答案。这么多年过去了，它仍然不在核心中。

【解决方案2】：

如果没有占位符属性，我会收到错误消息。

我结合了这个答案的代码： jQuery hasAttr checking to see if there is an attribute on an element 获取下面处理该场景的修改代码：

setup: function(ed) {

// Set placeholder
var tinymce_placeholder = $('#'+ed.id);
var attr = tinymce_placeholder.attr('placeholder');

// For some browsers, `attr` is undefined; for others,
// `attr` is false.  Check for both.
    if (typeof attr !== 'undefined' && attr !== false) {
        var is_default = false;

        ed.onInit.add(function(ed) {
            // get the current content
            var cont = ed.getContent();

            // If its empty and we have a placeholder set the value
            if(cont.length == 0){
                ed.setContent(tinymce_placeholder.attr("placeholder"));

                // Get updated content
                cont = tinymce_placeholder.attr("placeholder");
            }

            // convert to plain text and compare strings
            is_default = (cont == tinymce_placeholder.attr("placeholder"));

            // nothing to do
            if (!is_default){
                return;
            }
        });

        ed.onMouseDown.add(function(ed,e) {
            // replace the default content on focus if the same as original placeholder
            if (is_default){
                ed.setContent('');
            }
        });
    }
}

【讨论】：

这可行，但它并不是真正的 HTML5 占位符。它只是一个文本填充器。我发现我们必须做所有这些工作才能放置在占位符中，这很疯狂。有谁知道这是否可以通过 API 作为真正的占位符简单地完成？

【解决方案3】：

上面的答案对我不起作用，但这是我（对我来说）基于上面答案并使用 onchange_callback 的工作代码。希望它可以帮助某人！

onchange_callback : function(ed){
            var tinymce_placeholder = $('#' + ed.id).attr("placeholder");     
            setTimeout(function () {
                var content = ed.getContent().replace(/<p>|<\/p>/g, '');
                if (content == '') {
                    ed.setContent(tinymce_placeholder);
                }
            }, 200);
        },
        setup: function (ed) {
            // Set placeholder
            var tinymce_placeholder = $('#' + ed.id);
            if (tinymce_placeholder.length) {
                ed.onInit.add(function (ed) {
                    var cont = ed.getContent();
                    if (cont.length == 0) {
                        ed.setContent(tinymce_placeholder.attr("placeholder"));
                    }
                });
                ed.onMouseDown.add(function (ed, e) {
                    var content = ed.getContent().replace(/<p>|<\/p>/g, '');
                    if (content == tinymce_placeholder.attr("placeholder")) {
                        ed.setContent('');
                    }
                });
            }
        }

【讨论】：

这可行，但它并不是真正的 HTML5 占位符。它只是一个文本填充器。我发现我们必须做所有这些工作才能放置在占位符中，这很疯狂。有谁知道这是否可以通过 API 作为真正的占位符简单地完成？

【解决方案4】：

试试这个代码：

为 tinyMCE 内联编辑器添加占位符文本：

    $scope.ContentOptions = {
    setup: function(editor) {

        editor.on('init', function () {
            // Default classes of tinyMCE are a bit weird
            // I add my own class on init
            // this also sets the empty class on the editor on init
            tinymce.DOM.addClass( editor.bodyElement, 'content-editor' );
        });

        // You CAN do it on 'change' event, but tinyMCE sets debouncing on that event
        // so for a tiny moment you would see the placeholder text and the text you you typed in the editor
        // the selectionchange event happens a lot more and with no debouncing, so in some situations
        // you might have to go back to the change event instead.
         editor.on('selectionchange', function () {
             if ( editor.getContent() === "" ) {
                 tinymce.DOM.addClass( editor.bodyElement, 'empty' );
             } else {
                 tinymce.DOM.removeClass( editor.bodyElement, 'empty' );
             }
         });
   }}

视图中的 HTML 部分

<div data-placeholder="Content..." id="post-content-editor" ui-tinymce="ContentOptions" ng-model="newPostContentModel"></div>

最后是创建占位符文本的 CSS（它从 data-placeholder="Content..." 获取，但您可以直接在 css 中完成

    .content-editorr:before {
        display: none;
}
.content-editor.empty:before {
        display: block;
        position: absolute;
        content: attr(data-placeholder);
}

我在github上找到的：

https://github.com/angular-ui/ui-tinymce/issues/197

我为 tinymce 尝试了许多占位符解决方案，发现这个解决方案非常有用，因为它满足占位符的所有要求。我认为这是最好的解决方案，

【讨论】：

【解决方案5】：

对于 tinymce 4，我遇到了未定义 ed.onInit 的事件的问题。 tinymce 4 使用 ed.on('event' , callback) 代替。这是我的实现。我还使用 focus 而不是 mousedown 作为清除编辑器时要监听的事件，因为 mousdown 由于某种原因无法正常工作。

setup :  function(ed) {

        // Set placeholder
        var tinymce_placeholder = $('#'+ed.id);
        var attr = tinymce_placeholder.attr('placeholder');

        // For some browsers, `attr` is undefined; for others,
        // `attr` is false.  Check for both.
        if (typeof attr !== 'undefined' && attr !== false) {
            var is_default = false;

            ed.on('init' , function(ed) {
                // get the current content
                var cont = ed.target.getContent();

                // If its empty and we have a placeholder set the value
                if(cont.length == 0){
                    ed.target.setContent(tinymce_placeholder.attr("placeholder"));

                    // Get updated content
                    cont = tinymce_placeholder.attr("placeholder");
                }

                // convert to plain text and compare strings
                is_default = (cont == tinymce_placeholder.attr("placeholder"));

                // nothing to do
                if (!is_default){
                    return;
                }
            });

            ed.on('focus', function(ed,e) {
                // replace the default content on focus if the same as original placeholder
                if (is_default){
                    ed.target.setContent('');
                }
            });
        }
    }

希望这对其他答案有问题的人有所帮助

【讨论】：

这可行，但它并不是真正的 HTML5 占位符。它只是一个文本填充器。我发现我们必须完成所有这些工作才能放置在占位符中，这很疯狂。有谁知道这是否可以通过 API 作为真正的占位符简单地完成？

【解决方案6】：

我发现了另一种不会弄乱文本区域内容的方法。我喜欢这样，这样我就不必有阻止用户提交只是占位符的内容的特殊条件。文章位于here，但我添加了 onclick 方法，以便标签可点击——否则，用户必须点击<label> 下方或侧面。这对 TinyMCE 4 非常有效。

风格

.tinyMCEPlaceholder {
    top: 45px;
    left: 9px;
    z-index: 1;
    color: #bbbbbb;
    position: absolute;
    cursor:text;
}

html

<div id="holder">
    <label for="tinymce" onclick="tinymce.execCommand('mceFocus',false,'area_id');">Type your article</label>
    <textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea>
</div>

<!-- or -->

<div id="holder">
    <label for="tinymce" onclick="tinymce.get('area_id').fire('focus',{},false);">Type your article</label>
    <textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea>
</div>

TinyMCE 设置

 // setup
    setup : function(ed) {
        /* toggle all labels that have the attr 'tinymce' */
        ed.on('init', function() {
            if(ed.getContent() != '') {
                $('label[for="tinymce"]').hide();
            }

            $(ed.getDoc()).contents().find('body').focus(function(){
                $('label[for="tinymce"]').hide();
            });

            $(ed.getDoc()).contents().find('body').blur(function(){
                if(ed.getContent() == '') {
                    $('label[for="tinymce"]').show();
                }
            });
        });
    },

【讨论】：

【解决方案7】：

这个 TinyMCE 插件似乎是一个解决方案：

https://github.com/mohan/tinymce-placeholder

希望对你有帮助！

【讨论】：

【解决方案8】：

Gaurav 的解决方案工作正常，但需要进行一些更改。我使用此修改使其接近完美：

editor.on("init", function(){
    tinymce.DOM.addClass( editor.bodyElement, 'content-editor' );
    if ( editor.getContent() === "" ) {
        tinymce.DOM.addClass( editor.bodyElement, 'empty' );
        var pseudoBeforeHeight = window.getComputedStyle(editor.bodyElement, ':before').height;
        tinymce.DOM.setStyles( editor.bodyElement, { 'height': pseudoBeforeHeight } );
    }
});

【讨论】：