CKeditorカスタムプラグインallowedContent not working

Question

itemprop属性を編集できるカスタムプラグインを作成しています。 リロード時にプロパティが取り除かれる以外は素晴らしいです。 私が間違っていることは何ですか？

私はこの例を含むドキュメントで見つけることができるすべてを読む：私はACFを無効にした場合、それが動作https://github.com/ckeditor/ckeditor-docs-samples/blob/master/tutorial-abbr-acf/abbr/plugin.js#L24

を。

export default CKEDITOR => { 
 
    CKEDITOR.plugins.add('itemprop', { 
 
     init(editor) { 
 
      editor.addCommand('itemprop', new CKEDITOR.dialogCommand('itempropDialog', { 
 
       allowedContent: '*[itemprop]' 
 
      })); 
 

 
      CKEDITOR.dialog.add('itempropDialog', editor => { 
 
       return { 
 
        title: 'Itemprop', 
 
        contents: [ 
 
         { 
 
          id: 'tab-main', 
 
          label: 'Itemprop', 
 
          elements: [ 
 
           { 
 
            type: 'text', 
 
            id: 'itemprop', 
 
            label: 'Itemprop', 
 
            setup(element) { 
 
             this.setValue(element.getAttribute('itemprop')); 
 
            }, 
 
            commit(element) { 
 
             element.setAttribute('itemprop', this.getValue()); 
 
            } 
 
           } 
 
          ] 
 
         } 
 
        ], 
 
        onShow() { 
 
         const selection = editor.getSelection(); 
 
         const element = selection.getStartElement(); 
 
         this.element = element; 
 
         this.setupContent(this.element); 
 
        }, 
 
        onOk() { 
 
         this.commitContent(this.element); 
 
        } 
 
       }; 
 
      }); 
 
     } 
 
    }); 
 
};

Answer 1

私はそれはCKEditorバージョンではこのバグに関連するかもしれない疑いがある：https://github.com/ckeditor/ckeditor-dev/issues/678。

私は簡単なテストを行い、ツールバーにボタンを追加すると、コードが機能し始めます。 itempropエントリの許可されたコンテンツも、エディタ設定で定義することなく、CKEditorの許可フィルタに表示されます。最も簡単な解決策は、あなたのプラグインにボタンを追加することになる理由です：次のように

editor.ui.addButton('itemprop', { 
    label: 'Item Prop', 
    command: 'itemprop' 
}); 

全体のプラグインの定義は次のようになります。

CKEDITOR.plugins.add('itemprop', { 
    init(editor) { 

    editor.ui.addButton('itemprop', { 
     label: 'Item Prop', 
     command: 'itemprop' 
    }); 

    editor.addCommand('itemprop', new CKEDITOR.dialogCommand('itempropDialog', { 
     allowedContent: '*[itemprop]' 
    })); 

    CKEDITOR.dialog.add('itempropDialog', editor => { 
     return { 
     title: 'Itemprop', 
     contents: [ 
      { 
      id: 'tab-main', 
      label: 'Itemprop', 
      elements: [ 
       { 
       type: 'text', 
       id: 'itemprop', 
       label: 'Itemprop', 
       setup(element) { 
        this.setValue(element.getAttribute('itemprop')); 
       }, 
       commit(element) { 
        element.setAttribute('itemprop', this.getValue()); 
       } 
       } 
      ] 
      } 
     ], 
     onShow() { 
      const selection = editor.getSelection(); 
      const element = selection.getStartElement(); 
      this.element = element; 
      this.setupContent(this.element); 
     }, 
     onOk() { 
      this.commitContent(this.element); 
     } 
     }; 
    }); 
    } 
}); 

ここでは例の作業：https://codepen.io/msamsel/pen/RjbOpP?editors=1010