#1 2016-04-13 15:44:38

PGrafiek
Member
Registered: 2013-03-18
Posts: 24

Add a class for a link in editor

Hello,
I would like to add an element in class list in the article editor.
Like : left, right, center,...

class link editor

Thank you

Offline

#2 2016-04-14 00:02:59

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: Add a class for a link in editor

Hi,

Simplest method is just to use the "html" button when adding content to your article, this way you can view the markup and add any class you like to any element.  To get the "html" button click the "Click the show/hide tool" which is left of the "B" bold button.

Offline

#3 2016-04-14 10:12:56

PGrafiek
Member
Registered: 2013-03-18
Posts: 24

Re: Add a class for a link in editor

Hi,
Thank you, yes it is an idea, but it is simplest for me, not for the client :-)

Offline

#4 2016-04-15 23:20:34

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: Add a class for a link in editor

Have you looked at predefined templates?

Not sure if it will fit your needs might be overkill, but with predefined templates an editor can basically select from a dropdown list and a whole block of code will be inserted automatically with the classes you want.  Would that work for you?

Offline

#5 2016-04-17 09:43:05

PGrafiek
Member
Registered: 2013-03-18
Posts: 24

Re: Add a class for a link in editor

maybe that would work for me, but how to start with ?

Offline

#6 2016-04-19 18:19:23

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: Add a class for a link in editor

Hi,

Follow the info here http://ionizecms.com/forum/viewtopic.php?id=1835

Let me know if you need any more help

Offline

#7 2016-04-19 20:40:19

PGrafiek
Member
Registered: 2013-03-18
Posts: 24

Re: Add a class for a link in editor

Hi,

Thank you !

I have an error when i load the template:
Theme error : The file "views/header" cannot be found.

My js code :

function getTinyTemplates()
{
	var template_templates = new Array(
		{
			title : "Header list",
			src : "mytpl.html",
			description : "Header list"
		}
	);
	
	return template_templates; 
}

The js file (tinymce_templates.js ) and the html template (mytpl.html) are in the same folder (assets/templates/), so i leaved blank "path_to_templates"... maybe it is a mistake... Sorry roll

Offline

#8 2016-04-20 12:06:33

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: Add a class for a link in editor

"path_to_templates" is required, update your code to the following:

function getTinyTemplates(path_to_templates)
{
	var template_templates = new Array(
		{
			title : "Header list",
			src : path_to_templates + "mytpl.html",
			description : "Header list"
		}
	);
	
	return template_templates; 
}

Offline

#9 2016-04-20 14:18:02

PGrafiek
Member
Registered: 2013-03-18
Posts: 24

Re: Add a class for a link in editor

My knowledge in javascript is null...

I created a subfolder "my_tpl_folder" in the folder "template"
and edited the code in this way :

function getTinyTemplates('/my_tpl_folder/')
{
	var template_templates = new Array(
		{
			title : "Header list",
			src : "/my_tpl_folder/" + "mytpl.html",
			description : "Header list"
		}
	);
	
	return template_templates; 
}

The js file (tinymce_templates.js ) is in folder "assets/templates/"
and the html template (mytpl.html) is in subfolder "assets/templates/my_tpl_folder/"

is it a good idea ?

Offline

#10 2016-04-20 23:10:14

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: Add a class for a link in editor

Looks fine to me smile

Offline

#11 2016-05-19 04:56:44

blainele
Member
Registered: 2016-05-19
Posts: 1
Website

Re: Add a class for a link in editor

That looks good to me.

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