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”‘; ?>>— <?php echo __(‘none’); ?> —</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>
</select>
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 Before
WYSIWYG Editor After
NOTE
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>