Question

我需要在具有CSS contenteditable="false"和class="readonly"的所有CKEditor内容元素上添加contenteditable="true"到具有CSS class="writable"的元素。最好是粘贴和实例准备好。

我知道config.on.instanceReady和config.on.paste但是我应该写什么函数才能逃避我;）

顺便说一下。我没有使用内联编辑器。

editor.document在文档中列为只读属性，因此我无法使用它。

最终解决方案感谢Oleq向我展示了正确的道路。如果可写入在readonly内，则需要applyToAll。

 // Add custom rule to dataFilter (when data comes *into* editor).
 on{pluginsLoaded: function (evt){
 this.dataProcessor.dataFilter.addRules( {
     elements: {
         $: function ( element ) {
             if (element.hasClass('readonly'))
             {
                 element.attributes.contenteditable = 'false';
             }

             if (element.hasClass('writable'))
             {
                 element.attributes.contenteditable = 'true';
             }
         }
     }
  },{applyToAll: true});


  this.dataProcessor.htmlFilter.addRules( {
      elements: {
          $: function ( element ) {
              if(element.hasClass('readonly') || element.hasClass('writable'))
              {
                  delete element.attributes.contenteditable;
              }
          }
      }
  },{applyToAll: true});

  });

Answer 1

您应该使用CKEditor＆＃39; dataProcessor.dataFilter。这是编辑器用于过滤输入（JSFiddle）的标准机制。它处理带有editor.setData的数据集，用户粘贴的数据，当然还有textarea的初始HTML或CKEditor所附加的任何元素。

CKEDITOR.replace( 'my-editor', {
    // See http://stackoverflow.com/a/15659962/1485219
    extraAllowedContent: 'span(readonly)',

    // Just to make the interface clear.
    toolbarGroups: [
        {"name":"document","groups":["mode"]},
        {"name":"basicstyles","groups":["basicstyles"]}
    ],
    on: {
        // When all plugins were loaded but editor data is not yet processed.
        pluginsLoaded: function( evt ) {
            // Add custom rule to dataFilter (when data comes *into* editor).
            this.dataProcessor.dataFilter.addRules( {
                elements: {
                    // Check all elements. Rules can be specific, i.e. for img or h2.
                    $: function( element ) {
                        if ( element.hasClass( 'readonly' ) ) {
                            element.attributes.contenteditable = "false";
                        }
                    }
                }
            } );
        }
    }
} );

编辑：我创建了一个小部件（JSFiddle），因为我觉得这是你真正想做的事情：

// This plugin brings a widget into editor.
CKEDITOR.plugins.add( 'myFirstWidget', {
    // Widget plugin must be loaded (must be present in the build of CKEditor).
    requires: 'widget',

    init: function( editor ) {
        editor.widgets.add( 'myFirstWidget', {        
            button: 'My First Widget Button',

            // http://stackoverflow.com/a/15659962/1485219
            allowedContent: 'span(readonly)',                            
            requiredContent: 'span(readonly)',

            // Make all <span class="readonly"> a non-editable widget. 
            upcast: function( element ) {
                return element.name == 'span' && element.hasClass( 'readonly' );
            }
        } );        
    }
} );

CKEDITOR.replace( 'my-editor', {
    // Use the plugin.
    extraPlugins: 'myFirstWidget',

    // Just to make the interface clear.
    toolbar: [ [ 'Source', '-', 'MyFirstWidget' ] ]
} );

Learn more about widgets and awesomeness they bring

Answer 2

您可以在JavaScript中执行此操作：

var readOnlyEls = document.querySelectorAll('.readonly');
for (var i=0; i < readOnlyEls.length; i++) {
    readOnlyEls[i].setAttribute("contenteditable", false);
}

var writableEls = document.querySelectorAll('.writable');
for (var i=0; i < writableEls .length; i++) {
    writableEls[i].setAttribute("contenteditable", true);
}

或者如果您使用的是jQuery：

$(".readonly").attr("contenteditable", false);
$(".writable").attr("contenteditable", true);

在instanceReady和粘贴后更改CKEditor HTML内容

2 个答案: