CKEditor 4.5.8のformactionからdata-cke-pa-formactionへの変換

Question

私はhtmldataprocessorプラグインを見て、CKEditor v.4.5.8を使用しています。

私は（onclick、onmouseover、など）は、エディタのコンテキストで実行されるからスクリプトを防止するための便利な方法ですCKEditorバージョンの編集可能領域、で表示するdata-cke-pa-on*保護された属性に変換されるon*属性を見ています。

それは、また<button>要素のいずれかformaction属性を変換するために、高度なコンテンツフィルタリング（config.allowedContent = trueを残す）をオンにすることなく、、可能ですWYSIWYGエディタでdata-cke-pa-formaction非実行属性に、ソースエディタに追加しましたか？コンパイルされたckeditor.jsやhtmldataprocessor.jsを直接編集するのではなく、config.jsファイル内でこれを行うことができますか？

私はconfig.jsのに次を追加しようとしました：

CKEDITOR.on('instanceLoaded', function(e) { 
 
    e.editor.dataProcessor.dataFilter.addRules({ 
 
     elements: { 
 
      button: function(el) { 
 
       if(el.attributes && el.attributes['formaction']){ 
 
        el.attributes['data-cke-pa-formaction'] = el.attributes['formaction']; 
 
        delete el.attributes['formaction']; 
 
       } 
 
      } 
 
     } 
 
    }); 
 

 
    e.editor.dataProcessor.htmlFilter.addRules({ 
 
     elements: { 
 
      button: function(el) { 
 
      } 
 
     } 
 
    }); 
 
});

これは、ソースエディタとWYSIWYGエディタの間で前後に切り替えるとき完璧に動作しますが、初期の負荷に要素はまだ<button formaction="javascript:alert(document.domain)">Click me!</button>としてロードされています。私はCKEDITOR.on（beforeGetData、getDataなど）の他のイベントを使用しようとしましたが、デバッグに基づいて、これらの関数が設定スクリプト内で呼び出されることはありません。 addRulesの機能を別の場所に置く必要がありますか？

Answer 1

（ACFがを有効にする必要があります）コードの下に試してみてください：

var editor = CKEDITOR.replace('editor1', { 
    extraAllowedContent : 'button[name,type,formaction]' 
}); 
editor.on('pluginsLoaded', function(evt){ 
    evt.editor.filter.addTransformations([ 
     [ 
      { 
      element:'button', 
      left: function(el) { 
       return el.name == 'button'; 
      }, 
      right: function(el, tools) { 
       if(el.attributes && el.attributes['formaction']){ 
        el.attributes['data-cke-pa-formaction'] = el.attributes['formaction']; 

        delete el.attributes['formaction']; 
       } 
      } 
      } 
     ] 
    ]); 
}); 

ます例えば場合

<button data-cke-pa-formaction="/action_page2.php" name="Test Button" type="submit">Click me!</button> 

を私は開始時に説明したように、ACFは、このように有効にする必要がありますあなたはそれに慣れていない場合は、以下のリンクを参照してください：あなたが取得します

<button name="Test Button" type="submit" formaction="/action_page2.php" />Click me!</button> 

：HTMLペースト

• http://docs.ckeditor.com/#!/guide/dev_acf
• http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
• http://docs.ckeditor.com/#!/guide/dev_disallowed_content
• http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
• http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
• http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

---

EDIT：あなたはACFを使用できない場合、あなたは猫dataFilterとhtmlFilterを試してみてください。

var editor = CKEDITOR.replace('editor1', { 
     extraAllowedContent : 'button[*]{*}(*)', 
     on: { 
      pluginsLoaded: function(evt) { 

       evt.editor.dataProcessor.dataFilter.addRules({ 
        elements: { 
         button: function(el) { 
          if(el.attributes && el.attributes['formaction']){ 
           el.attributes['data-cked-pa-formaction'] = el.attributes['formaction']; 
           delete el.attributes['formaction']; 
          } 

         } 
        } 
       }); 

       //when you get data from editor 
       evt.editor.dataProcessor.htmlFilter.addRules({ 
        elements: { 
         button: function(el) { 
         } 
        } 
       }); 
      } 
     } 
}); 

注：恒久的な変更が必要な場合は、生のHTMLを取得するときに自動変更されるので、data-cke属性を使用することはできません。恒久的な変更を行うには、たとえばdata-cked-