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

Question

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

例如，默认值是从 textarea 属性中读取的，然后在用户聚焦于 iframe 时清除。

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

Answer 1

我重构了 Tom Duke 的代码，使其能够在 TinyMCE4 上使用它的 jquery 插件

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