将 RichText 添加到自定义多字段小部件在 cq5 中无法正常工作

Question

当 CQ.form.RichText 添加到 cq5 中的自定义多字段小部件时，当再次打开对话框以编辑或添加自定义小部件的新条目时，富文本组件的内容会消失。 单击确定会使 cq 组件的 .html 页面上的内容消失。

寻找意见，如果有人遇到过此类问题，请您指导我解决方法。

编辑：

这是来自 custom.js 的代码示例（仅发布 RichText 部分，自定义小部件中有 DateTime 和 TextField 以及富文本）

this.news= new CQ.form.RichText({
        cls: "customwidget-4",
        fieldLabel: "News",
        allowBlank: false,
        listeners: {
            change: {
                scope: this,
                fn: this.updateHidden
            },
            destroy: {
                scope: this,
                fn: this.descDestroy
            }
        }
    });
    this.add(this.news);

这里是 descDestroy sn-p：

descDestroy: function() {
    this.news.el.dom = {};
}

然后将自定义小部件注册为 xtype：

CQ.Ext.reg("CustomNews", CQ.form.CustomNews);

在 dialog.json 中使用上述“CustomNews”：

{
"title": "Custom News Widget",
"jcr:primaryType": "cq:Dialog",
"xtype": "dialog",
"items": {
    "jcr:primaryType": "cq:WidgetCollection",
    "tab1": {
        "jcr:primaryType": "cq:Widget",
        "title": "News Component",
        "xtype": "panel",
        "items": {
            "jcr:primaryType": "cq:WidgetCollection",
            "news": {
                "jcr:primaryType": "cq:Widget",
                "fieldDescription": "Press + to add more links",
                "fieldLabel": "News",
                "hideLabel": false,
                "name": "./news",
                "width": 1000,
                "xtype": "multifield",
                "fieldConfig": {
                    "jcr:primaryType": "cq:Widget",
                    "xtype": "CustomNews"
                }
            }
        }
    }
}

}

提前致谢。

Answer 1

只是想用我的答案更新问题，如果他们遇到类似问题，请将其作为其他人的参考：

实际上，当富文本是您的自定义 xtype 中的最后一个组件时会遇到此问题，我不知道为什么，但是当该组件中的文本发生更改时，分配给富文本的更改侦听器不会触发。 因此，当单击对话框上的“确定”按钮时，导致 CQ5 页面上的值未更新的问题。 为了克服这个问题，我只是在对话框中使用beforesubmit 侦听器来执行component.setValue(component.getValue()) 再次更新自定义xtype 中组件的值。 这是我的对话：

{
"title": "Custom News Widget",
"jcr:primaryType": "cq:Dialog",
"xtype": "dialog",
"items": {
    "jcr:primaryType": "cq:WidgetCollection",
    "tab1": {
        "jcr:primaryType": "cq:Widget",
        "title": "News Component",
        "xtype": "panel",
        "items": {
            "jcr:primaryType": "cq:WidgetCollection",
            "news": {
                "jcr:primaryType": "cq:Widget",
                "fieldDescription": "Press + to add more links",
                "fieldLabel": "News",
                "hideLabel": false,
                "name": "./news",
                "width": 1000,
                "xtype": "multifield",
                "fieldConfig": {
                    "jcr:primaryType": "cq:Widget",
                    "xtype": "CustomNews"
                }
            }
        }
    }
},
 "listeners": {
        "jcr:primaryType": "nt:unstructured",
        "beforesubmit": "function(){var comp= this.findByType(\"CustomNews\"); for(var i=0;i<comp.length;i++){ comp[i].setValue(comp[i].getValue());}}"
    }
}

Answer 2

要在 extjs 的自定义多字段中创建富文本，我已完成上述所有步骤，但我的 AEM 页面对话框中的富文本节点被禁用。

我已经附上了我的 extjs 代码，如果我犯了任何错误，请告诉我。

/** * @class Ejst.CustomPathFieldWidget * @extends CQ.form.CompositeField * 这是一个带有链接文本和目标的自定义路径字段 * @param {Object} 配置配置对象 */ /** * @class Ejst.CustomWidget * @extends CQ.form.CompositeField * 这是一个基于 {@link CQ.form.CompositeField} 的自定义小部件。 * @构造函数 * 创建一个新的 CustomWidget。 * @param {Object} config 配置对象

*/

CustomPathFieldWidget = CQ.Ext.extend(CQ.form.CompositeField, {

/**
* @private
* @type CQ.Ext.form.TextField
*/
hiddenField: null,

/**
* @private
* @type CQ.Ext.form.TextField
*/
linkText: null,

/**
* @private
* @type CQ.Ext.form.TextField
*/
linkURL: null,

/**
* @private
* @type CQ.Ext.form.CheckBox
*/
openInNewWindow: null,

/**
* @private
* @type CQ.Ext.form.FormPanel
*/
formPanel: null,

constructor: function (config) {
    config = config || {};
    var defaults = {
        "border": true,
        "labelWidth": 125,
        "layout": "form"
    };
    config = CQ.Util.applyDefaults(config, defaults);
    CustomPathFieldWidget.superclass.constructor.call(this, config);
},

//overriding CQ.Ext.Component#initComponent
initComponent: function () {
    CustomPathFieldWidget.superclass.initComponent.call(this);

    this.hiddenField = new CQ.Ext.form.Hidden({
        name: this.name
    });
    this.add(this.hiddenField);

    this.linkText = new CQ.form.RichText({
    cls: "customwidget-1",
    fieldLabel: "Link Text11: ",
    allowBlank: true,
    enableSourceEdit: true,
    hidden:true,
    externalStyleSheets:"[/etc/designs/web-2013/clientlibs_all.css]",
    emptyText: "Enter the text to show to the customer on answer selection",
    width: 500,
    rtePlugins :{
        spellcheck:{features:"*"},
        image:{features:"*"},
        edit:{features:"*"},
        justify:{features:"*"},
        misctools:{features:"*"},
        table:{features:"*"},
        undo:{features:"*"}
    },
    listeners : {
        change :{
            scope : this,
            fn : this.updateHidden
        },
        destroy: {
            scope:this,
            fn:this.destroyRichText
        }
    }
    });
    this.add(this.linkText);

    this.linkURL = new CQ.form.PathField({
        cls: "customwidget-2",
        fieldLabel: "Link Path: ",
        width: 400,
        listeners: {
            change: {
                scope: this,
                fn: this.updateHidden
            },
            dialogclose: {
                scope: this,
                fn: this.updateHidden
            }
        }
    });
    this.add(this.linkURL);
},

processInit: function (path, record) {
    this.linkText.processInit(path, record);
    this.linkURL.processInit(path, record);
},

setValue: function (value) {
    var link = JSON.parse(value);
    this.linkText.setValue(link.text);
    this.linkURL.setValue(link.url);
    this.hiddenField.setValue(value);
},

getValue: function () {
    return this.getRawValue();
},

getRawValue: function () {
    var link = {
        "text": this.linkText.getValue(),
        "url": this.linkURL.getValue(),
    };
    return JSON.stringify(link);
},

updateHidden: function () {
    this.hiddenField.setValue(this.getValue());
},

destroyRichText : function() {
     this.el.dom={};

}

}); CQ.Ext.reg('linkscustom',CustomPathFieldWidget);