Foliopress WYSIWYG Installation

Basics

Foliopress WYSIWYG Options Screen

The basic installation is very simple and straightforward - same as for every good Wordpress plugin. If you are not sure how to do it, John Godley wrote a really nice article about it - How to install a Wordpress plugin.

Make sure that the "Disable the visual editor when writing" option in user profile is off, this disables any editor including Foliopress WYSIWYG.

Server requirements

Foliopress WYSIWYG runs fine on nearly all the hosts without any configuration issues, but in case you experience some troubles, check that:

Your site is running on PHP 5
PHP Safe Mode is turned off
is_dir and open_dir restrictions are turned off

Ask your webhosting administrator about this.

Continue reading this article if you want to know more about how to get maximum out of Foliopress WYSIWYG. First open the options page. You will find it under Settings -> Foliopress WYSIWYG.

Advanced

First go to Settings -> Foliopress WYSIWYG in your Wordpress admin panels.

Max Image size width and height

All images bigger than these dimensions will be sized down to fit into it. The goal of this feature is to limit the size of the image which appears when the thumbnail in a post is clicked.

However, if the images is too big, an error message will be displayed. Images above certain size just can't be handled with PHP on regular shared hosting accounts. We are talking about 5MB JPEGs here - the memory consumption for processing such image is enormous.

Thumbnail sizes

You can use the Thumbnail sizes drop down with the nearby add and remove buttons to add the thumbnail sizes of your choice. The biggest size should fit closely into you content column.

Proper WYSIWYG operation

Enter the class or id of HTML element which is enclosing your post content in your Wordpress template into WYSIWYG CSS Styles fields.
Save the changes, clear your browser cache, reload the post editing screen with Foliopress WYSIWYG and enjoy.

Since setting this up may be tricky here are some examples:

If you have default template (in WP 2.2, 2.3, ...) the BodyId is 'content' and the BodyClass is 'post'.
If you take a look at this site source code (try looking on main page) BodyId is 'primary' and BodyClass is 'entry'.
If your template features a background image which is also displayed in Foliopress WYSIWYG, you can add some extra CSS into the Custom WYSIWYG CSS text area (it will apply only to what's in the editor). This simple declaration should give you the idea:
```
body { background: transparent; }
```
To make sure the editing screen has the proper width add the following into the Custom WYSIWYG CSS:
```
body { width: %enter your content width% px; }
```
Use the same trick if the letters are displayed in a wrong size, just add the proper font-size.
If some HTML element (for example headers) are missing the styling, you need to copy the style declarations to the Custom WYSIWYG CSS text area as in this example:
```
h2 { all the required styling}
```

If your template is nicely done and well organized, you should have no problems, but here are some more general rules for troubleshooting template issues and WYSIWYG:

Make sure your template is not setting padding, margin, border and similar CSS properties to zero for all the possible HTML elements. Some templates have declarations like this on one of the first lines and that's why some of the advanced styling in our editor might not be behaving as expected:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p,
blockquote, pre,a, abbr,acronym, address, big, cite, code,del,dfn, em,
font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form,label, legend,table,
caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

If your template CSS is spreading across multiple files, which are not loading from the basic style.css file, make sure you import the additional styles in Custom WYSIWYG styles. This applies mainly for themes which let's you choose one of multiple colors or provide a custom stylesheet for your modifications:

@import url('http://yoursite.com/wp-content/themes/theme/custom.css');

Alternatively, you can use 'custom-config/foliopress-editor.css' to setup all the styling.

Expert

You have to open the Advanced Options on the plugin settings screen.

Dropdown customization

We don't recommend you playing with this unless you have some bigger HTML/CSS experience.

Check out Dropdown Customization field in the options and you will get the idea. Here's an example of how you add a new item for red colored text:

Add the following into the dropdown customization field:
```
<span class="red-text">Red inline text</span>
```
Add the following into your template's style.css
```
.red-text { color: red; }
```
You will get the result like on the following picture:

Another example of custom dropdown items. Notice the empty class attribute in the first item which is there to cancel any class added by the other two items:

<h4 class="">Level 4 header</h4>
<h4 class="color">Level 4 header with color</h4>
<h4 class="logo">Level 4 header with picture</h4>

Foliopress WYSIWYG

Toolbar customization

We don't recommend you playing with this unless you have at least basic programming experience.

Here's a list of all the items you can use in the custom toolbar field. Be careful not to break the structure - enclose all the fields in single quotes and separate them with commas. The default content of the Custom Toolbar text field should give you the idea how to do it.

Cut, Copy, Paste, foliopress-paste, Bold, Italic, RemoveFormat, OrderedList, UnorderedList, Outdent, Indent, Blockquote, Link, Unlink, Anchor, foliopress-more, kfmBridge, Source, FitWindow, DocProps, Save, NewPage, Preview, Templates, PasteText, PasteWord, Print, SpellCheck, Undo, Redo, Find, Replace, SelectAll, RemoveFormat, Form, Checkbox, Radio, TextField, Textarea, Select, Button, ImageButton, HiddenField, Underline, StrikeThrough, Subscript, Superscript, JustifyLeft, JustifyCenter, JustifyRight, JustifyFull, Image, Flash, Table, Rule, Smiley, SpecialChar, PageBreak, TextColor, BGColor, About, Style, FontFormat, FontName, FontSize, -, /

Symbol / can be used to start another row. To use it properly, you must first close the angled brackets after the last item in the first row and start another angled brackets right after the new row symbol.

One row toolbar:

['Cut','Copy','Source','-','FitWindow']

Two row toolbar:

['Cut','Copy'],'/',['Source','-','FitWindow']

Make sure you change FCKEditor toolbar in the options dialog to Custom.

32 comments on “Foliopress WYSIWYG Installation”

01

This is a great plug-in. I do have one question. If I use the custom toolbar, is there any way to have a two row toolbar as there is if you use the full toolbar?

Mark at February 23rd, 2010 around 6:17 am
02

Hello Mark,

you can start another row by adding the following item into Custom Toolbar: ‘/’

Thanks,
M.

Martin at February 23rd, 2010 around 6:24 am
03

you say to do this

# Add the following into the dropdown customization field:
Red inline text
# Add the following into your template’s style.css
.red-text { color: red; }

but where in my style.css do I put the info to make the font red

.red-text { color: red; }

Thanks

Pete at February 24th, 2010 around 8:58 pm
04

Hello Pete,

it does not matter where you put it in the style.css. But you want to keep you style sheet well organized, so put it at the end of the file with some good comment above it so you will always know why it’s there.

Example:

/* This is for red inline text */
.red-text { color: red; }

Thank you,
M.

Martin at February 25th, 2010 around 2:26 am
05

Hello,
thank you for the nice plugin, it works great.
I have a question: The Text is rendered in Iso, but I need UTF-8.
Is this possible?
Thank you for your help,
Greetings, Ethel

Ethel at March 1st, 2010 around 4:01 am
06

Hello Ethel,

try to set these two to false in foliopress-wysiwyg/fckeditor/fckconfig.js:

FCKConfig.IncludeLatinEntities = true ;
FCKConfig.IncludeGreekEntities = true ;

It’s on line 67 and 68, or somewhere close to it.

So it becomes:

FCKConfig.IncludeLatinEntities = false ;
FCKConfig.IncludeGreekEntities = false ;

Then clear your browser cache and you won’t have this problem anymore.

Thank you,
M.

Martin at March 3rd, 2010 around 1:37 am
07

can you please tell me exactly how/where to put the ‘/’ to start another row?
Thanks

Jean at March 11th, 2010 around 8:57 am
08

Hello Jean,

I updated the documentation, just check out the last paragraph or two.

Thanks,
M.

Martin at March 12th, 2010 around 6:12 am
09

I followed your instructions for adding items to the drop down customization fields to add colored text. The text is appearing as basic black in the drop down and in my document. I’m skilled at html and css. I’m certain I’ve done added the entries correctly. Is there a glitch or some path to my style sheet that needs to be updated/configured for the WYSIWYG editor to pick it up?

It’s probably something small that I am overlooking. Would appreciate your help.

Thanks.

Brenda at April 9th, 2010 around 9:07 am
10

Hello Brenda,

1. do you have Post ID or Post class in WYSIWYG CSS Styles in plugin options properly configured?

2. when you add your styling via the drop down menu, is the styling working when you save the post and open it for viewing?

Thanks,
M.

Martin at April 10th, 2010 around 12:27 am
11

Hi Mark
Thanks for a great plugin. I have a client that needs those visual cues for how her page will look while she is editing and this plugin is really helping her figure things out.

i can’t find the answer to this anywhere so i thought i would ask: we have a youtube insert plugin operating at the same time as yours which relies on using quote marks to define the youtube id as well as width and height values. Foliopress by default converts any ” into HTML ;quot which disables the video. I added SpecialChar to the WYSIWYG and tried adding the ” that way but it still converts to HTML. Is there any way to turn this off?
Thanks in advance.

ben at April 27th, 2010 around 3:43 pm
12

Hello Ben,

you need to change this in foliopress-wysiwyg/fckeditor/fckconfig.js:

FCKConfig.ProcessHTMLEntities = true ;

to

FCKConfig.ProcessHTMLEntities = false ;

It’s on line 66 or somewhere close to it.

Then clear your browser cache and you won’t have this problem anymore. Maybe we should add this to plugin options or at least into FAQ.

Thanks,
M.

Martin at April 28th, 2010 around 12:38 am
13

Is it possible to have this plugin translated to another language?

Jussi at May 25th, 2010 around 6:28 am
14

Actually I found out that finnish language is also supported by this editor, but how can I use it?

Jussi at May 25th, 2010 around 6:44 am
15

Hello Jussi,

thanks you pointing this out. Here’s how you can switch the language:

1. open foliopress-wysiwyg/fckeditor/fckconfig.js

2. search for FCKConfig.DefaultLanguage = ‘en’ ; and change it to FCKConfig.DefaultLanguage = ‘fi’ ;

3. search for FCKConfig.AutoDetectLanguage = true ; and change it to FCKConfig.AutoDetectLanguage = false ;

We will try to make this easier in one of the next versions. Also our custom buttons won’t be translated for now.

Thanks,

Martin at June 16th, 2010 around 6:22 am
16

I’ve solved my issues up to now, but since we were upgraded to WP 3.0 there is now a new problem. Not only do non breakings spaces keep getting turned into empty paragraphs, but it’s doubling and tripling up empty paragraphs on its own. I’ll delete the extras in source and whether I straight save or switch of source first it goes back to two or three of those in a row. Anyone else having this strange problem?

Christian at June 19th, 2010 around 1:30 pm
17

Hi Christian,

We’ll fix Foliopress WYSIWYG in the next couple of weeks but if you’d like to live the good life don’t rush into OS upgrades or Wordpress upgrades.

Cheers, Alec

alec at June 19th, 2010 around 4:15 pm
18

Alec, that’s sage, practical advice that I wish my supervisor would take to heart.

Thanks.

Christian at June 20th, 2010 around 2:34 am
19

Hello Christian,

we just released a new version 0.9.12 which is working with WP 3.

I fixed some possible causes to the weird behavior you are writing about when I was working on the update – the editor was running basically inside of a running instance of tinyMCE = two editors parsing the code.

So this should be fixed, I was not able to get that problem anymore. Can you check if you still have this issue please?

Thanks,
Martin

Martin at June 22nd, 2010 around 6:15 am
20

Martin, it’s all good. Thank you so much for your help.

Christian at June 23rd, 2010 around 7:24 am
21

Actually, there is one thing still happening. Any —> (close comments) is enclosed by and thus shows up in the page instead of closing the comments.

Christian at June 23rd, 2010 around 7:44 am
22

Will FolioPress work with BuddyPress, i.e. so users posting Activity Updates or Forum Posts will be able to use FolioPress in stead of TinyMCE?

expandinghorizons at June 24th, 2010 around 9:24 pm
23

Hello expandinggorizons,

thank you for your interest. As far as I know there is no tinyMCE running when you post activity updates or forum posts on BuddyPress. Our plugin is also not supporting this.

Martin

Martin at June 25th, 2010 around 10:36 am
24

Horizons,

The reason BuddyPress doesn’t use WYSIWYG is that updates are much faster with just plain text boxes. Adding WYSIWYG to BuddyPress is counterproductive which is why they don’t do it and we don’t plan to do so either.

If there were a place in BuddyPress where an advanced WYIWYG editor were helpful, we’d consider adding support.

alec at June 25th, 2010 around 10:38 am
25

There is an addon that enables TinyMCE in BuddyPress. What I am really after is not the full feature set of a rich text editor, because you are right, it does slow things down a lot. I was trying to find a way to allow the easy insertion of photos to the Activity stream, and the rich editors include that “Insert Image” button. So just a dumb try at getting something solved with tools not meant for the purpose.

Thanks

expandinghorizons at June 27th, 2010 around 11:12 am
26

Hi Horizons,

Our image editor is better suited to trusted site editors than casual members. I’ll look at adding just the image uploader itself but we’ll probably pass on this for now, as it would involve a lot of permissions issues to make our image manager less powerful

Cheers, Alec

alec at June 28th, 2010 around 4:37 am
27

Is it possible to have the ‘createDiv’ and ’showBlocks’ functions that the latest CKEditor uses?

Regards,
Steve

Steven Nash at July 11th, 2010 around 3:27 pm
28

Hi Steven,

You can add a CreateDiv function yourself via the custom menu. We haven’t added showBlocks and don’t have plans to do so in the near future.

Our version of FCKeditor is highly enhanced and we don’t see any compelling argument to switch CKeditor. What is good about CKeditor is that it’s not as ugly as FCKeditor was. Foliopress WYSIWYG has always been very pretty.

Cheers.

alec at July 11th, 2010 around 6:39 pm
29

Hello Alec and Martin,

I will just ask how to make my inserted image on the editor have the “white sizing handles” so I can just easily resize. I know it was there on the default WP Editor.

Red at August 4th, 2010 around 4:47 pm
30

Hi Red,

White sizing handles are a very big mistake. When you resize in the post it means your image is being resized by the browser.

That means longer download times (sizing an image down) or distorted ugly images (upsizing an image).

With Foliopress WYSIWYG you right click and choose the right size for your needs in that particular post. At that point Foliopress WYSIWYG creates a smaller version exactly that size. Presto: good looking images and fast downloads.

alec at August 6th, 2010 around 2:43 am
31

Thanks Alec!

I really have to consider the download times and also the unproportioned size..

Another thing I would like to ask not so important,

Is there any other way to remove error message when copying texts within the editing field, a message always appears that copying is not allowed by my browser(firefox) when clicking on (copy button) it tells to just use ctrl+c. This was just for my clients who are used to click the copy button and doesn’t know shortcuts.

I’ve tried including (foliopress-copy) on custom toolbar but doesn’t work

Maybe I’ll just configure the browser settings for allowing javascript actions, but if there’s any tweaking methods to allow the use of copy button, let me know.

Thanks!

Red at August 6th, 2010 around 4:42 am
32

Hi Red,

The reason the button doesn’t work in Firefox is that Mozilla does not allow javascript control of the clipboard. It’s a browser limitation. IE and Safari both allow this. I’m not sure about Opera offhand.

alec at August 6th, 2010 around 9:39 am