TinyMCE removed custom attributes

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:

<div class="fb-like" data-href="http://oursite" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div>

Becomes just

<div class="fb-like"></div>

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

Thanks, it seems to be working. :)

/Jakob Gade

#60022
Jul 11, 2012 9:21
Vote:
 

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


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://www.purplefinder.com/webview/dist/ps-webview-map.min.css" />    <script type="text/javascript" src="https://www.purplefinder.com/webview/dist/ps-webview-map.min.js"></script>
    <style>      html, body {        height: 100%;        border: 0px;        padding: 0px;        margin: 0px;      }    </style>
    <div       class="ps-map-webview"       style="width: 100%; height: 100%"       ps-webview-name="tenaciouswebview"       ps-api-key="154790858404618016789842011044160505871"></div>

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
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* 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.