Question

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

寻找输入，如果有人遇到过这样的问题，请指导我解决方法。

编辑：

这里是来自custom.js的代码示例（只是发布了RichText部分，在自定义小部件中有一个DateTime和TextField以及richtext）

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片段：

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

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

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

使用上述＆＃34; CustomNews＆＃34;在dialog.json中：

{
"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

只是想用我的回答更新问题，只是为了让他们在遇到类似问题时作为参考：

实际上当richtext是自定义xtype中的最后一个组件并且我不知道原因时遇到了这个问题，但是当该组件中的文本发生更改时，分配给richtext的更改侦听器未触发。因此，当单击对话框上的“确定”按钮时，会导致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的自定义多字段中创建richtext，我已完成上述所有步骤，但我的AEM页面中对话框中的richtext节点被禁用。

我附上了我的extjs代码，请让我知道我是否犯了错误。

/ ** * @class Ejst.CustomPathFieldWidget * @extends CQ.form.CompositeField *这是一个包含链接文本和目标的自定义路径字段 * @param {Object}配置配置对象 * / / ** * @class Ejst.CustomWidget * @extends CQ.form.CompositeField *这是基于{@link CQ.form.CompositeField}的自定义小部件。 * @constructor *创建一个新的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）;

在自定义多字段窗口小部件中添加富文本在cq5中无法正常工作

2 个答案: