ckeditor

CKEditor meets garp

Model configuration

The CKEditor can only be used with fields with type html. By default these still show the 'old' rich text editor. To enable the CKEditor plugin for a field it should have a wysiwyg attribute.

• if $field->wysiwyg is not set or is set to false. The 'old' rich text editor will be used.
• If $field->wysiwyg is set to true the CKEditor will be shown without the image and video browser.
• If $field->wysiwyg is set to rich the CKEditor will be shown with the image browser. The video browser will also be added, but only when window.VIDEO_WIDTH is defined. This can be done by configuring the following in assets.ini:

video.template.w = 740
video.template.h = 462

Example:

models/config/article.json

{
  "inputs": {
    "body": {
      "type": "html",
      "wysiwyg": "rich"
    }
    ...
  }
  ....
}

Interesting files

• garp/public/js/ckeditor Third party CKEditor library files
• garp/public/js/extux/ext.ux.form.ckeditor.js Attaches CKEditor to Garp
• garp/public/js/ckeditor/plugins/garpimages Our own garp image picker plugin
• garp/public/js/ckeditor/plugins/garpvideos Our own garp video picker plugin
• garp/public/overrides.js Sets Garp.imageTpl and Garp.videoTpl. These define the html returned by our image or video picker.

Special window. parameters

• window.WYSIWYG_CSS_URL Path to css file to use in wysiwig editor. Ideally this would only include those CSS definitions relevant to the content added with this editor. This is best added to cms-stylesheets.phtml (to keep it variable). For example: window.WYSIWYG_CSS_URL = '<?php echo $this->assetUrl('cms-wysiwyg.css') ?>';
• window.VIDEO_WIDTH If this is defined, the garp plugin allows videos to be embedded. This is used in Garp.videoTpl to customize the placement of video embeds. This is defined in content/admin.phtml.
• window.WYSIWYG_EDITOR_CONFIG can be used to extend CKEditor config on the application-side. An example:

window.WYSIWYG_CKEDITOR_CONFIG = {
    // Allow only these tags (=true for all of them)
    allowedContent: true,
	extraAllowedContent: 'p(*)',
	customConfig: '',
    format_tags: 'p;h1;h2;h3;h4',

    // Available buttons
    toolbar: [
        ['Bold', 'Italic', '-', 'RemoveFormat'],
        ['Link', 'Unlink'],
        ['NumberedList', 'BulletedList', 'Blockquote', 'Format'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo', '-', 'Source', '-', 'CharCount'],
		['Styles']
    ],

	stylesSet: [
		{
		    name: 'Default', element: 'p'
		},
		{
		    name: 'Intro', element: 'p', attributes: {
				'class': 'intro'
			}
		},
		{
			name: 'Alert', element: 'p', attributes: {
			    'class': 'alert'
			}
		}
	],

    // Disable CKEditor's own image plugin
    removePlugins: 'image'
};

Further configuration

• Changing the allowed tags can be done in garp/public/js/extux/ext.ux.form.ckeditor.js by changing config.CKEditor.allowedContent. For info on available tags look at CKEditors docs.
• Changing the available buttons is also done in garp/public/js/extux/ext.ux.form.ckeditor.js, by changing config.CKEditor.toolbar. For available buttons, look at CKEditors docs.

Updating CKEditor

When updating CKEditor there are some things to notice

• The file garp/public/js/ckeditor/ckeditor.js should contain the main CKEditor scripts
• The plugins garp/public/js/ckeditor/plugins/garpimages, garp/public/js/ckeditor/plugins/garpvideos, garp/public/js/ckeditor/plugins/charcount should be added again and will have to be checked to work with future versions of CKEditor
• In garp/public/js/ckeditor/plugins/images/dialog/image.js we have manually removed the alignment form fields to prevent this interfering with the alignment set by our own images plugin. Harmen says: after upgrading CKEditor to 4.4.3 this appears to not be a problem anymore. Awesome! Keeping this for future reference though.

The CKEditor was added by Larix Kortbeek (larixk@gmail.com) send an email if you have further questions.