Main
Index 		Search
Posts 		Who's
Online 		Log
In

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

 
 


Dave
Staff / Moderator


Dec 14, 2007, 11:26 AM

Post #1 of 19 (7012 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/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:

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

Dave Edis - Senior Developer
interactivetools.com
 

(This post was edited by chris on Aug 5, 2009, 10:34 AM)


avrom
User

Mar 9, 2008, 12:25 PM

Post #2 of 19 (6489 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 19 (6487 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....
--
JamesKB

(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 19 (6475 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 19 (6199 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:
  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 (3.83 KB)
  edit_functions.php (26.0 KB)


Dave
Staff / Moderator


Apr 28, 2008, 9:09 AM

Post #6 of 19 (6188 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 19 (6182 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 19 (5954 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 19 (5951 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 19 (5946 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 19 (5928 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 19 (5923 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 19 (5921 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 19 (5678 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 19 (5673 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 19 (4692 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 19 (4691 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
 


Christopherb
User

Mar 19, 2009, 2:15 PM

Post #18 of 19 (3862 views)
Shortcut
Re: [Dave] Tutorial: Custom styles pulldown in wysiwyg [In reply to] Can't Post
How do we get the editor to show h1, h2, h3 dropdowns?



we have the following within the wysiwyg.css and they work fine.



.bodytextlink {color: #CC0000}
.bodytextlinkbold {color: #CC0000}


Dave
Staff / Moderator


Mar 20, 2009, 3:31 PM

Post #19 of 19 (3846 views)
Shortcut
Re: [Christopherb] Tutorial: Custom styles pulldown in wysiwyg [In reply to] Can't Post
Hi Christopherb,

You can find a list of available pulldowns and buttons for the wysiwyg here:
http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

I think the one you want is 'formatselect', and there's some additional options for it here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_blockformats

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com