How to create custom TinyMCE configurations May 21, 2011 / Updated: Dec 25, 2018
- In the root
pluginsfolder create a new folder called
- Inside the new tinymce4 folder create a new folder called
- Go to
zp-core/zp-extensions/tinymce4/configand copy any or all of the existing config files to get you started.
- Note there are slight differences between config files for gallery items, Zenpage CMS items and comments.
- Place the copied files in your new
- Rename your copied config file(s) to something unique for each file. The prefixes "zenphoto-", "zenpage-" (both on the tinymce4 options) and "comment-" (comment_form plugin) are required so these plugin option selectors know which to display so choose something like e.g. zenphoto-myconfig.php.
- Make any further edits you wish to make within the config file.
- If you want to use your own CSS file for the editor, replace the existing content_css parameter or add a new one in the tinymce.init function:
content_css : "<?php echo FULLWEBPATH; ?>/themes/yourthemename/content.css",<- make sure you have the comma at the end unless your parameter is the last one. The css can of course be located elsewhere like in the /plugins folder
- Create your own
content.cssfile in your theme folder and place that in your theme folder and then edit it to your desired requirements and styles.
- Upload the new
tinymce4folder (and its contents) in the
pluginsdirectory and your new theme
content.cssfile to your zenphoto site.
- Login to your zenphoto admin and go to Options > Plugins > tinymce4 and select from the drop down your new tinymce4 config files and apply (save).
content.cssfile. You'll also find a bare bones example file on: https://github.com/zenphoto/DevTools/tree/master/plugins/tinymce4/config
For more information of config options for tiny_mce go to http://www.tinymce.com and have a look at some of the examples to see what you can do: http://www.tinymce.com/wiki.php/TinyMCE
Note: Zenphoto 1.4.5 and earlier included TinyMCE version 3.
There the folder must be tiny_mce. The js file was named tiny_mce.js.
Older documentation: http://www.tinymce.com/wiki.php/TinyMCE3x:TinyMCE_3.x
This text by www.zenphoto.org is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Code examples are released under the GPL v2 or later license