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

Content Fragment Multieditor : enable Subscript/superscript plugin

Avatar

Level 4

Hi All,

I want to enable subscript/superscript plugin for content fragment multieditor (RTE). I followed this Q&A in forum:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/configuring-rte-plugin-for...

 

But when I am trying to use this with resourceType as overlayed multieditor, it's not working and the field referring this component is invisible.

 

Can anyone please suggest a way to enable these plugins (subscript/superscript)?

 

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Level 4
6 Replies

Avatar

Community Advisor

Hi @khalidMomin 

You may need to create the custom plugin

Please check the below thread for details where similar query is resolved. 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/to-enable-superscript-and-...

Avatar

Level 4

I think subscript/superscript plugins are already bundled with multieditor and we just need to enable them. Correct me if I am wrong?

Avatar

Level 4
Agree with you @Vaibhavi_J , I got the custom plugin in another post. Thanks.

Avatar

Level 4

(function ($, $document) {
var SUBSUPERSCRIPT_PLUGIN_ID = "subsuperscript",
SUBSCRIPT_FEATURE = "subscript",
SUBSCRIPT_ICON = SUBSUPERSCRIPT_PLUGIN_ID + "#" + SUBSCRIPT_FEATURE,

SUPERSCRIPT_FEATURE = "superscript",
SUPERSCRIPT_ICON = SUBSUPERSCRIPT_PLUGIN_ID + "#" + SUPERSCRIPT_FEATURE,
url = document.location.pathname;
if( url.indexOf("/editor.html") == 0 ){
extendStyledTextEditor();
registerPlugin();
}
function extendStyledTextEditor(){
var origFn = Dam.CFM.StyledTextEditor.prototype._start;
Dam.CFM.StyledTextEditor.prototype._start = function(){
addPlugin(this);
origFn.call(this);
}
}
function addPlugin(editor){
var config = editor.$editable.data("config");
config.rtePlugins[SUBSUPERSCRIPT_PLUGIN_ID] = {
features: "*"
};
config.uiSettings.cui.multieditorFullscreen.toolbar.push(SUBSCRIPT_ICON); // icon would appear in multieditor fullscreen only
config.uiSettings.cui.multieditorFullscreen.toolbar.push(SUPERSCRIPT_ICON); // icon would appear in multieditor fullscreen only
}
function registerPlugin(){
var CFM_SUBSUPERSCRIPT_PLUGIN = new Class({
toString: "CFMSubsuperscriptPlugin",
extend: CUI.rte.plugins.Plugin,
textSubscriptUI: null,
textSuperscriptUI: null,
getFeatures: function () {
return [ SUBSCRIPT_FEATURE, SUPERSCRIPT_FEATURE ];
},
//to mark the icon selected/unselected
updateState: function(selDef) {
if (this.textSubscriptUI != null) {
this.textSubscriptUI.setSelected(this.editorKernel.queryState(SUBSCRIPT_FEATURE, selDef));
}
if (this.textSuperscriptUI != null) {
this.textSuperscriptUI.setSelected(this.editorKernel.queryState(SUPERSCRIPT_FEATURE, selDef));
}
},

notifyPluginConfig: function (pluginConfig) {
pluginConfig = pluginConfig || {};
var defaults = {
tooltips: {}
};
defaults.tooltips[SUBSCRIPT_FEATURE] = {
title: "Subscript"
};
defaults.tooltips[SUPERSCRIPT_FEATURE] = {
title: "Superscript"
};
CUI.rte.Utils.applyDefaults(pluginConfig, defaults);
this.config = pluginConfig;
},
initializeUI: function (tbGenerator) {
var plg = CUI.rte.plugins;
if (!(this.isFeatureEnabled(SUBSCRIPT_FEATURE) || this.isFeatureEnabled(SUPERSCRIPT_FEATURE))) {
return;
}
this.textSubscriptUI = new tbGenerator.createElement(SUBSCRIPT_FEATURE, this, false,
this.config.tooltips[SUBSCRIPT_FEATURE]);
tbGenerator.addElement(SUBSCRIPT_FEATURE, plg.Plugin.SORT_FORMAT, this.textSubscriptUI, 799);
if (tbGenerator.registerIcon) {
tbGenerator.registerIcon(SUBSCRIPT_ICON, "coral-Icon coral-Icon--textSubscript");
}
this.textSuperscriptUI = new tbGenerator.createElement(SUPERSCRIPT_FEATURE, this, false,
this.config.tooltips[SUPERSCRIPT_FEATURE]);
tbGenerator.addElement(SUPERSCRIPT_FEATURE, plg.Plugin.SORT_FORMAT, this.textSuperscriptUI, 899);
if (tbGenerator.registerIcon) {
tbGenerator.registerIcon(SUPERSCRIPT_ICON, "coral-Icon coral-Icon--textSuperscript");
}
},
isValidSelection: function(){
var winSel = window.getSelection();
return winSel && winSel.rangeCount == 1 && winSel.getRangeAt(0).toString().length > 0;
},
execute: function (pluginCommand, value, envOptions) {
var context = envOptions.editContext;
if (pluginCommand != SUBSCRIPT_FEATURE && pluginCommand != SUPERSCRIPT_FEATURE) {
return;
}
if(!this.isValidSelection()){
return;
}
if (pluginCommand == SUBSCRIPT_FEATURE) {
this.editorKernel.relayCmd(SUBSCRIPT_FEATURE);
}else {
this.editorKernel.relayCmd(SUPERSCRIPT_FEATURE);
}
}
});
CUI.rte.plugins.PluginRegistry.register(SUBSUPERSCRIPT_PLUGIN_ID, CFM_SUBSUPERSCRIPT_PLUGIN);
}
}(jQuery, jQuery(document)));

 

This is the answer provided by Gaurav Behl in the post: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/configuring-rte-plugin-for...

Avatar

Correct answer by
Level 4

Avatar

Administrator
@khalidMomin, Thank you for providing the solution. I hope to see you more in the AEM Community. Both as learner and contributor.


Kautuk Sahni