Goal
A sample extension for removing unused plugins in RTE (Rich Text Editor) of Touch UI. With the extension Inline Editor is stripped to have buttons for just full screen, close & save; Fullscreen Editor with only switch to inline...
Demo | Package Install
Inline Editor
Fullscreen Editor
Solution
1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-hide-default-rte-plugins
2) Create node /apps/touchui-hide-default-rte-plugins/clientlib of type cq:ClientLibraryFolder and add a String property categories with value rte.coralui2
3) Create file (nt:file) /apps/touchui-hide-default-rte-plugins/clientlib/js.txt and add
remove-plugins.js
4) Create file (nt:file) /apps/touchui-hide-default-rte-plugins/clientlib/remove-plugins.js and add the following code.
(function(){ var INLINE_TOOLBAR = [ "fullscreen#start", "control#close", "control#save"], FULLSCREEN_TOOLBAR = [ "fullscreen#finish"]; var EAMCuiToolbarBuilder = new Class({ toString: "EAEMCuiToolbarBuilder", extend: CUI.rte.ui.cui.CuiToolbarBuilder, _getUISettings: function(options) { var uiSettings = this.superClass._getUISettings(options); //inline toolbar - "#format", "#justify", "#lists", "links#modifylink", // "links#unlink", "fullscreen#start", "control#close", "control#save" uiSettings["inline"]["toolbar"] = INLINE_TOOLBAR.slice(0); //fullscreen toolbar - "format#bold", "format#italic", "format#underline", // "fullscreen#finish".... uiSettings["fullscreen"]["toolbar"] = FULLSCREEN_TOOLBAR.slice(0); return uiSettings; } }); var EAEMToolkitImpl = new Class({ toString: "EAEMToolkitImpl", extend: CUI.rte.ui.cui.ToolkitImpl, createToolbarBuilder: function() { return new EAMCuiToolbarBuilder(); } }); CUI.rte.ui.ToolkitRegistry.register("cui", EAEMToolkitImpl); }());
Is there also a way to add custom toolbar items?
ReplyDelete