Integrate <ruby> tag in richtext component

[NagalaxmiTh]

Hi,

what is the procedure to integrate the <ruby> tag in the richtext component. Is there any custom implementation.

[Kamal_Kishor]

@NagalaxmiTh : Are you not able to use source edit? Go to fullscreen in rich-text editor mode and click on source edit, you should be able to create valid html tags here.

Output:

thanks.

[NagalaxmiTh]

@Kamal_Kishor  as I mentioned in the post we need a custom implementation. Our business doesnt want to use sourcedit plugin from the rictext.

Any recommendataions?

[arunpatidar · Accepted solution]

Hi @NagalaxmiTh 

You can create a custom plugin e.g.

https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html 

[AmitVishwakarma]

To integrate the <ruby> tag in the Rich Text Component in AEM, you would need to follow these steps:

1. Extend the Rich Text Component:

The default Rich Text Editor (RTE) in AEM does not natively support the <ruby> tag. You can extend the RTE by adding custom configurations.

2. Create a Custom RTE Plugin:

• Create a Custom Plugin: Develop a custom plugin for the AEM Rich Text Editor that enables the use of the <ruby> tag.
• You can refer to the official AEM documentation on how to create RTE plugins.

3. Configure the Allowed Tags:

• Edit the RTE configuration to allow the <ruby> tag.
• In AEM, navigate to /apps/<your-app>/config and modify the RTE configuration to include <ruby>.
• For example, update the richtext config file to allow the <ruby> tag.

4. Handle Output (if necessary):

• If you are using the Rich Text Component with HTL, ensure the output is processed safely, ensuring that the <ruby> tag and associated elements (like <rt>) are rendered correctly.

5. Test:

• Once the plugin is created and configuration changes are made, test the Rich Text Editor to ensure that the <ruby> tag is being recognized and rendered properly in the content.

Summary:

Integrating the <ruby> tag in AEM's Rich Text Component requires creating a custom RTE plugin and adjusting the RTE configuration to allow the tag. You may also need to handle output formatting to ensure proper rendering.

[NagalaxmiTh]

The link give above is not valid. I have gone through multiple blogs but didnt get the result. 

@arunpatidar  could you pls guide 

1. I have added the node under the rte for the ruby, but how to add the image for the button and onclick of it how to enable to the tag

2. How to add the clientlibs to that particular node to add the ruby styling. Though I have created the client lib and added in the component.html its not working

3. How to call the ruby.js to add the styling

[arunpatidar]

Hi @NagalaxmiTh 

You can add icon at

tbGenerator.registerIcon(groupFeature, "textColor");

the Icon list is here https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Icon.... 

There are many ways to load clientlibs in the page. You can include clienlibs as dependency or embed into the site clientlibs. To load clienlibs in the dialog use externalClinelibs.
you can load ruby.js(clieblibs) from the plugin as well, if you add as dependency

[NagalaxmiTh]

Hi @arunpatidar 

I have tried to add the custom icon and registered it, still I dont see the icon is coming up in the rte plugin. Pls check the below attached screenshot.

js code : 

(function ($, CUI) {
'use strict';
alert("test");
const PLUGIN_NAME = 'ruby';
const RUBY_TAG = 'ruby';
const RT_TAG = 'rt';
const RP_TAG = 'rp';
const RUBY_TITLE = 'Insert Ruby Annotation';

// Define the plugin for AEM RTE
CUI.rte.plugins.RubyPlugin = new Class({
extend: CUI.rte.plugins.Plugin,
toString: 'RubyPlugin',
rubyUI: null,

// Register features
getFeatures: function () {
return [RUBY_TAG];
},

// Initialize UI
initializeUI: function (tbGenerator) {
if (this.isFeatureEnabled(RUBY_TAG)) {
this.rubyUI = tbGenerator.createElement(RUBY_TAG, this, false, {
'title': Granite.I18n.get(RUBY_TITLE)
});

tbGenerator.addElement(PLUGIN_NAME, CUI.rte.plugins.Plugin.SORT_FORMAT, this.rubyUI, 10);

tbGenerator.registerIcon('${PLUGIN_NAME}#${RUBY_TAG}', 'draft');
}
},

// Update the UI state (enable/disable)
updateState: function (selectionDef) {
const disabled = !selectionDef.isSelection;
if (this.rubyUI) {
this.rubyUI.setDisabled(disabled);
}
},

// Execute plugin command
execute: function (pluginCommand) {
if (pluginCommand === RUBY_TAG) {
this.openRubyDialog();
} else {
this.editorKernel.relayCmd(pluginCommand);
}
},

// Open Ruby Dialog to input ruby text and annotation
openRubyDialog: function () {
// Assuming you have a dialog for ruby input; it could be a simple prompt or a full dialog
const rubyText = prompt('Enter the text for the ruby annotation:');
const rubyAnnotation = prompt('Enter the ruby annotation (e.g., pronunciation):');

if (rubyText && rubyAnnotation) {
this.insertRubyTag(rubyText, rubyAnnotation);
}
},

// Insert the <ruby>, <rt>, and <rp> tags into the selected text
insertRubyTag: function (rubyText, rubyAnnotation) {
const selectionDef = this.editorKernel.analyzeSelection();
if (!selectionDef.isSelection) {
return;
}

const selection = selectionDef.selection;
const startNode = selection.startNode;

if (!startNode || startNode.nodeType !== Node.TEXT_NODE) {
return;
}

// Create the ruby structure
const rubyElement = document.createElement(RUBY_TAG);
const rtElement = document.createElement(RT_TAG);
const rpElement = document.createElement(RP_TAG);

rtElement.textContent = rubyAnnotation; // Phonetic annotation
rpElement.textContent = rubyText; // The base text

rubyElement.appendChild(rpElement);
rubyElement.appendChild(rtElement);

// Replace the selected text with the ruby element
const range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(rubyElement);
}
});

// Register the plugin
CUI.rte.plugins.PluginRegistry.register(PLUGIN_NAME, CUI.rte.plugins.RubyPlugin);

})(window.jQuery, window.CUI);

[NagalaxmiTh]

I have attached the js code and the rte node structure with inline node toolbar options. I dont see the icon is coming up. 

[arunpatidar]

Hi @NagalaxmiTh 

Please check the console, there might be the error in the js file.

You can see those errors from browser console

[kautuk_sahni]

@NagalaxmiTh Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!