Kentico / xperience-component-samples

Xperience MVC Core sample components source code.
MIT License
9 stars 8 forks source link

Cannot customize toolbarButtons for RichText inline editor, without also removing Kentico custom buttons. #133

Closed liamgold closed 4 years ago

liamgold commented 4 years ago

Brief bug description

Using Kentico.InlineEditor.RichText:

Tried to override the toolbarButtons Froala options, e.g. removing the Insert Image button, but get a console error when still including the custom buttons Kentico have implemented.

Repro steps

  1. Go to and follow steps here https://github.com/Kentico/ems-mvc-components/wiki/Customizing-the-Rich-text-editor-toolbar#1-define-toolbar-configurations
  2. Implement toolbarButtons using the default configuration here https://github.com/Kentico/ems-mvc-components/blob/3f4ae0c5d130888683c2dcf040546e4bad7e8e39/Kentico.InlineEditor.RichText/Assets/InlineEditors/Kentico.RichText/froala-options.ts
  3. Make your customisations (e.g. removing "insertImage" from the default list copied from step 2), but ensure to leave macro-constants and link-constants in there, e.g. OPEN_INSERT_LINK_POPUP_COMMAND_NAME, and OPEN_INSERT_MACRO_POPUP_COMMAND_NAME
  4. See the plugin loads the default configuration instead of loading in your custom configuration as OPEN_INSERT_LINK_POPUP_COMMAND_NAME, and OPEN_INSERT_MACRO_POPUP_COMMAND_NAME are not defined.

Expected behavior

Be able to override all toolbarButtons and keep the custom Kentico plugin buttons. Example:

        toolbarButtons: {
            moreText: {
                buttons: ["bold", "italic", "underline", "strikeThrough", "subscript", "superscript", "fontFamily", "fontSize", "textColor",
                    "backgroundColor", "inlineClass", "inlineStyle", "clearFormatting"]
            },
            moreParagraph: {
                buttons: ["formatOL", "formatUL", "paragraphFormat", "alignLeft", "alignCenter", "formatOLSimple", "alignRight", "alignJustify",
                    "paragraphStyle", "lineHeight", "outdent", "indent", "quote"],
                buttonsVisible: 2,
            },
            moreRich: {
                buttons: [OPEN_INSERT_LINK_POPUP_COMMAND_NAME, OPEN_INSERT_MACRO_POPUP_COMMAND_NAME, "insertVideo", "insertTable", "emoticons", "specialCharacters", "insertHR"]
            },
            moreMisc: {
                buttons: ["undo", "redo", "fullscreen", "selectAll", "html", "help"],
                buttonsVisible: 2,
            }
        },

Test environment

marcel-rbro commented 4 years ago

Hi @liamgold,

Any plugins that were customized by us override the original respective Froala plugins. To include these, you should use their code name as listed in the Froala documentation. For example, use 'insertLink' instead of OPEN_INSERT_LINK_POPUP_COMMAND_NAME.

I have updated the Wiki article to better explain this issue.

liamgold commented 4 years ago

Thanks @mrebro that works fine!

I hadn't thought you were overriding the original plugins, I'd assumed they were added as new ones entirely.