November Happy Hour will be moved to Thursday December 5th.

Disable images in XhtmlStrings

Vote:
 

Is there a way to restrict editors so that they can't add images to XhtmlString property fields? 

#294423
Jan 10, 2023 15:05
Vote:
 

https://docs.developers.optimizely.com/content-cloud/v12.0.0-content-cloud/docs/default-settings

#294429
Jan 10, 2023 17:06
Vote:
 

@Mark, the link you shared only contains the information on how to configure the TinyMCE? Can you specify what specific setting is to disable it?

I looked into following but I am not sure how to add it withing our configuration

https://www.tiny.cloud/docs/tinymce/6/image/#basic-setup

#294483
Jan 11, 2023 12:25
Vote:
 

@Praful have you tried the .DisableImageTools() option 

    public static class TinyMceConfigurationExtensions
    {
        /// <summary>
        /// Configure Tiny MCE settings
        /// </summary>
        /// <param name="services"></param>
        public static void ConfigureTinyMce(this IServiceCollection services)
        {
            services.Configure<TinyMceConfiguration>(config =>
            {
                config
                    .Default()
                    .DisableImageTools()
                    
                    .AddEpiserverSupport()
                    .ContentCss("/css/edit.css")
                    .Toolbar(
                    // "styleselect | bold italic | image link | epi-link  epi-image-editor epi-personalized-content | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | cut copy paste | undo redo | table | fullscreen | help ")
                       "styleselect | bold italic | link | epi-link  epi-personalized-content | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | cut copy paste | undo redo | table | fullscreen | help ")
                    .AddPlugin("wordcount")
                    .StyleFormats(
                        new { title = "---Text---" },
                        new { title = "Default", block = "P" },
                        new { title = "small", block = "small" });
            });
        }
    }

The extention contains the following 

  public static class TinyMceSettingsExtensions
  {
    private const string ImageToolsKey = "imagetools_toolbar";
    private const string PasteDataImagesKey = "paste_data_images";
    private const string ImagesReuseFilenameKey = "images_reuse_filename";

    /// <summary>Enables the Episerver image tools.</summary>
    /// <param name="settings">The settings instance.</param>
    /// <returns>The same instance of <see cref="T:EPiServer.Cms.TinyMce.Core.TinyMceSettings" /> modified with the new setting.</returns>
    public static TinyMceSettings EnableImageTools(this TinyMceSettings settings) => settings.AddSetting("imagetools_toolbar", (object) "epi-gotomedia").AddSetting("paste_data_images", (object) true).AddSetting("images_reuse_filename", (object) true).AddPlugin("epi-image-tools", "imagetools", "epi-image-uploader", "paste");

    /// <summary>Disables the Episerver image tools.</summary>
    /// <param name="settings">The settings instance.</param>
    /// <returns>The same instance of <see cref="T:EPiServer.Cms.TinyMce.Core.TinyMceSettings" /> modified with the new setting.</returns>
    public static TinyMceSettings DisableImageTools(this TinyMceSettings settings)
    {
      settings.Remove("imagetools_toolbar");
      settings.Remove("paste_data_images");
      settings.Remove("images_reuse_filename");
      return settings.RemovePlugin("epi-image-tools").RemovePlugin("imagetools").RemovePlugin("epi-image-uploader").RemovePlugin("paste");
    }

    /// <summary>
    /// Adds default Episerver settings for plugins and styles
    /// </summary>
    /// <param name="settings">The settings instance.</param>
    /// <returns>The same instance of <see cref="T:EPiServer.Cms.TinyMce.Core.TinyMceSettings" /> modified with the new setting.</returns>
    public static TinyMceSettings AddEpiserverSupport(this TinyMceSettings settings) => settings.AddPlugin("epi-block-tools epi-link epi-create-block epi-dnd-processor epi-personalized-content epi-image-editor").AddSetting("epi_content_css", (object) Paths.ToClientResource(typeof (TinyMceSettings), "ClientResources/epi-addon-tinymce/styles/content.css")).EnableImageTools();
  }
#294492
Jan 11, 2023 14:09
Praful Jangid - Jan 11, 2023 14:59
So that was very straight forward.
Thanks Minesh.
Tomas Hensrud Gulla - Jan 12, 2023 8:58
What about drag-and-drop? Will you still be able do add images using drag-and-drop from assets pane to the xhtml string property?
Vote:
 

Solved it. I added a setting to the TinyMce configuration called invalid_elements: 

  config.Default()
                    .DisableImageTools()
                    .AddEpiserverSupport()
                    .AddSetting("invalid_elements", "img") // restricts d&d and pasting of images

  Now it neither can drop or paste images to a XhtmlString

#294621
Jan 13, 2023 10:53
Tomas Hensrud Gulla - Jan 13, 2023 10:55
Nice!
Laurent - Jan 13, 2023 11:13
Forgot to thank Mark, Praful and Minesh for suggestions
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* 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.