Highlighted

Second styles plugin in RTE - Touch UI AEM 6.3

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

09-08-2018

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);

Replies

Highlighted

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

14-08-2018

Any thoughts?

Highlighted

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

22-08-2018