#1 2014-03-01 14:25:45

elegos
Member
Registered: 2013-12-23
Posts: 38

Advanced TinyMCE configuration

Hello!

I'm developing a website which, for user's ease-of-use, includes some TinyMCE templates (in THEME_URL/assets/templates). Some of the templates have "empty" icon tags:

<i class="whatever"></i>

They are stipped out by TinyMCE. If I add a non-breakable space tag, it is automatically converted into:

&amp;nbsp;

which, of course, is not the right way of handling the template.

I thus navigated in the source and found themes/admin/javascript/ionize/ionize_tinymce.js, which has the setting "verify_html" set to false... this should be enought not to strip elements if I'm not wrong... in any case I tried to add the setting extended_valid_elements (both the configurations) to "i[class]", but with the very same effect.

What am I doing wrong? Also I noticed some over-writable functions, may them be useful for this particular purpose?

Eventually: is there any way to load some CSS files in the editor, for example to include FontAwesome's icons?

Thanks

Offline

#2 2014-03-01 16:44:59

elegos
Member
Registered: 2013-12-23
Posts: 38

Re: Advanced TinyMCE configuration

I haven't figured out still how to avoid TinyMCE truncate "empty" tags, though I resolved the 2 issues.

First of all, I was mispelling &nbsp;: if you write it correctly, TinyMCE won't HTML encode the ampersand. Thus if you want, this is a hack to prevent TMCE to truncate icons.

The second issue, about inserting custom CSS inside the editor, I found the "supposed" (correct?) way:

THEME_PATH/assets/javascript/tinyMCE.js

ION.append({
	tinyMCEAddFontAwesome: function(ed) {
		var css = ed.settings.content_css;

		css = css.split(',');
		css.push('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
		css = css.join(',');

		ed.settings.content_css = css;
	},

	tinyOnSetup: function (ed) {
		ION.tinyMCEAddFontAwesome(ed);
	},

	tinySmallOnSetup: function(ed) {
		ION.tinyMCEAddFontAwesome(ed);
	}
});

Cheers

Offline

#3 2014-06-09 22:58:21

raskrial
Member
Registered: 2014-03-03
Posts: 22

Re: Advanced TinyMCE configuration

just by any chance, have you any tips to help me out to set some templates for tinyCME ? i'm looking to find some docs to setup the folder and templates but couldn't fine any so far that really fit with ionize.

Offline

#4 2016-10-24 13:14:19

fredericomarinho.com
Member
From: Juiz de Fora / Brazil
Registered: 2015-06-08
Posts: 40
Website

Re: Advanced TinyMCE configuration

Hello @raskrial.
Take a loot at this: http://ionizecms.com/forum/viewtopic.php?id=1835


Frederico Marinho - Social Media and Web Developer
contato@fredericomarinho.com
fredericomarinho.com

Offline

What's Ionize ?

Ionize is an Open Source Content Management System created by webdesigners for webdesigners.

Created and maintained by Partikule and Toopixel, Ionize wants to be the easiest and most powerful CMS.

Can I help ?

Because talent is nothing without involvement, we are looking for motivated coders and webdesigners to join the project team.

Resources

Website : ionizecms.com
Documentation : doc.ionizecms.com

Development : Ionize on GitHub
Translations : Ionize Translations