User guide

How to create custom TinyMCE configurations

    Note: This already is for Zenphoto 1.4.6 featuring TinyMCE 4. On the 1.4.5.x and earlier Zenphoto included the version 3 of TinyMCE. There the folder must be tiny_mce. The js file was named tiny_mce.js.

    1. Create in the root plugins folder 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 a slightly 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, e.g. add a prefix like my or anything else you wish to use.
    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
    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 an existing content_css parameter or add a new one as the last entry on your config file:
      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 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 then select from the drop down selects your new tinymce4 config files and apply (save).
    Your tinymce4 editor for your articles etc should now be working and using your own config files and content.css file. You find also an 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.

    Creative Commons LicenseThis text by www.zenphoto.org is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

    For questions and comments please use the forum or discuss on the social networks.

    Related items