Try our conversational search powered by Generative AI!
AI OnAI Off
TinyMCE removed custom attributes
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
Jul 09, 2012 15:42
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
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.
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