TinyMCE (v12) - Extend the init/setup Umbraco #help-with-umbraco

Join Discord

Channels

help-with-umbraco

news

codegarden-conference

TinyMCE (v12) - Extend the init/setup

# help-with-umbraco

ProNotion

04/28/2024, 8:30 AM

Is it possible to extend the TinyMce setup/initialisation? I need to make a change to enhance the behaviour of a couple of features, e.g. apply a specific class to elements when

Justify-Left

Justify-Right

are selected from the formatting toolbar.

Copy code

tinymce.init({
    setup: function(editor) {
        editor.on('ExecCommand', function(e) {
            var selectedNode = editor.selection.getNode(); // Get the currently selected node
            if (e.command === 'JustifyLeft' || e.command === 'JustifyRight') {
                // Remove any previously added alignment classes
                editor.dom.removeClass(selectedNode, 'custom-justify-left custom-justify-right');
                // Check command and add the appropriate class
                if (e.command === 'JustifyLeft') {
                    editor.dom.addClass(selectedNode, 'custom-justify-left');
                } else if (e.command === 'JustifyRight') {
                    editor.dom.addClass(selectedNode, 'custom-justify-right');
                }
            }
        });
    }
});

Is this achievable somehow?

Mike Chambers

04/28/2024, 10:29 PM

Copy code

json
"RichTextEditor": {
  "Plugins": [ "visualblocks" ],
  "Commands": [
    {
      "Alias": "visualblocks",
      "Name": "Visual Blocks",
      "Mode": "Insert"
    }
  ],
  "CustomConfig": {
    "statusbar": "true",
    "branding": "false",
    "resize": "true",
    "formats": "{\"underline\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li\",\"classes\": \"text-decoration-underline\"},\"alignleft\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-start\"},\"alignright\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-end\"},\"aligncenter\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-center\"},\"alignjustify\": {\"selector\": \"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video\",\"classes\": \"text-justify\"}}" //https://www.tiny.cloud/docs/tinymce/6/filter-content/#built-in-formats
  }
}

ProNotion

04/29/2024, 7:45 AM

Great, thank you @Mike Chambers that's really useful.

ProNotion

04/30/2024, 5:19 AM

For anyone else that might be interested there is [a great blog post here](https://umbraco.themediawizards.co.uk/the-grimoire/formatting-for-richtexteditor-config/) demonstrating a method of making the settings easier to manage without all the manual escaping required for the appsettings. - Thanks @huwred for the inspiration!

Mike Chambers

04/30/2024, 9:52 AM

I wonder if we could just use the configuration builder to include the extra json? Like it does for the environment overrides and user secrets?

Copy code

csharp
var builder = new ConfigurationBuilder()
    .SetBasePath(Directory.GetCurrentDirectory())
    .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
    .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);

builder.Build();

ProNotion

04/30/2024, 9:56 AM

Nice clean solution if we can but I guess part of the complication here with the RTE settings is the specific way the values need to be escaped. Certainly worth exploring though.

40 Views

Previous Next