TinyMCE removed custom attributes

jga@magnetix.dk

Vote:

Our clients are trying to add custom attributes to a div-tag in the TinyMCE editor - they switch to HTML mode, makes the changes and save the page. Then the custom attributes are removed. This is standard behaviour of TinyMCE, and it is possible to configure it to allow custom tag attributes.

My question is how do I configure TinyMCE in EPiServer to allow custom HTML attributes? I don't see where I would be able to hook into the inititialization of TinyMCE. And adding div to the list of "safe" tags in episerver.config doesn't see to work either (see uiSafeHtmlTags).

Example:

Becomes just

From the TinyMCE documentation, on how to add custom attributes to tags: http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements

#59975

Jul 09, 2012 7:46

Linus Ekström

Vote:

You should be able to create a non-visual plug-in and add a extended_valid_elements definition to the EditorInitConfigurations property:

[TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{extended_valid_elements:'span[contenteditable<false|data-hash|data-state|data-dynamicclass|disabled|data-classid|data-groups|data-contentgroup|id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup], div[contenteditable<false|data-hash|data-state|data-dynamicclass|disabled|data-classid|data-groups|data-contentgroup|id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup]'}")]
    public class YourPlugin
    {
    }

The example above states how dynamic content extends the valid attributes (and I hope that these two will not collide).

For EPiServer 7 we will upgrade Tiny MCE to a version that support data-attributes out of the box so this won't be needed.

Regards
Linus Ekström

#59983

Jul 09, 2012 15:42

jga@magnetix.dk

Vote:

Thanks, it seems to be working. :)

/Jakob Gade

#60022

Jul 11, 2012 9:21

Sylvia Lobo

Vote:

I have a RichTextBlock that accepts html string but it still strips off the custom attributes I am trying to insert namely -

RichTextBlock code:

using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace GAC.Group.Website.Models.Blocks
{
[ContentType(
DisplayName = "Rich Text Block",
GUID = "73d3ede5-2507-4fd1-a608-bca98fc964af",
Description = "",
GroupName = Global.GroupNames.GacBlocks)]
[GacSiteImageUrl]
public class RichTextBlock : BlockData
{
[Display(
Name = "Rich Text Content",
Description = "",
GroupName = SystemTabNames.Content,
Order = 1)]
public virtual XhtmlString TextContent { get; set; }

}
}

Can you please suggest how I can workaround this???

Regards,

Sylvia Lobo

#142336

Dec 09, 2015 13:44