1

Adobe cq 5 でリッチ テキスト エディター用のプラグインを作成して、画像、PDF、ビデオ、PPT、または任意のファイルをリッチ テキスト エディターに追加する方法を教えてください。

利用可能な既存の rte プラグインは、findreplace、undo、spellcheck、table などです。

リッチ テキスト エディターにファイルを追加するプラグインを作成する方法は? プラグインは ext js ファイルです。誰かが答えを提案できるかどうかに感謝します。とても役に立ちます。

ありがとう

4

1 に答える 1

0

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;
    }

});
于 2014-03-03T06:38:33.053 に答える