Incorporating a WYSIWYG Editor into your Wolf CMS Plugin

I recently completed a project for a client that ran on Wolf CMS which is based on Frog CMS. For this project I had to code several plugins from scratch to achieve varying goals.

One thing I came across that hasn’t been documented yet is how to include a WYSIWYG editor for your textarea’s that the system uses. There are several available for editing of pages including TinyMCE, Markdown text filter and the Textile text filter. Now how exactly to use and incorporate these in your plugin?

<label for=”snippet_filter_id” style=”float:left”><?php echo __(‘Filter’); ?></label>
<select id=”snippet_filter_id” name=”snippet[filter_id]” onchange=”setTextAreaToolbar(‘description’, this[this.selectedIndex].value)”>
<option value=””<?php if($snippet->filter_id == ”) echo ‘ selected=”selected”‘; ?>>&#8212; <?php echo __(‘none’); ?> &#8212;</option>
<?php foreach ($filters as $filter): ?>
<option value=”<?php echo $filter; ?>”<?php if($snippet->filter_id == $filter) echo ‘ selected=”selected”‘; ?>><?php echo Inflector::humanize($filter); ?></option>
<?php endforeach; ?>
<option value=”tinymce”>Tinymce</option>

Include the above piece of code above or near the textarea that you wish to WYIWYG and change the onchange piece of javascript to the ID of your text area for example:

onchange=”setTextAreaToolbar(‘ID_OF_YOUR_TEXT_AREA_HERE‘, this[this.selectedIndex].value)”

You will then see a drop down menu of different filters that you can apply to your textareas.



WYSIWYG Editor After

WYSIWYG Editor After


Currently the piece of code that is supposed to get and show the available filter options does not return any values, I’m working on finding a solution to this. Currently I’ve manually added the TinyMCE option – <option value=”tinymce”>Tinymce</option>

One response to “Incorporating a WYSIWYG Editor into your Wolf CMS Plugin”

  1. Julius says:

    Sorry. Doesn’t work for me. Could you upload the whole code please?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.