如何創建一個插件在Adobe CQ 5的富文本編輯器中添加附件或文件？

Question

我需要幫助爲Adobe cq 5中的富文本編輯器創建插件，以將圖像，pdf，視頻，ppt或任何文件添加到富文本編輯器中。

現有的RTE插件可用的FINDREPLACE，撤消，拼寫檢查，表等

如何創建一個插件添加一個文件，以豐富的文本編輯器？ 插件是一個ext js文件。欣賞是否有人可以提出答案。這將有很大的幫助。

謝謝

Answer 1

我添加了一個自定義下拉到我的RTE。它用於向編輯器添加值，以從中選擇值。我認爲這可能會幫助你解決你的問題，因爲同樣你可以創建你需要的插件。 請參考方法旁邊的註釋以供參考。

/** 
* Placeholder Plugin 
*/ 
var keyvalueEnteries = []; 
var newText; 
var doc; 
var range 

CUI.rte.plugins.PlaceholderPlugin = new Class({ 

    toString: "PlaceholderPlugin", 

    extend: CUI.rte.plugins.Plugin, 

    /** 
    * @private 
    */ 
    cachedFormats: null, 

    /** 
    * @private 
    */ 
    formatUI: null, 

    getFeatures: function() { 
     return [ "Myparaformat" ]; 
    }, 

    /** 
    * @private 
    * 
    */ 
    getKeys: function() { 
     var com = CUI.rte.Common; 
     if (this.cachedFormats == null) { 
      this.cachedFormats = this.config.formats || { }; 
      com.removeJcrData(this.cachedFormats); 
      this.cachedFormats = com.toArray(this.cachedFormats, "tag", "description"); 
     } 
     return this.cachedFormats; 
    }, 


    initializeUI: function(tbGenerator) { 

     var plg = CUI.rte.plugins; 
     var ui = CUI.rte.ui; 
     if (this.isFeatureEnabled("placeHolder")) { 
      this.formatUI = tbGenerator.createParaFormatter("placeHolder", this,null,this.getKeys()); 

      tbGenerator.addElement("placeHolder", plg.Plugin.SORT_PARAFORMAT, this.formatUI, 
        10); 
     } 
    }, 

    notifyPluginConfig: function(pluginConfig) { //This function gets executed once on load of RTE for the first time 

     var url = pluginConfig.sourceURL; 

     keyvalueEnteries = CQ.HTTP.eval(url); 

     keyvalueEnteries = JSON.stringify(keyvalueEnteries); 

     if(keyvalueEnteries == undefined){ 
      keyvalueEnteries = '[{"key":"","value":"None"}]'; 
     } 

     pluginConfig = pluginConfig || { }; 
     //creating JSON sttructure 
     var placeholderJSON = '{"formats":' + keyvalueEnteries + '}'; 
     var placeHolderVals = eval('(' + placeholderJSON + ')'); 

     var defaults = placeHolderVals; 
     if (pluginConfig.formats) { 
      delete defaults.formats; 
     } 
     CUI.rte.Utils.applyDefaults(pluginConfig, defaults); 
     this.config = pluginConfig; 
    }, 

    execute: function(cmd) { // This function gets executed when there is change in the state of custom plugin/drop down 
     if (this.formatUI) { 
      var formatId = this.formatUI.getSelectedFormat(); 
      if (formatId && range != undefined) { 
       var placeholderElement = ""; 
       if(formatId == 'none' && range.collapsed == false){//checks if None is selected in placeholder and the text is selected 
        range.deleteContents(); 
       }else if(formatId != 'none'){ 
        placeholderElement = document.createTextNode(" ${" + formatId + "} "); 
        range.insertNode(placeholderElement); //INSERTS PLACEHOLDER AT CURRENT CARET LOCATION 
        range.setStartAfter(placeholderElement);//INSERTS CURSOR AT THE END OF CURRENT PLACEHOLDER IF PLACEHOLDER IS SELECTED AGAIN 
       } 
      } 
     } 
    }, 

    updateState: function(selDef) { // This function gets executed on click on the editor space in RTE 
     doc = selDef.editContext.doc; //GET THE DOCUMENT INSIDE THE IFRAME 

     range = doc.getSelection().getRangeAt(0); //GETS CURRENT CARET POSITION 
    } 

}); 


//register plugin 
CUI.rte.plugins.PluginRegistry.register("placeholder", 
     CUI.rte.plugins.PlaceholderPlugin); 


CUI.rte.ui.ext.ParaFormatterImpl = new Class({ 

    toString: "ParaFormatterImpl", 

    extend: CUI.rte.ui.TbParaFormatter, 


    // Interface implementation ------------------------------------------------------------ 

    addToToolbar: function(toolbar) { 
     var com = CUI.rte.Common; 

     this.toolbar = toolbar; 
     if (com.ua.isIE) { 
      // the regular way doesn't work for IE anymore with Ext 3.1.1, hence working 
      // around 
      var helperDom = document.createElement("span"); 
      helperDom.innerHTML = "<select class=\"x-placeholder-select\">" 
       + this.createFormatOptions() + "</select>"; 
      this.formatSelector = CQ.Ext.get(helperDom.childNodes[0]); 
     } else { 
      this.formatSelector = CQ.Ext.get(CQ.Ext.DomHelper.createDom({ 
       tag: "select", 
       cls: "x-placeholder-select", 
       html: this.createFormatOptions() 
      })); 
     } 
     this.initializeSelector(); 
     toolbar.add(
       CQ.I18n.getMessage("Placeholder"), // Type the name you want to appear in RTE for the custom plugin /drop down 
       " ", 
       this.formatSelector.dom); 
    }, 

    /** 
    * Creates HTML code for rendering the options of the format selector. 
    * @return {String} HTML code containing the options of the format selector 
    * @private 
    */ 
    createFormatOptions: function() { 
     var htmlCode = ""; 
     if (this.formats) { 
      var formatCnt = this.formats.length; 
      htmlCode += "<option value='none'>None</option>"; 
      for (var f = 0; f < formatCnt; f++) { 
       var text = this.formats[f].text; 
       htmlCode += "<option value=\"" + this.formats[f].value + "\">" + text 
       + "</option>"; 
      } 
     } 
     return htmlCode; 
    }, 

    createToolbarDef: function() { 
     return { 
      "xtype": "panel", 
      "itemId": this.id, 
      "html": "<select class=\"x-placeholder-select\">" 
       + this.createFormatOptions() + "</select>", 
       "listeners": { 
        "afterrender": function() { 
         var item = this.toolbar.items.get(this.id); 
         if (item && item.body) { 
          this.formatSelector = CQ.Ext.get(item.body.dom.childNodes[0]); 
          this.initializeSelector(); 
         } 
        }, 
        "scope": this 
       } 
     }; 
    }, 

    initializeSelector: function() { 
     this.formatSelector.on('change', function() { 
      var format = this.formatSelector.dom.value; 
      if (format.length > 0) { 
       this.plugin.execute(this.id); 
      } 
     }, this); 
     this.formatSelector.on('focus', function() { 
      this.plugin.editorKernel.isTemporaryBlur = true; 
     }, this); 
     // fix for a Firefox problem that adjusts the combobox' height to the height 
     // of the largest entry 
     this.formatSelector.setHeight(20); 
    }, 

    getSelectorDom: function() { 
     return this.formatSelector.dom; 
    }, 

    getSelectedFormat: function() { 
     var format; 
     if (this.formatSelector) { 
      format = this.formatSelector.dom.value; 
      if (format.length > 0) { 
       return format; 
      } 
     } else { 
      var item = this.toolbar.items.get(this.id); 
      if (item.getValue()) { 
       return item; 
      } 
     } 
     return null; 
    }, 

    selectFormat: function(formatToSelect, auxRoot, formatCnt, noFormatCnt) { 
     var indexToSelect = -1; 
     var selectorDom = this.formatSelector.dom; 
     if ((formatToSelect != null) && (formatCnt == 1) && (noFormatCnt == 0)) { 
      var options = selectorDom.options; 
      for (var optIndex = 0; optIndex < options.length; optIndex++) { 
       var optionToCheck = options[optIndex]; 
       if (optionToCheck.value == formatToSelect) { 
        indexToSelect = optIndex; 
        break; 
       } 
      } 
     } 
     selectorDom.disabled = (noFormatCnt > 0) && (auxRoot == null); 
     selectorDom.selectedIndex = indexToSelect; 
    } 

});