Tinymce html5占位符，通过从textarea读取属性 [英] Tinymce html5 placeholder by reading attribute from textarea

问题描述

对于标准文本区域，我使用此插件创建一个占位符.我如何扩展tinymce，以便它也可以这种方式工作.

For standard textareas I use this plugin to create a placeholder. How can I extend tinymce so that this works in this way also.

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

E.g the default value is read from the textarea attribute then cleared when a user focuses on the iframe.

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

Similar to this for CKEditor: http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html

推荐答案

如果没有占位符属性，则会出现错误.

I was getting an error if there was no placeholder attribute.

我结合了这个答案中的代码: jQuery hasAttr检查是否元素上有一个属性，用于获取下面处理该情况的修改代码:

I combined the code from this answer: jQuery hasAttr checking to see if there is an attribute on an element to get the amended code below which deals with that scenario:

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

这篇关于Tinymce html5占位符，通过从textarea读取属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！