CpMultiplane Demo

Wysiwyg configuration - Editorformats and getImage plugin

2019-06-24 15:53

Personally, I prefer to write in markdown, but clients don't. That's why I practice their user experience by forcing me to use this dumb wysiwyg editor - and there is another reason, to use it: I wrote some TinyMCE plugins already, that I need. Writing them for the markdown editor is on the to-do-list... Some reasons to use a modified editor:

Installation

I use the short way and use the cli with git commands again:

cd ~/html
git clone https://github.com/pauloamgomes/CockpitCms-EditorFormats.git cockpit/addons/EditorFormats

But you can copy and paste the EditorFormats from into cockpit/addons/EditorFormats by yourself.

Source: https://github.com/pauloamgomes/CockpitCms-EditorFormats
Author: Paulo Gomes

Configuration

Now I have to configure the editor formats. Go to Settings --> Editor Formats, click the "Add" button and apply your changes. These are my settings:

editorformats-settings-1.png

editorformats-settings-2.png

Collection configuration

Now I have to add a small change to my field definitions:

posts-field-settings-1.png

posts-content-wysiwyg-settings.png

Now I can work with the editor :-)

Comparison

Before:

wysiwyg-without-editorformats.png

After:

wysiwyg-with-editorformats.png

Much better now.

The getImage plugin

Normally, clients don't resize their 10 megapixel photos before uploading them to the website. This is a problem and embedding these pictures with the default options leads to giant images everywhere. I already implemented the route /getImage?src=asset_id to embed images in CpMultiplane with resized pictures.

Click on the image icon.

getImage-icon.png

Now a modal pops up. It uses the assets manager, so you can upload and change image settings, too. To resize the image or lower the quality, change the settings at the bottom. The defaults are:

getImage-resize.png

0037_raffael-jesche_cc-by-sa-3.jpg

For a cropped image use the thumbnail option:

getImage-thumbnail.png

0037_raffael-jesche_cc-by-sa-3.jpg

Version 0.1.3 - The current branch "master" is a few commits ahead from 0.1.3.