Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

extending table inside rich text editor plugin

Avatar

Level 4

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 

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hmm,
I would overlay the file in "/apps" with the same name/structure so you wont have to worry about that later one since it's quite a lot of scripts and different functions involved. 

Glad it worked out
/Johan

View solution in original post

22 Replies

Avatar

Level 7

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
 

Avatar

Level 4

Hi,

 

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

 

Chris 

Avatar

Level 10

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?

Avatar

Level 4

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 

Avatar

Level 7

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

Avatar

Level 4

Hi,

 

I have attached files as requested. 

 

Chris 

Avatar

Level 4

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

Avatar

Level 7

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

Avatar

Level 7

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

Avatar

Level 4

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]%$)/ }); }

Avatar

Level 4

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

Avatar

Level 7

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

Avatar

Level 7

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

/Johan

Avatar

Level 4

Hi,

 

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

Thanks