Tutorial: Custom styles pulldown in wysiwyg

19 posts by 7 authors in: Forums > CMS Builder
Last Post: March 20, 2009   (RSS)

By Dave - December 14, 2007 - edited: August 5, 2009

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/wysiwyg.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:

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.
UPDATE Aug 5, 2009: Updated which file to edit (/lib/wysiwyg.php) to match latest version.
Dave Edis - Senior Developer
interactivetools.com

Re: [virgodesign] Tutorial: Custom styles pulldown in wysiwyg

By JamesKB - March 9, 2008 - edited: March 10, 2008

I to am not sure of the last paragraph either. [:)]
Have a nice day....

--

JamesKB

Re: [virgodesign] Tutorial: Custom styles pulldown in wysiwyg

By Dave - March 10, 2008

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

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg

By blukabm - April 27, 2008

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:
  1. 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.
  2. 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 5K

edit_functions.php 27K

Re: [blukabm] Tutorial: Custom styles pulldown in wysiwyg

By Dave - April 28, 2008

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

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg

By blukabm - April 28, 2008

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

[:)] -Troy

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg

By Mohaukla - June 25, 2008

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:
<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 of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.



"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"

Re: [justritedesign] Tutorial: Custom styles pulldown in wysiwyg

By Dave - June 25, 2008

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

Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg

By Mohaukla - June 25, 2008

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 of Just Rite Design Inc. A growing network of professionals in web design, graphic design, flash development, programming, and audio & video productions.



"Due to budget constraints, the Light at the end of the tunnel will be temporarily out!"