Hi,
I want to toggle some plugin buttons in RTE(classic UI) on change of a selection dropdown, suppose if selection value says:
"1" i want to show the "misctools" plugins otherwise hide "misctools" plugin buttons in RTE
On plugin node we set "features" property to "*" to enable rteplugin or [] for disabling it, but with RTE object structure i am not able to get any function or object to be able to modify rteplugins.misctools.features. Any suggections how do to go ahead with this?
Ejst.RteToggle = CQ.Ext.extend(CQ.form.CompositeField, { /** * xtype: hidden * store real value file: this is json format */ valueField: null /** * xtype: selection * view on dialog: store whether to diplay RTe plugin or not */ ,layoutType: null /** * xtype: rte * view on dialog: rich text editor */ ,testrte: null ,lblLayoutType: null ,constructor: function(config) { config = config || {}; var defaults = { border: false ,layout: "form" ,autoWidth: false }; config = CQ.Util.applyDefaults(config, defaults); Ejst.RteToggle.superclass.constructor.call(this, config); } /** * create composite fields */ ,initComponent: function () { Ejst.RteToggle.superclass.initComponent.call(this); //create children items this.valueField = new CQ.Ext.form.Hidden({ name: this.name }); this.lblLayoutType = new CQ.Ext.form.Label({ text: "Select Layout *" }); this.layoutType = new CQ.form.Selection({ hideLabel:false ,allowBlank: false ,anchor: '101.5%' ,type: 'select' ,xtype: 'selection' ,fieldLabel: 'Layout Type' ,value: 1 ,maxLength: 130 ,options: [ { "text": "Show misctools plugin", "value": "1" }, { "text": "Hide misctools plugin", "value": "2" } ] ,listeners: { selectionchanged: { scope: this ,fn: function(obj, value, isChecked){ if(obj.getValue() == '1') { console.log(this.testrte); }else{ console.log(this.testrte); } this.updateValue(); } }, afterlayout: { scope: this ,fn: function(obj){ if(obj.getValue() == '1') { console.log(this.testrte); }else{ console.log(this.testrte); } this.updateValue(); } } } }); this.testrte = new CQ.form.RichText({ allowBlank: true ,fieldLabel: 'RTE' ,anchor: '101.5%' ,rtePlugins :{ edit:{features:"*"}, justify:{features:"*"}, misctools:{features:"*"} } ,listeners: { dialogclose: { scope: this ,fn: this.updateValue } ,change: { scope: this ,fn: this.updateValue } } }); this.add(this.lblLayoutType,this.layoutType, this.valueField, this.testrte); } ,processValue: function(value) { if ((value === undefined) || (value === null)) { value = ""; } // calling updateHidden() as change event not functioning for RTE widget this.updateValue(); return value; } ,getValue: function() { return this.getRawValue(); } ,getRawValue: function() { var link = { 'type': this.layoutType.getValue() ,'testrte': this.testrte.getValue() }; return JSON.stringify(link); } ,setValue: function(value) { this.valueField.setValue(value); var link = JSON.parse(value); this.layoutType.setValue(link.type); this.testrte.setValue(link.content); } ,updateValue: function() { this.valueField.setValue(this.getValue()); } }); CQ.Ext.reg('rteplugintoggle', Ejst.RteToggle);
