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
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.
interactivetools.com
Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg
By avrom - March 9, 2008
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
Re: [virgodesign] Tutorial: Custom styles pulldown in wysiwyg
By JamesKB - March 9, 2008 - edited: March 10, 2008
--
JamesKB
Re: [virgodesign] Tutorial: Custom styles pulldown in wysiwyg
By Dave - March 10, 2008
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.
interactivetools.com
Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg
By blukabm - April 27, 2008
- 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
Re: [blukabm] Tutorial: Custom styles pulldown in wysiwyg
By Dave - April 28, 2008
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.
interactivetools.com
Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg
By blukabm - April 28, 2008
[:)] -Troy
Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg
By Mohaukla - June 25, 2008
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 (ñ) 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.
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
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!
interactivetools.com
Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg
By Mohaukla - June 25, 2008
I will email you my details and let you take a look.
Thanks again,
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!"