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
BedrockMission!

Learn more

View all

Sign in to view all badges

Second styles plugin in RTE - Touch UI AEM 6.3

CT1012
Level 4
Level 4

How can i create second styles plugin in RTE with the classes of font-sizes.. I'm seeing the following error

Uncaught TypeError: Cannot read property 'isAnyFeatureEnabled' of undefined

I've tried creating a new client-lib by copying styles plugin from /libs/clientlibs/granite/coralui2/optional/rte/js/components/rte/plugins/StylesPlugin.js

with the node structure

<sizes

       jcr:primaryType="nt:unstructured"

       features="*">

      <styles jcr:primaryType="cq:WidgetCollection">

          </styles>

</sizes>

With the below code Js

CUI.rte.plugins.StylesPlugin = new Class({

toString: "StylePlugin",

extend: CUI.rte.plugins.Plugin,

stylesUI: null,

getFeatures: function() {

return [ "styles" ];

},

reportStyles: function() {

return [ {

"type": "text",

"styles": this.getStyles()

}

];

},

getStyles: function() {

var com = CUI.rte.Common;

if (!this.cachedStyles) {

this.cachedStyles = this.config.styles;

if (this.cachedStyles) {

// take styles from config

com.removeJcrData(this.cachedStyles);

this.cachedStyles = com.toArray(this.cachedStyles, "cssName", "text");

} else {

this.cachedStyles = [ ];

}

}

return this.cachedStyles;

},

setStyles: function(styles) {

this.cachedStyles = styles;

},

hasStylesConfigured: function() {

return !!this.config.styles;

},

initializeUI: function(tbGenerator, options) {

var plg = CUI.rte.plugins;

if (this.isFeatureEnabled("styles")) {

this.stylesUI = new tbGenerator.createStyleSelector("styles", this, null,

this.getStyles());

tbGenerator.addElement("styles", plg.Plugin.SORT_STYLES, this.stylesUI, 10);

}

},

notifyPluginConfig: function(pluginConfig) {

pluginConfig = pluginConfig || { };

CUI.rte.Utils.applyDefaults(pluginConfig, { });

this.config = pluginConfig;

},

execute: function(cmdId, styleDef) {

if (!this.stylesUI) {

return;

}

var cmd = null;

var tagName = undefined;

var className = undefined;

switch (cmdId.toLowerCase()) {

case "applystyle":

cmd = "style";

tagName = "span";

className = (styleDef != null ? styleDef

: this.stylesUI.getSelectedStyle());

break;

}

if (cmd && tagName && className) {

this.editorKernel.relayCmd(cmd, {

"tag": tagName,

"attributes": {

"class": className

}

});

}

},

updateState: function(selDef) {

if (!this.stylesUI) {

return;

}

var com = CUI.rte.Common;

var styles = selDef.startStyles;

var actualStyles = [ ];

var s;

var styleableObject = selDef.selectedDom;

if (styleableObject) {

if (!CUI.rte.Common.isTag(selDef.selectedDom,

CUI.rte.plugins.StylesPlugin.STYLEABLE_OBJECTS)) {

styleableObject = null;

}

}

var stylesDef = this.getStyles();

var styleCnt = stylesDef.length;

if (styleableObject) {

for (s = 0; s < styleCnt; s++) {

var styleName = stylesDef[s].cssName;

if (com.hasCSS(styleableObject, styleName)) {

actualStyles.push({

"className": styleName

});

}

}

} else {

var checkCnt = styles.length;

for (var c = 0; c < checkCnt; c++) {

var styleToProcess = styles[c];

for (s = 0; s < styleCnt; s++) {

if (stylesDef[s].cssName == styleToProcess.className) {

actualStyles.push(styleToProcess);

break;

}

}

}

}

this.stylesUI.selectStyles(actualStyles, selDef);

}

});

/**

* Array with tag names that define objects (like images) that are styleable when selected

* @private

* @static

* @final

* @type String[]

*/

CUI.rte.plugins.StylesPlugin.STYLEABLE_OBJECTS = [

"img"

];

// register plugin

CUI.rte.plugins.PluginRegistry.register("sizes", CUI.rte.plugins.StylesPlugin);

2 Replies