I am developing a custom table component in AEM and would like to customize the table editing behavior of the Rich Text Editor (RTE) in the component dialog.
Specifically, I want to extend or customize the table-related buttons in the RTE toolbar and open a custom Coral Dialog from JavaScript when a table action is triggered.
However, I am currently unable to control the dialog via JavaScript.
I cannot even display a Coral Dialog at this stage.
Below is my current configuration and implementation.
RTE configuration in the component dialog
/home/cms/ui.apps/src/main/content/jcr_root/apps/cms/components/common/table/_cq_dialog/.content.xml
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
name="./text"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<!-- format, lists, paraformat, table など一式 -->
<!-- （元の内容から変更不要） -->
<!-- 既存 -->
<format
jcr:primaryType="nt:unstructured"
features="bold,italic,underline"/>
<table
jcr:primaryType="nt:unstructured"
features="createoredit,modifytableandcell,removetable"/>
<links
jcr:primaryType="nt:unstructured"
features="modifylink,unlink"/>
<lists
jcr:primaryType="nt:unstructured"
features="ordered,unordered,indent,outdent"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="p,h1,h2,h3,h4,h5,h6,blockquote,pre"/>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat,table#createoredit]">
<popovers jcr:primaryType="nt:unstructured">
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
ref="justify"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
<table
jcr:primaryType="nt:unstructured"
items="[table#createoredit]"
ref="table"/>
</popovers>
</inline>
<dialogFullScreen
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
<popovers jcr:primaryType="nt:unstructured">
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
<table
jcr:primaryType="nt:unstructured"
items="[table#createoredit]"
ref="table"/>
</popovers>
</dialogFullScreen>
<tableEditOptions
jcr:primaryType="nt:unstructured"
toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
</tableEditOptions>
</cui>
</uiSettings>
</text>
Client library configuration
/home/cms/ui.apps/src/main/content/jcr_root/apps/cms/components/common/table/clientlibs/.content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
allowProxy="{Boolean}true"
categories="[cq.authoring.rte,common.table.rte]"
jsProcessor="[default:none]"/>
JavaScript (RTE plugin attempt)
/home/cms/ui.apps/src/main/content/jcr_root/apps/cms/components/common/table/clientlibs/js/rte-table-extension.js
(function (window, Granite) {
"use strict";
const CUI = window.CUI;
console.log(CUI);
function openCustomDialog() {
alert("Table Dialog OK");
}
const TableDialogPlugin = CUI.rte.plugins.Plugin.extend({
getFeatures() {
return ["openDialog"];
},
execute(id) {
if (id === "openDialog") {
openCustomDialog();
}
}
});
console.log("TableDialog RTE plugin registered");
})(window, Granite);
Problem
Although the client library is loaded and the console log appears, I cannot trigger any dialog interaction from JavaScript, and I am unable to display even a simple Coral Dialog.
My goal is to customize the RTE table editing UI and open a custom Coral Dialog from a table-related RTE action.
Could anyone point out:
What is missing in my RTE plugin setup?
Whether this approach is supported for RTE table customization
Or the correct way to hook a custom Coral Dialog into RTE table actions?
Any guidance would be greatly appreciated.
