glFusion Wiki

Site Tools


glFusion Advanced Editor

glFusion supports multiple WYIWYG advanced editors. Out of the box, it comes with CKEditor.

CKEditor can be customized to meet your specific needs.

If you prefer, there is a TinyMCE plugin available as well.

CKEditor Toolbars

glFusion comes with 2 pre-configured toolbars for the advanced editor:

Basic Toolbar - used for comment entry, contact users, and other simple editing tasks.

Standard Toolbar - used for story entry or static page edits.

CKEditor Configuration

The main CKEditor configuration file is located in the public_html/ckeditor/ directory and is called config.js. This is where the 2 default toolbars are defined.

Each edit operation (i.e.; enter a story, enter a comment, etc.) has a template file (located in private/plugins/ckeditor/templates) that controls the CKEditor functions for that operation.

For example, when entering a story, the ckeditor_story.thtml template is used. In this template, is the configuration for the operation of entering a story. In this example, the following line:

                   toolbar: 'standard',

defines which tool bar to use for this operation.

You can completely override the standard configuration and define a new tool bar. Here is an example from the Forum plugin's CKEditor template:

      function loadEditor(id) {
          var instance = CKEDITOR.replace( id, {
          	toolbar: [
          		{ name: 'document', items: [ 'Source' ] },
          		[ 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo' ],
          		{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] },
          		{ name: 'forum', items : [ 'Smiley','NumberedList', 'BulletedList', 'Image','SpecialChar' ] },
              contentsCss: '{site_url}/css.php?t={theme}',
              bodyClass: 'forumpost',
              removePlugins: 'elementspath',
              resize_enabled: false,
           } );
           return instance;

In this example, we define a new toolbar, with the specific menu items we want for the Forum plugin.

Adding Plugins

CKEditor has many plugins available to extend the functionality of the editor. You are free to add any plugins you find useful.

To install a new plugin into CKEditor, follow these steps:

Download the plugin distribution
Download additional CKEditor plugins from the CKEditor Site.
Copy the plugin to your site
Copy the plugin files to public_html/ckeditor/plugins/ directory. You should create a new directory under plugins that is the name of the plugin to install - copy all of the plugin's files to this directory.
Update the CKeditor configuration to use the new plugin
The CKEditor plugin also uses template files to control the behaviour in specific areas of glFusion, so you will need add your new plugin to the appropriate template files:

  • ckeditor_story.thtml - used when editing stories
  • ckeditor_block.thtml - used when editing blocks
  • ckeditor_comment.thtml - used when entering / editing comments
  • ckeditor_contact.thtml - used when emailing a user (Contact User)
  • ckeditor_email.thtml - used when emailing a story
  • ckeditor_sp.thtml - used when creating / editing static pages
  • ckeditor_submitstory.thtml - used for user submitted stories

You will need to update the extraPlugins line in each template file where you want the plugin to be available. Add the new plugin to the existing list like this:

extraPlugins: 'mediagallery,youtube2,vimeo,newpluginhere',
glfusion/editor.txt · Last modified: 2017/04/12 21:09 (external edit)

Page Tools