Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Adding blocks to TinyMCE using Inline Block edit

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
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
Vote:
 

Hey Mark,

I recommend you read the Release Notes and upgrade to EPiServer.CMS.UI 11.34.0 or greater which includes this UI Feature;

Keeps the side panes available when quick-editing a block, to enable drag and drop of pages and assets into properties of the block.

Background

Cheers,

Darren

#254850
Edited, May 15, 2021 1:02
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.