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

SOLVED

Content Fragment Multieditor : enable Subscript/superscript plugin

khalidMomin
Level 4
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
khalidMomin
Correct answer by
Level 4
Level 4
2 Replies
Vaibhavi
Community Advisor
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-...

khalidMomin
Level 4
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?

khalidMomin
Level 4
Level 4
Agree with you @Vaibhavi , I got the custom plugin in another post. Thanks.
khalidMomin
Level 4
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...

khalidMomin
Correct answer by
Level 4
Level 4
kautuk_sahni
Community Manager
Community Manager
@khalidMomin, Thank you for providing the solution. I hope to see you more in the AEM Community. Both as learner and contributor.