Help / Plugins

Topics

Other Perch Sites

Editor plugins

Perch supports a system of plugins for applying your own WYSIWYG-style editors to textarea controls on the content editing page. Any editor that hijacks a textarea using JavaScript should be able to be implemented using a plugin.

Editor plugins are folders indie the /perch/plugins/editors folder. The plugin name is take from the name of its folder. There is only one required file inside a plugin folder, and that is _config.inc.

The _config.inc file contains a fragment of HTML that gets included in the <head> of the content editing page. Typically, this will just link in any JavaScript and CSS files required by your plugin. An example file might look like this:


                <script type="text/javascript" src="PERCH_LOGINPATH/plugins/editors/myeditor/editor.js"></script>

                <script type="text/javascript" src="PERCH_LOGINPATH/plugins/editors/myeditor/config.js"></script>

                <link rel="stylesheet" href="PERCH_LOGINPATH/plugins/editors/myeditor/skin.css" type="text/css" />

                <link rel="stylesheet" href="PERCH_LOGINPATH/plugins/editors/myeditor/style.css" type="text/css" />

The string PERCH_LOGINPATH is replaced out with the path of the Perch folder at the time the file is included. This helps to make a plugin portable from one installation to another.

The above example links in four different files.

editor.js: This would be the editor's core library file.
config.js: The code which runs onload to apply the editor to the textarea fields.
skin.css: The regular CSS file for styling the editor.
style.css: Any tweaks or adjustments needed to have the editor fit nicely into the Perch UI.

Of course, you can include any files and name them as you wish. This is merely a suggested layout.

The config.js file may look something like this:

$(document).ready(function(){
    $('textarea.myeditor').myeditor();
});

This is using the jQuery $(document).ready() convension to apply the editor to any textarea with a class of myeditor when the document is ready. jQuery is available for use on the page. Perch automatically applies a class to each textarea with the name of the editor the template says should be used.

The editor would then be added to the template using the editor attribute. You will normally want to enable HTML too, as most WYSIWYG editors output HTML.

<perch:content id="body" type="textarea" label="Article body" html="true" editor="myeditor" />