Calling all developers! We invite you to provide your input on Feature Experimentation by completing this brief survey.
Calling all developers! We invite you to provide your input on Feature Experimentation by completing this brief survey.
Hi Eric,
Are you working in Optimizley CMS 9?
I have fired up a new Optimizley CMS 12 - Alloy site and can see the option for width and height is already available.
Could you share a screengrab at all so we can see what you are seeing?
If you are however trying to set the width and height of the WYSIWYG editor then you will need to implement a tinymceconfiguration. See the below:
public static class ServiceConfigurationContextExtensions
{
public static void AddTinyMceConfiguration(this IServiceCollection services)
{
services.Configure<TinyMceConfiguration>(config =>
{
config.Default()
.AddPlugin("media wordcount anchor code searchreplace")
.Toolbar("blocks fontfamily fontsize | epi-personalized-content epi-link anchor numlist bullist indent outdent bold italic underline code",
"alignleft aligncenter alignright alignjustify | image epi-image-editor media | epi-dnd-processor | forecolor backcolor | removeformat | searchreplace fullscreen")
.AddSetting("image_caption", true)
.AddSetting("image_advtab", true)
.AddSetting("resize", "both")
.AddSetting("height", 800)
.AddSetting("width", 1000);
config.Default()
.AddEpiserverSupport()
//.AddExternalPlugin("icons", "/ClientResources/Scripts/fontawesomeicons.js")
.AddSetting("extended_valid_elements", "i[class], span");
//.ContentCss(new[] { "/ClientResources/Styles/fontawesome.min.css",
// "https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i",
// "/ClientResources/Styles/TinyMCE.css" });
});
}
}
Then add to the StartUp.cs
services.AddTinyMceConfiguration();
Thanks
Paul
PS. If this is helpful can you place upvote so that others can find this information.
I am using 11.20.7.0.
I am unable to include screenshots. On this screen in my CMS - Admin - Content Type - Page Type - MyPage - Edit Property - Cutom Settings tab, I only have the XHTML string(>255). I am hoping to add the "TimeMCE Editor" section.
Hi Eric,
I haven't got a CMS 11 handy however. I created this initializationmodule that should allow you to configure the tinymce editor from code:
[ModuleDependency(typeof(TinyMceInitialization))]
public class ExtendedTinyMceInitialization : IConfigurableModule
{
public void Initialize(InitializationEngine context)
{
}
public void Uninitialize(InitializationEngine context)
{
}
public void ConfigureContainer(ServiceConfigurationContext context)
{
context.Services.Configure(config =>
{
// Add the default settings.
config.Default()
.AddEpiserverSupport()
.EnableImageTools()
.Menubar("file edit insert view format table tools help")
.AddPlugin("epi-link").AddPlugin("epi-image-editor").AddPlugin("epi-dnd-processor")
.AddPlugin("epi-personalized-content").AddPlugin("print").AddPlugin("preview").AddPlugin("searchreplace")
.AddPlugin("autolink").AddPlugin("directionality").AddPlugin("visualblocks").AddPlugin("visualchars")
.AddPlugin("fullscreen").AddPlugin("image").AddPlugin("link").AddPlugin("media").AddPlugin("template").AddPlugin("codesample").AddPlugin("table").AddPlugin("charmap")
.AddPlugin("hr").AddPlugin("pagebreak").AddPlugin("nonbreaking").AddPlugin("anchor").AddPlugin("toc").AddPlugin("insertdatetime").AddPlugin("advlist").AddPlugin("lists")
.AddPlugin("textcolor").AddPlugin("wordcount").AddPlugin("imagetools").AddPlugin("contextmenu").AddPlugin("colorpicker").AddPlugin("textpattern").AddPlugin("help")
.AddPlugin("code") // There are several plugins available, including paid ones
.Toolbar("formatselect | bold italic strikethrough forecolor backcolor " +
"| epi-link | alignleft aligncenter alignright alignjustify " +
"| numlist bullist outdent indent | removeformat | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen",
"table | toc | codesample code") // Pipes represent separators in the editor UI
.BlockFormats("Paragraph=p;Header 2=h2;Header 3=h3; Header 4=h4;Header 5=h5")
.Width(800)
.Height(400);
// Passing a second argument to For will clone the given settings object
// instead of the default one and extend it with some basic toolbar commands.
// An example with a highly configured property using three rows in its toolbar
config.For(p => p.Description, config.Empty()) // Choose the block, field and the base configuration
.AddPlugin("epi-link")
.Toolbar("formatselect | bold italic strikethrough forecolor backcolor " +
"| epi-link | alignleft aligncenter alignright alignjustify " +
"| numlist bullist outdent indent | removeformat | epi-personalized-content | cut copy paste");
});
}
}
If I get a chance later I will run a CMS 11 demo and see what is happening.
Thanks
Paul
Hi Eric,
I think the issue here is that you're running CMS 11.x which will be using v2.x of the separate TinyMCE NuGet package but the documentation you're referencing relates to the older inbuilt version of the TinyMCE editor which used to be included in older versions of the CMS. According to the TinyMCE editor documentation:
"From version 2.0, you can no longer customize the TinyMCE editor from the CMS admin view. All changes are done through code."
If managing the editor in the CMS admin UI is essential then you should be able to downgrade the EPiServer.CMS.TinyMce package to version 1.x which was basically the old editor but separated into its own NuGet package. Bear in mind though that you'll potentially be missing out on bug fixes and new features by downgrading.
I have tried floowing the example outline in this article https://world.optimizely.com/documentation/Items/Developers-Guide/Episerver-CMS/9/Editing/Customizing-the-TinyMCE-editor/#configureTinyMCE
Can anyone provide insight into how I can Add the TinyMCE Editor - Settings like Width and Height to the "Custom Settings" tab?