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

Question

对于标准textareas,我使用此插件来创建占位符.我怎样才能扩展tinymce以便以这种方式工作.

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

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

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

Answer 2

如果没有占位符属性,我收到错误.

我结合了这个答案的代码: jQuery hasAttr检查一个元素是否有一个属性来获取下面修改的代码来处理这个场景:

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