configuring RTE plugin for content fragment editor

What types of RTE customization are you trying to do.

For RTE - you can use it to enter text into a Content Fragment without performing any modifications.

I am not clear what you are trying to do. 

For those reading this thread and want to know more about Content Fragments in AEM 6.2 - see: 

https://helpx.adobe.com/experience-manager/using/content-fragments.html

i need to enable misctools plugin on content fragment RTE. we've few options available now and i wanted to extend the options available.

approach followed to enable RTE options for text components is fine but i'm not able to find where default configuration for content fragments are stored.

http://experience-aem.blogspot.com/2016/07/aem-62-touch-ui-content-fragment-editor-rte-spell-check-plugin.html

Is there any way to customize RTE in content fragments? I need to add additional plugins like misc tools, superscript etc.

The richt-text editor of the AEM Content Fragment tool is very limited. What a lot of us are looking for, is how to add standard plugins, like e.g. "link", "image", "source" (to add e.g. SPAN) tag.

Reading other posts, it seems we need to write JavaScript plugins for each feature ("links", "image", "source").

Can anyone please share how to add the "links", "image" and "source" buttons?

Is it configurable like when we use the RTE widget in a dialog? Or do we have to write a JS plugin for each of these three buttons (if yes, are there any examples?)?

Thanks!

Even though this is an old thread, I am hoping Adobe is working towards identifying solution to these valid use cases.

I will give some example scenario's

One of the solutions we are proposing to the customer involves shifting all the page level disclaimers to content fragments in DAM. Authors are used to enter the content for the disclaimers on every page and sometimes the same disclaimer is being used on multiple pages, so more authoring effort. In order to solve the problem, we proposed using content fragments to create once and use many times.

However, the text of the disclaimer looks like this  - 

----------------------------------------

* Special rate offer available only for a new, high-blah blah blah Variable Flex Mortgage® of an owner-occupied property where the principal amount of the mortgage is $10,000 or more and the amortization is 29 years or less. Rate is not available for the mortgage loan component of a Home Power Plan®. Rates shown for the applicable term are Blahh’s special discounted rates and are not posted rates of blachh Application must be submitted by October 21, 2017 and mortgage must fund within 120 days of application date. All applicants must meet the Blah.. lending criteria. Rate is subject to change or may be withdrawn without notice at any time. Other conditions and restrictions apply."

---------------------------------------

Note the special symbols and characters in above text. Without custom rte plugin, these special characters cannot be added to the text above. Even though Content Fragments is a great solution but this small limitation is blocking us from moving forward.

One possible solution I could think of is using the Import Content Option in Full Screen mode of RTE but that's not a good way to enter content.

Please let us all know if there is way to reference the custom RTE plugin for CF elements.

Anyone found any solution? What I found was these editing options come from /libs/dam/cfm/admin/components/authoring/contenteditor/toolbar/toolbar.jsp and as it's a OOTB functionality we must overlay this jsp file. Any leads will work wonders for me. Thanks

smacdonald2008, any way to add a superscript in the content fragment rte?

Follow this example and extend it for subsuperscript feature

Experiencing Adobe Experience Manager - Day CQ: AEM 6420 - Content Fragment Editor add Font size, Color, Background colo…

Experiencing Adobe Experience Manager - Day CQ: AEM 62 - Touch UI Content Fragment Editor RTE Spell Check Plugin

Sample js for subscript/superscript plugin for CF that worked for me in 6.4.3 but may have couple bugs.

The key is to register a plugin and use relayCmd(..) if the feature exists OOB otherwise create a custom command. There could be better ways to achieve this type of customization..

Categories: dam.cfm.authoring.contenteditor.v2

Dependencies:  lodash

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