CKEditor的4張圖片和數據處理器API

Question

我建立我的CKEditor的實例，以便查看所見即所得時（實況）模式[image:abc123]被替換爲實際URL的形象。

因此，例如在HTML源視圖，可以看到這一點：

<img src="[image:abc123]" /> 

但是，當你查看WYSIWYG（實況）模式，它顯示了這一點：

<img src="/file/image/abc123" /> 

這裏是插件代碼我添加爲一個插件，伎倆：

現在，這一切工作正常，直到我編輯圖像使用圖像屬性對話框。當我點擊保存，它消除了我的插件代碼上面並顯示圖像爲404

我發現一些代碼，可檢測圖像對話框被保存，這樣我可以申請相同的代碼。以下是更新的插件代碼：

CKEDITOR.plugins.add('myplugin', 
{ 
    requires : ['richcombo'], 
    init : function(editor) 
    { 
     var config = editor.config, lang = editor.lang.format; 

     /* Images */ 
     editor.dataProcessor.dataFilter.addRules({ 
      elements: { 
       img: function(element) { 
        var file_id = element.attributes.src.match(/\[image:([a-zA-Z0-9-]+)\]/); 
        if (file_id) 
         element.attributes.src = site_url + 'file/image/' + file_id[1]; 
       } 
      } 
     }); 

     /* When image properties saved, make sure image retains its URL */ 
     CKEDITOR.on('dialogDefinition', function(ev) { 

      // Take the dialog name and its definition from the event data 
      var dialogName = ev.data.name; 
      var dialogDefinition = ev.data.definition; 

      if (dialogName == 'image') { 
       dialogDefinition.onOk = function(e) { 

        /* Images */ 
        editor.dataProcessor.dataFilter.addRules({ 
         elements: { 
          img: function(element) { 
           var file_id = element.attributes.src.match(/\[image:([a-zA-Z0-9-]+)\]/); 
           if (file_id) 
            element.attributes.src = site_url + 'file/image/' + file_id[1]; 
          } 
         } 
        }); 

       }; 
      } 
     }); 

    } 
}); 

它的工作原理，但沒有，我在圖像對話框中設置的屬性被添加到圖像。這幾乎就像我的代碼覆蓋插件代碼...任何想法，我需要添加使這項工作？

Answer 1

，這足以覆蓋對話框定義（jsFiddle）commit功能。用瀏覽器檢查員檢查所見即所得src是否正確：

function convertSrc(src) { 
    var match = src.match(/\[image:([a-zA-Z0-9-]+)\]/); 

    if (match) 
     return 'http://foo.bar/file/image/' + match[ 1 ]; 
    else 
     return src; 
} 

CKEDITOR.replace('editor', { 
    plugins: 'wysiwygarea,sourcearea,toolbar,basicstyles,image', 
    on: { 
     pluginsLoaded: function() { 
      this.dataProcessor.dataFilter.addRules({ 
       elements: { 
        img: function(el) { 
         el.attributes.src = convertSrc(el.attributes.src); 
        } 
       } 
      });    
     } 
    } 
}); 

CKEDITOR.on('dialogDefinition', function(evt) { 
    if (evt.data.name == 'image') { 
     var def = evt.data.definition, 
      defUrl = def.getContents('info').get('txtUrl'), 
      orgCommit = defUrl.commit; 

     defUrl.commit = function(type, element) { 
      orgCommit.call(this, type, element); 

      // Here's the magic:     
      element.setAttribute('src', convertSrc(this.getValue()));    
     } 
    } 
});