Question

我正在尝试注意当前CKEditor内容的变化。我的目的是检查哪个元素的内容已更改。假设用户正在写几个段落，我希望能够知道用户改变了哪个段落。

我不是JavaScript和jQuery的专家。经过一番搜索后，我最终编写了以下代码：

var docWrapper = editor.document;   // [object Object] CKEditor object
var documentNode = docWrapper.$;    // [object HTMLDocument] DOM object

var paras = documentNode.getElementsByTagName('p');

for(var c = 0 ; c < paras.length ; c++)
{
    // Set up action to be done.
    var observer = new MutationObserver(function(mutations) 
    {
        console.log('Im getting called!');

        mutations.forEach(function(mutation) 
        {
            console.log('Type: ' + mutation.type);
        });    
    });

    // Set up configurations.
    var config = { 
            attributes : true , 
            childList : true , 
            characterData : true ,
            subtree: true,
            characterDataOldValue : true
    };

    // Register everything up.
    observer.observe(paras[c] , config);
}

这一行：

console.log('Im getting called!');

永远不会被召唤。有人可以帮帮我吗？如果需要任何其他详细信息，请发表评论，我将编辑我的问题。

这是我正在玩的JSFiddle：

https://jsfiddle.net/ej22k4vn/2/

谢谢。

修改

感谢karthick，只想分享解决方案。这是最终的JavaScript代码：

$(document).ready(function()
{
    var editor = CKEDITOR.replace('text-area-editor');

  // Stops CKEditor content filtering (not recommended).
  // https://stackoverflow.com/questions/15659390/ckeditor-automatically-strips-classes-from-div
    editor.config.allowedContent = true;

    /*
     * this line is required then only you can access the instance using 
     * editor.document
     */
    CKEDITOR.on('instanceReady', function(ev)
    {
        init();
    });

    function init()
    {
        var documentWrapper = editor.document;      // [object Object] CKEditor object
        var documentNode = documentWrapper.$;       // [object HTMLDocument] DOM object
        var paras = documentNode.getElementsByTagName('p');

        for (var c = 0; c < paras.length; c++)
        {
            // Set up action to be done.
            // mutationRecords = Object vector of type MutationRecord.
            // obs = Observer instance.
      // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
            var observer = new MutationObserver(function(mutationRecords , obs)
            {
                console.log('Im getting called!');

                mutationRecords.forEach(function(mutation)
                {
                    console.log('Type: ' + mutation.type);
                    console.log('ID: ' + mutation.target.getAttribute('id'));
                    console.log('Class: ' + mutation.target.className);
                });
            });

            // Set up configurations.
            var config =
            {
                attributes : true,
                childList : true,
                characterData : true,
                subtree : true,
                characterDataOldValue : true
            };

            // Register everything up.
            observer.observe(paras[c], config);
        }
    };
});

这是一个JSFiddle工作示例。请看一下，一切都在这里：

https://jsfiddle.net/ej22k4vn/4/

Answer 1

您需要等到实例处于活动状态。您可以通过聆听＆instanceReady＆＃39;来检查您的实例何时启动。事件

var editor = CKEDITOR.replace('text-area-editor');
/*
 * this line is required then only you can access the instance using 
 * editor.document
 */
CKEDITOR.on( 'instanceReady', function( ev ) { 
    init();
});
function init() {

var documentWrapper = editor.document; // [object Object] ... CKEditor object
var documentNode = documentWrapper.$; // [object HTMLDocument] .... DOM object
var paras = documentNode.getElementsByTagName('p');

  for(var c = 0 ; c < paras.length ; c++)
  {
      // Set up action to be done.
      var observer = new MutationObserver(function(mutations) 
      {
          console.log('Im getting called!');

          mutations.forEach(function(mutation) 
          {
              console.log('Type: ' + mutation.type);
          });    
      });

      // Set up configurations.
      var config = { 
              attributes : true , 
              childList : true , 
              characterData : true ,
              subtree: true,
              characterDataOldValue : true
      };

      // Register everything up.
      observer.observe(paras[c] , config);
  }
};

可以在CKEditor中使用Mutation Observer吗？怎么样？

修改

1 个答案: