plainblack.com
Username Password
search
Bookmark and Share
Subscribe

TinyMCE overview

This does NOT cover the specifics of TinyMCE, but just how it pertains to webgui. This wiki is based on my investigations webgui 7.5.24. This is by NO means complete, but hopefully accurate and a good starting point for those interested. Please contribute!

Introduction

TinyMCE is what is used for the Rich Edit in webgui. It's source files are stored in the WebGUI path under www/extras/tinymce and www/extras/tinymce-webgui. You can find the version of TinyMCE by visiting the following link on your WebGUI site -- yourdomain.com/extras/tinymce/changelog.txt (e.g., http://www.webgui.org/extras/tinymce/changelog.txt)

javascripts

TinyMCE is a library of js files, but for each page that has a tinymce editor, the following files are referenced:

  • <script src="/extras/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
  • <script src="/extras/tinymce-webgui/callbacks.js" type="text/javascript"></script>

File Locations 

  • /data/WebGUI/www/extras/tinymce/ - this is the actual install of TinyMCE v3.0.5
  • /data/WebGUI/www/extras/tinymce2/ - this is the actual install of TinyMCE v2.1.1.1.  developer on chat confirmed that these files are uncessary and can be removed.
  • /data/WebGUI/www/extras/tinymce-webgui/ is the setup files for the following plugs specific to webgui:
    • insert webgui macro,
    • insert webgui image
    • insert link to webgui
    • spell checker (not configured by default)

how it's called

/data/WebGUI/lib/WebGUI/Asset/RichEdit.pm is where the inital values for the TinyMCE editor is defined:

  • "plugins" : "safari,contextmenu,-wgpagetree,advhr,-wginsertimage,-wgmacro,searchreplace,table,preview"
  • "mode" : "exact"
  • "force_br_newlines" : false
  • "nowrap" : false
  • "theme_advanced_source_editor_height" : "500"
  • "theme_advanced_resizing" : true
  • "theme_advanced_statusbar_location" : "bottom"
  • "relative_urls" : false
  • "theme_advanced_source_editor_width" : "600"
  • "wg_userIsVisitor" : false
  • "remove_script_host" : true
  • "auto_reset_designmode" : true
  • "theme" : "advanced"
  • "theme_advanced_buttons3" : "replace,tablecontrols,visualaid,code,cleanup,preview"
  • "preformatted" : false
  • "theme_advanced_buttons1" : "bold,italic,justifyleft,justifycenter,justifyright,justifyfull,outdent,indent,sub,sup,formatselect,removeformat"
  • "language" : "en"
  • "elements" : "description_formId"
  • "content_css" : "/extras/tinymce-webgui/defaultcontent.css"
  • "theme_advanced_buttons2" : "bullist,numlist,link,wgpagetree,anchor,unlink,advhr,image,wginsertimage,charmap,wgmacro"
  • "ask" : false
  • "force_p_newlines" : true
  • "remove_linebreaks" : true
  • "valid_elements" : "*[*]"
  • "directionality" : "ltr"
  • "theme_advanced_toolbar_location" : "bottom"
  • "urlconverter_callback" : "tinyMCE_WebGUI_URLConvertor"
  • "cleanup_callback" : "tinyMCE_WebGUI_Cleanup"

NOTE: In this case, the theme is "advanced". So the advanced theme is the one you want to modify to make changes to the font-family, etc. See http://wiki.moxiecode.com/index.php/TinyMCE:Configuration for more info.

The RichEdit asset is also where the three plugins are loaded:

  • tinymce.PluginManager.load('wgmacro', '/extras/tinymce-webgui/plugins/wgmacro/editor_plugin.js');
  • tinymce.PluginManager.load('wginsertimage', '/extras/tinymce-webgui/plugins/wginsertimage/editor_plugin.js');
  • tinymce.PluginManager.load('wgpagetree', '/extras/tinymce-webgui/plugins/wgpagetree/editor_plugin.js');

Rich Editor

A default install of WebGUI includes 2 pre-configured Rich Editor instances:

  • Content Manager's Rich Edit
  • Forum Rich Edit

These assets live in root > import node > rich edit.

You can customize the default rich editors by editing these assets. As with templates, it is always a better idea to make a copy of the default asset before making your changes, otherwise future versions of WebGUI will overwrite your changes. Once you have copied the rich editor you want to customize and made your changes, change the default used by Assets in Settings > UI > Default Rich Editor.

Keywords: richedit tinymce

Search | Most Popular | Recent Changes | Wiki Home
© 2017 Plain Black Corporation | All Rights Reserved