lillbra.se

Så tillåter du HTML5-element i TinyMCE

Den populära WSIWYG-editorn TinyMCE är default-inställd på att rensa html-koden från ogiltiga html-taggar och -attribut (cleanup-metoden). Och i default-inställningarna på vilka html-element som är tillåtna finns inga av nyheterna i HTML5. Så när html-kod infogas eller modifieras i editorn kommer TinyMCE att ta bort nya HTML5-element och -attribut.

Men detta kan du ändra på. Det enklaste och bästa sättet att tillåta andra element är att definiera extended_valid_elements i TinyMCE-inställningarna. För att, till exempel, tillåta <time>-taggen med ett datetime- och data-attribut skriver du följande:

tinyMCE.init({
...
extended_valid_elements : "time[datetime|data-is-start]"
});

TinyMCE i EPiServer

Om du utvecklar för EPiServer måste du göra dessa TinyMCE-inställningar genom EPiServer. Det gör du genom att skapa en klass med TinyMCEPluginNonVisual-attributet:

using EPiServer.Editor.TinyMCE;
namespace Customer.Web.Plugins.TinyMCE
{
[TinyMCEPluginNonVisual(AlwaysEnabled = true, PlugInName = "ExtendedValidElements", EditorInitConfigurationOptions = "{ extended_valid_elements: 'time[datetime|data-is-start]' }")]
public class ExtendedValidElements
{}
}

Och i din episerver.config-fil lägger du till (via Frederik Vig):

...
<tinyMCE mergedConfigurationProperties="valid_elements, extended_valid_elements, invalid_elements, valid_child_elements" />
</episerver>

TinyMCE i WordPress

Om du använder WordPress så gör du dina TinyMCE-inställningar i en egen funktion som du lägger till som ett filter med namnet tiny_mce_before_init. Detaljer om hur du gör detta hittar du här: Adding html5 capability to WordPress.
Lycka till!

Intervjuad av Dileno

Vill du veta mer om mig och vad jag sysslar med just nu? Läs intervjun med mig på Dileno.
Bakom Dileno står Martin Söderlund som är en driven webbutvecklare på Hallvarsson & Hallvarsson. Vi träffades över en lunch och snackade om EPiServer, kundo.se, Openworks och annat smått och gott. Du hittar hela intervjun här.