Cockpit CMS addon that extends core functionality by introducing the possibility to define editor format modes to the WYSIWYG field (based on tinymce editor).
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Controller
assets
views
LICENSE
README.md
admin.php
bootstrap.php

README.md

WYSIWYG Editor Formats

This addon extends Cockpit CMS core functionality by introducing the possibility to define editor format modes to the WYSIWYG field (based on tinymce editor). When configuring a WYSIWYG field, cockpit already provides the possiblity to extend the default settings on the field definition:

{
  "editor": {
    "height": 500,
    "menubar": "edit insert view format",
    "plugins": [
        "link lists preview hr anchor",
        "code fullscreen",
    ]
  }
}

that is quite interesting, but can be painful and confusing when dealing with many fields, so that's where this addon can help, you just need to configure your formats (e.g. Basic, Advanced, etc..) and use the format name on your field instead of the configuration:

{
  "editor": {
    "format": "Basic",
  }
}

Installation

  1. Confirm that you have Cockpit CMS (Next branch) installed and working.
  2. Download zip and extract to 'your-cockpit-docroot/addons' (e.g. cockpitcms/addons/EditorFormats)
  3. Access module settings (http://your-cockpit-site/editor-formats) and confirm that page loads.

Configuration

The Addon doesn't require any extra configuration. When enabled, it will be available to the admin with all features.

Permissions

There is only one permission (manage) that can be used to manage the formats.

Usage

Create the formats you need, in most of the cases you only need a Basic format with minimum features:

Basic Format

Edit your YYSIWYG fields and set the format:

{
  "editor": {
    "format": "Basic",
  }
}

And when editing a collection that is using that field your editor should look like below:

Basic format example

However if you need more features from the editor create a new format (e.g. Advanced):

Advanced Format

Edit your YYSIWYG fields and set the format:

{
  "editor": {
    "format": "Advanced",
  }
}

And when editing a collection that is using that field your editor should look like below:

Advanced format example

Demo

Addon screencast

Copyright and license

Copyright 2018 pauloamgomes under the MIT license.