jquery - テキストエリアから属性を読み取ることによる Tinymce html5 プレースホルダー

Question

標準のテキストエリアでは、このプラグインを使用してプレースホルダーを作成します。これがこのようにも機能するように、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('');
            }
        });
    }
}

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

Answer 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 の多くのプレースホルダー ソリューションを試しましたが、このソリューションはプレースホルダーのすべての要件を満たしているため、非常に便利であることがわかりました。最適解だと思いますが、

Answer 5

tinymce 4 では、ed.onInit が定義されていないイベントに問題がありました。tinymce 4 は代わりに ed.on('event' , callback) を使用します。これが私の実装です。また、マウスダウンが何らかの理由で機能しなかったため、エディターをクリアするときにリッスンするイベントとして、マウスダウンの代わりにフォーカスを使用しました。

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

これが他の回答に問題があった人に役立つことを願っています