extending table inside rich text editor plugin

[chrisu168]

Hi,

I am currently using the rich text editor table plugin. I would like to extend it to include two more extra properties I was wondering whether this is possible and if there is any examples.

Chris 

[Ojjis]

Hi Chris.
Have you read this one: http://dev.day.com/docs/en/cq/current/developing/widgets.html ?
There you will find a lot of information of how to extend widgets.
Also there is a lot of info about how to configure the RTE here : http://dev.day.com/docs/en/cq/current/administering/configuring_rich_text_editor.html
and that will also show you how to edit things for the table plugin.

Good luck
/Johan
 

[chrisu168]

Hi,

I have read them. I have managed to extend tablepropertiesdialog but the 2 property fields I created do not get persisted.

Chris 

[Sham_HC]

I do not have the sample.  What are the properties you are trying to add? What exact change you have done so far?  In the firebox are you seeing the addition properties are passed on POST request?

[chrisu168]

Hi,

Just to give you some background we are using cq5.5.

I have copied tableplugin.js and tablepropertiesdialog.js and made a local copy inside the apps directory for my app

the names are customtableplugin and customtablepropertiesdialog.

I have changed the customtableplugin code to refer to the customtablepropertiesdialog file. Inside the customtablepropertiesdialog file I have added the 2 new properties table name and category name. When I click on the table inside the rich text editor I can see the dialog come up with my 2 new fields along with the existing fields like number of rows and number of columns. However when I submit the dialog I can see inside firebug that the post does not contain my 2 new fields.

Chris 

[Ojjis]

Is it possible that you could supply some sample code to facilitate the trouble shooting ? :)

[chrisu168]

Hi,

I have attached files as requested. 

Chris 

[Ojjis]

Hmm i can't see them :S

[chrisu168]

I will upload again

[chrisu168]

chrisu168 wrote...

I will upload again

[chrisu168]

I am uploading the files and it even says 2 files chosen but I do not understand where the files have gone

[Ojjis]

maybe try to zip or just upload one file, or paste snippets in here if it's not a lot of code

[Ojjis]

Ah, first of it looks like you have two items with the same id there (width and width). This might cause some problems.
Also make sure that the other file knows about these items later on. I have managed to sort my table out with some
custom properties just for test. Ended up with this:

//...code <table cellpadding="1" myvalue="66" cellspacing="0" border="1"> //.. more code

I added the following to the tablePropertiesDialog:

editItems.push({ "itemId": "myvalue", "name": "myvalue", "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("MyValue"), "regex": /^[0-9][0-9]?$/ });

Then i added the following to the TablePlugin (in the default values initiation in the notifyPluginConfig):

"myvalue": "66",

Then the last thing i did was to add the following lines in Table.js (in the transferConfigToTalbe method):

if (config.myvalue) { com.setAttribute(dom, "myvalue", config.myvalue); } else { com.removeAttribute(dom, "myvalue"); }

That worked just fine :)

Good Luck

[chrisu168]

first file

[chrisu168]

2nd file

[chrisu168]

doesnt looked like it worked in a nutshell. I copied the tableplugin.js and tablepropertiesdialog.js 

I added the following code for the propertiesdialog.js and in the new tableplugin.js I just refer to this propertiesdialog. Everything is the same between these files and the ones that come from the foundation lib

if (basicDefs) { if (!this.table) { editItems.push({ "itemId": "columns", "name": "columns", "allowBlank": false, "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("Columns"), "regex": /^[1-9][0-9]*$/ }); editItems.push({ "itemId": "rows", "name": "rows", "allowBlank": false, "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("Rows"), "regex": /^[1-9][0-9]*$/ }); editItems.push({ "itemId": "header", "name": "header", "xtype": "selection", "type": "select", "options": [ { "value": "none", "text": CQ.I18n.getMessage("No header") }, { "value": "top", "text": CQ.I18n.getMessage("First row") }, { "value": "left", "text": CQ.I18n.getMessage("First column") }, { "value": "topleft", "text": CQ.I18n.getMessage("First row and column") } ], "fieldLabel": CQ.I18n.getMessage("Header") }); } editItems.push({ "itemId": "heading", "name": "heading", "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("Heading"), "regex": /[a-zA-Z0-9]+\ ?/ }); editItems.push({ "itemId": "category", "name": "category", "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("Category"), "regex": /[a-zA-Z0-9]+\ ?/ }); editItems.push({ "itemId": "width", "name": "width", "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("Width"), "regex": /(^[1-9][0-9]*$)|(^1?[0-9][0-9]%$)/ }); editItems.push({ "itemId": "width", "name": "width", "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("Width"), "regex": /(^[1-9][0-9]*$)|(^1?[0-9][0-9]%$)/ }); editItems.push({ "itemId": "height", "name": "height", "xtype": "textfield", "width": 50, "fieldLabel": CQ.I18n.getMessage("Height"), "regex": /(^[1-9][0-9]*$)|(^1?[0-9][0-9]%$)/ }); }

[chrisu168]

Hi,

thanks for your reply much appreciated. I would like to ask where this transferConfigoTable method is, I cannot find it inside my TablePlugin.js

Chris

[chrisu168]

Hi,

thanks for everything...

[Ojjis]

Hi,
sorry it's not in that file. That method is found in the file called "Table.js"
 

[Ojjis]

Under 5.5 it should be located under
/libs/cq/ui/widgets/source/widgets/form/rte/commands 

/Johan

[chrisu168]

Hi,

sorry but where is this table.js I am using cq5.5

Thanks