Interactivetools.com Forum: Products: CMS Builder: Tutorial: Custom styles pulldown in wysiwyg

Home: Products: CMS Builder:
Tutorial: Custom styles pulldown in wysiwyg

Dave
Staff / Moderator

Dec 14, 2007, 11:26 AM

Post #1 of 17 (2516 views)
Shortcut

Tutorial: Custom styles pulldown in wysiwyg	Can't Post

As requested, here's how to have a custom styles pulldown in the wysiwyg. Please note, this is an advanced hack for users comfortable editing some javascript. This isn't officially supported and we'll automate it in future, but for those who want to it right now, here's how:

CMS Builder uses an open-source wysiwyg editor called "TinyMCE". You can find the javascript code that calls it in this file: [program dir]/lib/menus/default/edit_functions.php

Search for "theme_advanced_buttons1". That line specifies which buttons to display. You can find a complete button list here: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

Remove the "formatselect, fontsizeselect" buttons and replace with "styleselect". This will use a pulldown of style classes instead of the format and font size pulldowns. Like this:

Code

theme_advanced_buttons1 : "styleselect, bold, (... your buttons here ...), fullscreen",

Then just add the classes you want available to this file: /css/wysiwyg.css

If anyone needs help with this feel free to post here.

UPDATE Jun 18, 2008: Removed old instruction that didn't apply to latest version.

Dave Edis - Senior Developer
interactivetools.com

(This post was edited by Dave on Jun 18, 2008, 4:08 PM)

virgodesign
User

Mar 9, 2008, 12:25 PM

Post #2 of 17 (1993 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hi Dave,

Excuse my ignorance, I'm not sure what you mean in the last paragraph:

"Don't forget to include your CSS file on your viewer page as well so the selected CSS classes display properly."

So this would mean you actually see the styles in the tinyMCE editor ? What actual file would that be that is the "viewer page" ?

Thank you,
Avrom

JamesKB
User

Mar 9, 2008, 9:50 PM

Post #3 of 17 (1991 views)
Shortcut

Re: [virgodesign] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

I to am not sure of the last paragraph either. Smile

Have a nice day....
--
James

(This post was edited by JamesKB on Mar 10, 2008, 7:18 AM)

Dave
Staff / Moderator

Mar 10, 2008, 10:18 AM

Post #4 of 17 (1979 views)
Shortcut

Re: [virgodesign] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Yes, you can set it up so the WYSIWYG has a pulldown with a list of CSS classes the user can use to style their text. This lets you have more control over how the user can and cannot format content. So you might have a CSS file with classes: myHeader, subHeading, mainContent, smallPrint, etc

the WYSIWYG will add those class names to the content like this: <div class="myHeader"> so to have them display properly you'll need to include a css file on your viewer page that loads those css classes. Something like this:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Hope that helps! Let me know if I can provide more details for you.

Dave Edis - Senior Developer
interactivetools.com

blukabm
User

Apr 27, 2008, 10:53 AM

Post #5 of 17 (1703 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hey Dave, Thanks for this great info. I have used the above info to create a built in stylesheet for my client, I have run into one problem, and I dont know if this is the nature of the beast OR I am doing something wrong:

I got the dropdown to work ONLY if I put in the option two you mention. If I dont, it does not show any of my .css classes in the dropdown.
Once I got the option two to give me the "classes" I can select them and it places the code in the HTML (as I checked in the HTML view). BUT it does not give me a view of that class style in the editor? Is that correct? It does show me the correct style in the view page, but i am afraid its going to confuse my clients if they actually do not see the repesentation in the editor.

Thanks for your help.

-Troy

Attachments:

pa_style.css (3.83 KB)

edit_functions.php (26.0 KB)

Dave
Staff / Moderator

Apr 28, 2008, 9:09 AM

Post #6 of 17 (1692 views)
Shortcut

Re: [blukabm] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hi Troy,

We've added some features to the software to make this simpler since some of these posts were made.

Try removing this line from your version:
content_css : "/pa_style.css",

And then just adding the classes you want available to this file: /css/wysiwyg.css

Those CSS classes should appear and the drop down list and style editor content as well.

Let me know if that works the way you need.

Dave Edis - Senior Developer
interactivetools.com

blukabm
User

Apr 28, 2008, 10:55 AM

Post #7 of 17 (1686 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

I knew I was a little behind... Thanks Dave, you solved it... works perfect now. GREAT enhancement!

Smile

-Troy

justritedesign
User

Jun 25, 2008, 3:02 PM

Post #8 of 17 (1458 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hi Dave
I am at the stage to address this with one of my clients but I am not seeing the results.

The code in the "Edit_Functions.php" looks like this:

Code

<script language="javascript" type="text/javascript"><!-- 
tinyMCE.init({ 
      mode : "exact", 
      theme : "advanced", 
 
          // Define buttons: Button codes: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference 
          theme_advanced_buttons1 : "styleselect,bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,indent,|,outdent,|,removeformat,fullscreen", 
          theme_advanced_buttons2 : "forecolor,backcolor,|,hr,link,unlink,image,table,|,code", 
          theme_advanced_buttons3 : "content_css : "www.efreewillmar.org/style.css", 
 
          // Load Plugins: ***NOTE*** plugins must be added both here and in tinyMCE_GZ.init() in edit.php! 
          plugins : "inlinepopups,contextmenu,table,fullscreen", 
 
          // 
          theme_advanced_toolbar_location : "top", 
          theme_advanced_toolbar_align : "left", 
          elements: '{$fieldSchema{'name'}}', 
          file_browser_callback : "$uploadBrowserCallback", 
          relative_urls : false, 
          entity_encoding : "raw", // don't store extended chars as entities (&ntilde) or keyword searching won't match them 
 
          // 
          content_css : "css/wysiwyg.css" 
    }); 
//--></script>

But I see the two dropdowns "Format and Fonts Size" in the wysiwyg editor. I added a Test class to the wysiwyg.css sheet but I do not see it at all.
If my code is set to "styleselect" then why do I see the two older drop downs?

Also I see on "Theme_Advanced_button3" is set to the style sheet that is used by the rest of the site.
What is the function of that line?

Thanks for all your help.
Michael Moyers
Owner/Administrator
Just Rite Design & Just Rite Productions
A growing network of professionals in Web development, Programming, Graphic Design, Flash, and Audio and Video Productions

Dave
Staff / Moderator

Jun 25, 2008, 3:50 PM

Post #9 of 17 (1455 views)
Shortcut

Re: [justritedesign] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hi Michael,

You shouldn't see the font and format pulldowns if you've removed them. And you want to leave theme_advanced_buttons3 blank as it was. If you try to load two different stylesheets one will get missed.

If you like I can login to your CMS and have a look what the problem might be. If you'd like me to do that just email me CMS login details to dave@interactivetools.com.

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com

justritedesign
User

Jun 25, 2008, 4:29 PM

Post #10 of 17 (1450 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

No I did nothing to this code. This is how I found it so thats why I thought I would ask you what was going on. I added nothing nor changed anything.

I will email you my details and let you take a look.

Thanks again,
Michael Moyers
Owner/Administrator
Just Rite Design & Just Rite Productions
A growing network of professionals in Web development, Programming, Graphic Design, Flash, and Audio and Video Productions

Dave
Staff / Moderator

Jun 25, 2008, 11:17 PM

Post #11 of 17 (1432 views)
Shortcut

Re: [justritedesign] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hi Michael,

I responded via email, but for anyone else following, here's what I did:

- I upgraded /tinymce3/ files to the latest version, the was some issues that made it not display in Firefox 3
- I edited /lib/menus/default/edit_functions.php where it says "theme_advanced_buttons1" - I replaced "formatselect,fontsizeselect" with "styleselect"
- I updated /cmsAdmin/css/wysiwyg.css with the latest version (some of the wysiwyg specific CSS has changed) and created a test class to make sure it was working.
- I cleared my cache and reloaded /cmsAdmin/css/wysiwyg.css since my browser was using the cached version.

After that everything seemed to work correctly.

Let me know if anyone else has any problems.

Dave Edis - Senior Developer
interactivetools.com

justritedesign
User

Jun 25, 2008, 11:46 PM

Post #12 of 17 (1427 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Looks like your up late too Dave!

Thanks for the help with that.

Now the question becomes is it possible for me to have the font size drop down on with the styles or will they clash? I only say this because my client may possibly come back with a request for more control over text size. If that happens I would have to set up a larger array of classes for each option I give them.
As I understand I could go back in the "edit_functions.php" and add fontsizeselect back in the line, but would that have any problems?
My thoughts are leaning that the two could format issues. If say a style was chosen and then a different size was chosen .... the resulting format may not turn out as the user intended.

Anyway let me know what you think

Thanks again,
Michael Moyers
Owner/Administrator
Just Rite Design & Just Rite Productions
A growing network of professionals in Web development, Programming, Graphic Design, Flash, and Audio and Video Productions

Dave
Staff / Moderator

Jun 25, 2008, 11:57 PM

Post #13 of 17 (1425 views)
Shortcut

Re: [justritedesign] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

That's a good question. I don't really know, I guess it would depend on the tags the wysiwyg outputs. I'd give it a try and experiment. Let us know what you find out! :)

Be sure to try it in FireFox and Internet Explorer just to make sure they don't act differently.

Dave Edis - Senior Developer
interactivetools.com

justritedesign
User

Jun 30, 2008, 2:32 PM

Post #14 of 17 (1182 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hey Dave,
Good news!
I have experimented with the style dropdown in conjunction with the font size dropdown and have had great success.
There are a couple of things that should be kept in mind.

1. The CSS stylesheet wysiwyg.css (when edited to your liking) should not contain any size parameters in order to work with the size dropdown.
2. Other parameters should be left out like Bold,Italics etc.
3. When using the editor itself you should clean all formating out of the content entered (if pasted from another application) .... Also keep in mind that when you come back to edit the content later that the wysiwyg sometimes clings to old styles so I found it worthwhile to remove the formating for the intended section first and then apply the new style as needed.
4. If you have not assigned a style to the text you are saving it will certainly use the pages (or browsers)defined base style. So if you save something and it does not look like what you put in ... then check your text in the editor.

I have attached an example of the style sheet that I am using. There is a two versions of each font type. The only difference is that one allows for link decoration (i.e. Arial___) and one does not. The only questionable font in the list is Gadget but this can be easily removed if so desired.

Anyway I hope this helps anyone out whose looking for a little more customization of the editor.

Dave .. Thanks for all your help!
Michael Moyers
Owner/Administrator
Just Rite Design & Just Rite Productions
A growing network of professionals in Web development, Programming, Graphic Design, Flash, and Audio and Video Productions

(This post was edited by justritedesign on Jun 30, 2008, 4:54 PM)

Attachments:

wysiwyg.css (2.14 KB)

Dave
Staff / Moderator

Jun 30, 2008, 4:00 PM

Post #15 of 17 (1177 views)
Shortcut

Re: [justritedesign] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Michael,

Thanks for the tips and update! :)

Dave Edis - Senior Developer
interactivetools.com

nigelparry.net
User

Nov 11, 2008, 2:56 PM

Post #16 of 17 (196 views)
Shortcut

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Has the location of the button customization changed recently?

In edit_functions.php it does not seem as if any of these buttons appear.

TinyMCE's Wiki is funny, it has a list of all the button types you can add and remove, but it doesn't say WHERE to add or remove them?

Nigel
_____________________

For more information about Nigel Parry and nigelparry.net
websites please see http://nigelparry.net

nigelparry.net: award-winning communications
solutions for clients with something to say

Website & print design

Internet, public relations & media consulting

Dave
Staff / Moderator

Nov 11, 2008, 2:57 PM

Post #17 of 17 (195 views)
Shortcut

Re: [nigelparry.net] Tutorial: Custom styles pulldown in wysiwyg [In reply to]	Can't Post

Hi Nigel,

It has changed, it's now in /lib/wysiwyg.php

Dave Edis - Senior Developer
interactivetools.com

Search for (options)