Adding class to links created inside a WYSIWYG field

6 posts by 2 authors in: Forums > CMS Builder
Last Post: September 12, 2008 (RSS)

Archived
Reply
Reply

By aev - September 8, 2008

Hi!

Can the WYSIWYG be configured to allow our clients to add a class for links they create inside the WYSIWYG?

I was thinking about a "Class:" input field below the Target and Title fields.

-aev-

Re: [aev] Adding class to links created inside a WYSIWYG field

Archived
Reply
Reply

By Dave - September 8, 2008

There's no automatic way to do that. The link popup is part of tinymce (the wysiwyg editor).

A few things you could try:

1) You could configure the wysiwyg to allow the user to select classes instead of font face & size and let them style the link after they create it.

2) You could add CSS code for anchor (a) tags to automatically style all of them

3) You could configure tinymce to use the 'advlink' plugin which includes a class pulldown and many other features) Here's a demo and some links on that:
http://tinymce.moxiecode.com/example_full.php
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advlink
And you can edit the wysiwyg config options in /lib/wysiwyg.php

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Adding class to links created inside a WYSIWYG field

Archived
Reply
Reply

By aev - September 11, 2008

Hi Dave!

Thanks for your help on this!

3) You could configure tinymce to use the 'advlink' plugin

I am trying to do option 3, but I need some more help to get it right.

I am following these instructions you pointed me to at the Moxiecode Wiki:

Plugin: advlink
This is a more advanced link dialog mostly based on code contributed by Michael Keck. This link plugin supports popup windows and targets.

Installation Instructions
1. Copy the advlink directory to the plugins directory of TinyMCE (/jscripts/tiny_mce/plugins).
2. Add plugin to TinyMCE plugin option list example: plugins : "advlink".
3. Add this "a[name|href|target|title|onclick|rel]" to extended_valid_elements option.

Advlink plugin options
advlink_styles
This option should contain a semicolon separated list of class titles and class names separated by =. The titles are the ones that get presented to the user in the styles drop down list and and the class names is the classes that gets inserted.

But I am stuck at Installation Instructions #3, I don't know where to put the "extended_valid_elements" options. I am also a bit unsure how to enable the advlink plugin option "advlink_styles" to create a dropdown menu of styles.

I have attached my "wysiwyg_custom.php" file, search for "advlink" 3 times to see my changes.

-aev-

Attachments:

wysiwyg_custom.php 3K

Re: [aev] Adding class to links created inside a WYSIWYG field

Archived
Reply
Reply

By Dave - September 11, 2008

Looks good, does it work now?

You can skip that 3rd step. We don't do any extra filtering of tags and it isn't required.

We've set verify_html to false as recommended in the TinyMCE Performance tuning docs:
http://wiki.moxiecode.com/index.php/TinyMCE:Performance_tuning_TinyMCE

Hope that helps, let me know if you need anything else.

Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Adding class to links created inside a WYSIWYG field

Archived
Reply
Reply

By aev - September 11, 2008

No, it doesn't work. The link button is still the same, and there is no new link button either.

Jake has all the login details if you care to take a look[:)]
[RRT #JSW-862797]

-aev-

Re: [aev] Adding class to links created inside a WYSIWYG field

Archived
Reply
Reply

By Dave - September 12, 2008

Note that we don't provide support for tinyMCE modifications.

I had a look anyway and the problem was tinyMce was missing the advlink plugin dir here:
/cmsb/tinymce3/plugins/advlink

I uploaded that from the source tinymce zip and deleted the old cache file: data//tiny_mce_7fde4892b674370bd5c181d18583c11c.gz

And it seems to be working now. Give it a try and let me know. You may need to clear your browser cache.

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com