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

If you see a warning like this one, your site is not running on PHP 5:

Parse error: syntax error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in {your web root}/wp-content/plugins/foliopress-wysiwyg/foliopress-wysiwyg-class.php on line 96

• 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

1. Enter the class or id of HTML element which is enclosing your post content in your Wordpress template into WYSIWYG CSS Styles fields.
2. 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:

1. If you have default template (in WP 2.2, 2.3, ...) the BodyId is 'content' and the BodyClass is 'post'.
2. If you take a look at this site source code (try looking on main page) BodyId is 'primary' and BodyClass is 'entry'.
3. 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; }
   
   

4. 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; }
   
   

5. Use the same trick if the letters are displayed in a wrong size, just add the proper font-size.
6. 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}
   

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:

1. Add the following into the dropdown customization field:

   <span class="text-red">Red inline text</span>

2. Add the following into your template's style.css

   .red-text { color: red; }

3. You will get the result like on the following picture:

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']