Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
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.