How to create custom TinyMCE configurations May 21, 2011 / Updated: Dec 25, 2018
- In the root
plugins
folder create a new folder calledtinymce4
- Inside the new tinymce4 folder create a new folder called
config
- Go to
zp-core/zp-extensions/tinymce4/config
and 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
/plugins/tinymce4/config/
folder - 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.
- Open the new renamed config file and ensure the first javascript line is pointing to the correct location of the normal
tinymce.min.js
file, by default this should be <script type="text/javascript" src="<?php echo WEBPATH . "/" . ZENFOLDER . "/" . PLUGIN_FOLDER; ?>/tinymce4/tinymce.min.js"></script> - 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.css
file in your theme folder and place that in your theme folder and then edit it to your desired requirements and styles. - Upload the new
tinymce4
folder (and its contents) in theplugins
directory and your new themecontent.css
file 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).
Your tinymce4 editor for your articles etc. should now be working and be using your own config files and
content.css
file. 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
For questions and comments please use the forum or discuss on the social networks.