User guide

How to create custom TinyMCE configurations May 21, 2011 / Updated: June 12, 2022

Categories:

Author:

  1. In the root plugins folder create a new folder called tinymce4
  2. Inside the new tinymce4 folder create a new folder called config
  3. Go to zp-core/zp-extensions/tinymce4/config and copy any or all of the existing config files to get you started.
  4. Note there are slight differences between config files for gallery items, Zenpage CMS items and comments.
  5. Place the copied files in your new /plugins/tinymce4/config/ folder
  6. 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.
  7. 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>
  8. Make any further edits you wish to make within the config file.
  9. 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
  10. 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.
  11. Upload the new tinymce4 folder (and its contents) in the plugins directory and your new theme content.css file to your zenphoto site.
  12. 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://archive.tinymce.com and have a look at some of the examples to see what you can do: https://www.tiny.cloud/docs-3x/reference/Configuration3x/

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: https://www.tiny.cloud/docs-3x/api/member_tinyMCE.html/

Creative Commons LicenseThis 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.

Tags:

Related items