javascript - 如何在 Adob​​e CQ 5 的富文本编辑器中创建一个插件来添加附件或文件？

Question

我需要帮助在 Adob​​e cq 5 中创建富文本编辑器插件，以将图像、pdf、视频、ppt 或任何文件添加到富文本编辑器中。

现有的可用 rte 插件有 findreplace、undo、spellcheck、table 等

如何创建插件以将文件添加到富文本编辑器？插件是一个 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;
    }

});