Hi Joe,
You can refer Episerver official documents for configuring the TinyMCE properties-
Thanks
Ravindra
Update:
I wasn't able to find a way to remove the table properties option in the menu bar. However, I was able to hide most of the options in the table properties using the table_ settings in the config initialization, then enabling them if the user is in a specific set of roles. Not a perfect solution, but one that looks like it will work.
TinyMCEInitialization.cs
using System.Collections.Generic;
using EPiServer.Cms.TinyMce.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
namespace Website.Business.Initialization
{
[ModuleDependency(typeof(TinyMceInitialization))]
public class ExtendedTinyMceInitialization : IConfigurableModule
{
public void Initialize(InitializationEngine context)
{
}
public void Uninitialize(InitializationEngine context)
{
}
public void ConfigureContainer(ServiceConfigurationContext context)
{
var customSettings = new Dictionary<string, object>
{
{
"extended_valid_elements",
"section[*],&[*],i[*],div[*],a[*],span[*],script[*],style[*],iframe[*],container[*], h3[*]"
},
{
"valid_children",
"+a[img|h1|h2|h3|h4|h5|h6|p|span|div|i|noscript], +span[a|h1|h2|h3|h4|h5|h6|p|span|i|div|noscript], +div[a|h1|h2|h3|h4|h5|h6|p|span|i|div|noscript]"
}
};
context.Services.Configure<TinyMceConfiguration>(config =>
{
config.Default()
.Menubar("file edit insert view format tools")
.DisableMenubar()
.AddEpiserverSupport()
.AddPlugin("epi-link epi-image-editor epi-dnd-processor epi-personalized-content epi-image-tools print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help anchor")
.Toolbar("styleselect formatselect | bold italic | cut copy paste pastetext removeformat | epi-personalized-content | fullscreen",
"bullist numlist outdent indent | alignleft aligncenter alignright | table | epi-image-editor epi-image-tools image media epi-link unlink anchor | epi-dnd-processor")
.RawSettings(customSettings)
.ContentCss("/Static/Assets/css/editor.css")
.AddSetting("invalid_styles", new { td = "width height", tr = "width height", th = "width height", table = "height" })
.AddSetting("table_default_attributes", new { border = 0 })
.AddSetting("table_default_styles", new { borderCollapse = "inherit", width = "100%" })
.AddSetting("image_title", true)
.AppendToolbar("table")
.AddSetting("table_appearance_options", false)
.AddSetting("table_advtab", false)
.AddSetting("table_row_advtab", false)
.AddSetting("table_cell_advtab", false)
.AddSetting("table_resize_bars", false);
});
}
}
}
EditorDescriptor.cs (role check)
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using EPiServer.Core;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;
namespace Website.Business.EditorDescriptors
{
[EditorDescriptorRegistration(TargetType = typeof(XhtmlString), EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)]
public class CustomXhtmlStringEditorDescriptor : EditorDescriptor
{
public override void ModifyMetadata(EPiServer.Shell.ObjectEditing.ExtendedMetadata metadata,
IEnumerable<Attribute> attributes)
{
var userInRole = PageUtilities.IsInValidRole;
if (userInRole)
{
var settings = metadata.EditorConfiguration["settings"] as Dictionary<string, object>;
if (settings != null)
{
var toolbarList = ((IEnumerable)settings["toolbar"]).Cast<string>().ToList();
if (toolbarList.Count > 1)
toolbarList[1] = toolbarList[1] + " | code";
settings["toolbar"] = toolbarList;
// Table properties
settings["table_appearance_options"] = true;
settings["table_advtab"] = true;
settings["table_row_advtab"] = true;
settings["table_cell_advtab"] = true;
settings["table_resize_bars"] = true;
}
}
}
}
}
Hi all,
Is there a way to restrict access to a specific option in the TinyMCE table plugin menubar.
In reading the TinyMCE documentation (https://www.tiny.cloud/docs/plugins/table/#table_toolbar, https://www.tiny.cloud/docs/configure/editor-appearance/#menu), it should be possible, but I can't figure out how to make it work with the Episerver configuration initialization.
Thanks,
Joe Mayberry