Adding blocks to TinyMCE using Inline Block edit

Mark Prins

Vote:

When editing a XHtmlString field on a block, using the Inline block edit, it seems not possible to drag and drop a block into the TinyMCE editor.

Is there some other way of adding blocks to a TinyMCE without having to navigate to the 'normal' block edit view?

Is there some plugin for TinyMCE that allows you to search and add blocks directly?

#216242

Jan 30, 2020 14:54

James Johnson

Vote:

Hi Mark,

Do you have a customized TinyMCE config? If so, you may want to check the plugins configured for the editor.

I've just tested the ability to add a block to the Xhtml field of another block, via drag-n-drop, and it worked fine.

Here is the code from mine, in case it helps -

NOTE: I use a customized spellchecker init module, so my toolbar config and mappings are in there, don't go deleting your own! :)

    using EPiServer.Cms.TinyMce.Core;
    using EPiServer.Framework;
    using EPiServer.Framework.Initialization;
    using EPiServer.ServiceLocation;

    [ModuleDependency(typeof(TinyMceInitialization))]
    public class TinyMceInitializationModule : IConfigurableModule
    {
        public void Initialize(InitializationEngine context)
        {
        }

        public void Uninitialize(InitializationEngine context)
        {
        }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            // DEV NOTE - Field mapping and menu/toolbar config
            // is done in CustomizedTinyMceSpellCheckerInitialization.cs
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .ContentCss("/Static/build/css/styles.css");

                config.Default()
                    .AddPlugin("lists")
                    .AddPlugin("advlist")
                    .AddPlugin("epi-link")
                    .AddPlugin("epi-dnd-processor")
                    .AddPlugin("epi-personalized-content")
                    .AddPlugin("epi-image-tools")
                    .AddPlugin("epi-image-editor")
                    .AddPlugin("epi-block-tools")
                    .AddPlugin("autolink")
                    .AddPlugin("directionality")
                    .AddPlugin("visualblocks")
                    .AddPlugin("visualchars")
                    .AddPlugin("contextmenu")
                    .AddPlugin("imagetools")
                    .AddPlugin("wordcount")
                    .AddPlugin("charmap")
                    .AddPlugin("insertdatetime")
                    .AddPlugin("paste").AppendToolbar("paste")
                    .AddPlugin("link").AppendToolbar("link")
                    .AddPlugin("anchor").AppendToolbar("anchor")
                    .AddPlugin("image").AppendToolbar("image")
                    .AddPlugin("table").AppendToolbar("table")
                    .AddPlugin("code").AppendToolbar("code");
            });
        }
    }

Hope this helps!

- JJ

#217199

Feb 19, 2020 10:00