Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS /

tinyMCE not saving HTML5 tags


Reply


8 Posts   472 Views

Avatar
ad5xj

Community Member, 17 Posts

31 July 2014 at 4:01am

Even though the docs seem to indicate HTML5 is supported, when saving content with HTML5 tags like <article><figure><figcaption>, etc... they are ignored and only HTML4 tags are used and saved.

Is this a bug or is there a way for tinyMCE to use HTML5 tags???

Avatar
Kirk

Community Member, 45 Posts

31 July 2014 at 8:50am

Yes certain HTML5 tags will be stripped out, however it is possible to add these tags to a whitelist.

See the Doctypes section at [url]http://doc.silverstripe.com/framework/en/topics/rich-text-editing[/url] which advises the following

By default, TinyMCE and SilverStripe will generate valid HTML5 markup, but it will strip out HTML5 tags like <article> or <figure>. If you plan to use those, add them to the valid_elements configuration setting.

Avatar
ad5xj

Community Member, 17 Posts

1 August 2014 at 5:10am

This is good information.

However, it is totally illogical. If SilverStripe supposedly generates HTML5 what sense does it make for tinyMCE in the same system / version to not allow the ability to edit the HTML5 code tags?

I would suggest that in future versions, ALL features of SilverStripe conform to the same HTML level.

Having said this, where do I change the valid_elements options...and will my changes remain from version to version when updating SilverStripe?

Avatar
Kirk

Community Member, 45 Posts

1 August 2014 at 2:38pm

Edited: 01/08/2014 2:39pm

You need to add the elements to mysite/_config.php see below for a example of the code you would add
.

HtmlEditorConfig::get('cms')->setOption('extended_valid_elements',
'article[class|name|id],figure[class|name|id],figcaption[class|name|id]'
);

This is documented under Setting options at [url]http://doc.silverstripe.com/framework/en/topics/rich-text-editing[/url]

Avatar
ad5xj

Community Member, 17 Posts

2 August 2014 at 2:30am

Kirk

Thanks for your reply. It at least gets me in the right place and a minimal start to configuring tinyMCE for HTML5.

The link you reference is minimal at best and really does not provide adequate information on the subject. The whole subject of configuration of tinyMCE (and quite a few other areas) seems shrouded by a lack of information about the API from CMS.

While Drupal 7 is overly complicated and difficult to learn, it is at least well documented. This is an area SilverStripe could do with major improvement.

Avatar
ad5xj

Community Member, 17 Posts

2 August 2014 at 3:55am

Edited: 02/08/2014 4:01am

After finishing the mods described by Kirk there is no change in the behavior of tinyMCE. It still strips HTML5 tags.

The _config.php file has specified the HTML5 specific tags in the 'extended_valid_elements'
The _config.php file now looks like this:

<?php

global $project;
$project = 'mysite';

global $databaseConfig;
$databaseConfig = array(
   "type" => 'MySQLDatabase',
   "server" => 'localhost',
   "username" => 'root',
   "password" => '',
   "database" => 'SS_mysite',
   "path" => '',
);

HtmlEditorConfig::get('cms')->setOption('extended_valid_elements',
'address[class|name|id],
article[class|name|id],
aside[class|name|id],
audio[class|name|id],
bdi[class|name|id],
caption[class|name|id],
canvas[class|name|id],
datalist[class|name|id],
details[class|name|id],
dialog[class|name|id],
embed[class|name|id],
figure[class|name|id],
figcaption[class|name|id],
footer[class|name|id],
header[class|name|id],
keygen[class|name|id],
mark[class|name|id],
menuitem[class|name|id],
meter[class|name|id],
nav[class|name|id],
output[class|name|id],
progress[class|name|id],
rp[class|name|id],
rt[class|name|id],
ruby[class|name|id],
section[class|name|id],
source[class|name|id],
summary[class|name|id],
time[class|name|id],
track[class|name|id],
video[class|name|id],
wbr[class|name|id]'
);

// Set the site locale
i18n::set_locale('en_US');

Avatar
thomas.paulson

Community Member, 84 Posts

2 August 2014 at 4:28am

https://github.com/silverstripe/silverstripe-html5
hope this work for you.

Avatar
ad5xj

Community Member, 17 Posts

2 August 2014 at 7:37am

Edited: 02/08/2014 7:43am

Thanks for the reply Thomas

The site itself does use the HTML5 tags in all pages generated. However, it does not still allow tinyMCE to use HTML5 tags during edit in the CMS. As you can see in the code snip above, I have followed the advise of others to extend the valid_elements configuration of tinyMCE through the CMS API. It still strips out anything HTML5 related.

This theme also does not use the Site Name and Site Slogan vars from CMS settings. It defaults to YOUR SITE NAME and YOUR SITE'S TAGLINE HERE text instead.