Adding blocks to TinyMCE using Inline Block edit

Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

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");
            });
        }
    }