Custom RTE plugins in AEM

Avatar

Avatar
Validate 1
Level 2
BHAVYA_S
Level 2

Likes

7 likes

Total Posts

16 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
BHAVYA_S
Level 2

Likes

7 likes

Total Posts

16 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
BHAVYA_S
Level 2

10-08-2018

Hi,

I have been trying to add custom RTE plugins to the rich text editor dialog for Video and Audio. I am able to invoke the custom plugin dialog which is defined in JS files for the plugin, select the file and click OK. The audio or video section gets displayed in the dialog until i click OK on the RTE dialog. But after submit of the RTE dialog, the audio or video tags that are defined as innerHTML are not displayed on the page.

Would appreciate any help here.

Snapshot of the RTE dialog before submit:

RTEAudio.PNG

RTEVideo.PNG

CustomAudioPlugin.js

/*

* CustomAudioInsertPlugin - CUI RTE Plugin

* This is custom CUI RTE plug-in to support insertion of Audio within RTE with

* specific dimensions and alt text

*/

CQ.Ext.ns('CustomInsertAudioPlugin');

CustomInsertAudioPlugin.insertAudio = {

    ADD_AUDIO_CMD: 'insertAudio'};

CustomInsertAudioPlugin.insertAudio.Plugin = new Class({

    toString: 'insertAudioPlugin',

    extend: CUI.rte.plugins.Plugin,

    P: CustomInsertAudioPlugin.insertAudio,

    addAudioUI: null,

    getFeatures: function() {

        return [this.P.ADD_AUDIO_CMD];

    },

    initializeUI: function(tbGenerator) {

        const plg = CUI.rte.plugins;

        if (this.isFeatureEnabled(this.P.ADD_AUDIO_CMD)) {

            this.addAudioUI = tbGenerator.createElement(this.P.ADD_AUDIO_CMD, this, true, this.getTooltip('insertAudio'));

            tbGenerator.addElement('insertAudio', plg.Plugin.insert_audio, this.addAudioUI, 1000);

        }

    },

    execute: function(cmd, value, env) {

        if (cmd === this.P.ADD_AUDIO_CMD) {

            this.showDialog(env.editContext);

        }

    },

    showDialog: function() {

        const editorKernel = this.editorKernel,

            dm = editorKernel.getDialogManager();

        const dialogConfig = {

            'jcr:primaryType': 'cq:Dialog',

            title: 'Insert Audio',

            modal: true,

            width: 400,

            height: 300,

            items: [{

                xtype: 'panel',

                padding: '20px 0 0 10px',

                items: [{

                    xtype: 'panel',

                    layout: 'form',

                    border: false,

                    items: [{

                            name: 'audio_path',

                            xtype: 'pathfield',

                            fieldLabel: 'Audio Path',

                            rootPath: '/content/dam',

                            width: 250

                        },

                        {

                            xtype: 'textfield',

                            name: 'altName',

                            fieldLabel: 'Alternative Text',

                            fieldDescription: 'Provide a textual alternative of the content and function of the audio',

                            width: 250

                        }]

                }]

            }],

            ok: function() {

                const alt = this.findByType('textfield')[0];

                const mp3 = this.findByType('pathfield')[0];

                const value = {

                    alt_text: alt.getValue(),

                    mp3_path: mp3.getValue()                   

                };

                this.close();

                editorKernel.relayCmd(CustomInsertAudioPlugin.insertAudio.ADD_AUDIO_CMD, value);

            },

            listeners: {

                show: function() {

                    editorKernel.fireUIEvent('dialogshow');

                },

                hide: function() {

                    editorKernel.fireUIEvent('dialoghide');

                }

            }

        };

        dm.show(CQ.WCM.getDialog(dialogConfig));

    },

    notifyPluginConfig: function(pluginConfig) {

        pluginConfig = pluginConfig || {};

        CUI.rte.Utils.applyDefaults(pluginConfig, {

            'tooltips': {

                'insertAudio': {

                    'title': 'Insert Audio',

                    'text': 'inserts audio'

                }

            }

        });

        this.config = pluginConfig;

    },

    updateState: function() {

        this.addAudioUI.setSelected(false);

        }

});

CUI.rte.plugins.PluginRegistry.register('insertaudio', CustomInsertAudioPlugin.insertAudio.Plugin);

CustomInsertAudioPlugin.insertAudio.Cmd = new Class({

    toString: 'insertAudio',

    extend: CUI.rte.commands.Command,

    P: CustomInsertAudioPlugin.insertAudio,

    isCommand: function(cmdStr) {

        return (cmdStr === this.P.ADD_AUDIO_CMD);

    },

    getProcessingOptions: function() {

        const cmd = CUI.rte.commands.Command;

        return cmd.PO_SELECTION | cmd.PO_NODELIST;

    },

    addAudioToRTE: function(execDef) {

        const value = execDef.value;

        const selection = execDef.selection;

        const node = CUI.rte.DomProcessor.createNode(execDef.editContext, 'span');

        CUI.rte.Common.insertNode(node, selection.startNode, selection.startOffset);

        const mp3Path = value.mp3_path;

        node.innerHTML = "<audio controls='controls' data-src='" + mp3Path +

        "' _rte_src='" + mp3Path +

        "' src='" + mp3Path +

        "'>Your browser does not support the audio tag.</audio><p>'"+value.alt_text+"'</p>";

    },

    execute: function(execDef) {

        if (execDef.command === this.P.ADD_AUDIO_CMD) {

            this.addAudioToRTE(execDef);

        }

    }

});

CUI.rte.commands.CommandRegistry.register('insertaudio', CustomInsertAudioPlugin.insertAudio.Cmd);

Thanks in advance!!

Replies

Avatar

Avatar
Boost 5
Level 2
vihaanr53183766
Level 2

Likes

5 likes

Total Posts

8 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Boost 5
Level 2
vihaanr53183766
Level 2

Likes

5 likes

Total Posts

8 posts

Correct reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
vihaanr53183766
Level 2

25-01-2019

Hi .. can u please tell how to add custom video Rte plugin

Thanx.