Wysiwyg configuration - Editorformats and getImage plugin
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:
- The default is ugly
- no list items by default --> Why?
- I want to force users, to use assets instead of images
- different editors for different use cases
- use the getImage route to resize images automatically (my addon)
- use video link fields instead of embedding them directly (my addon)
I use the short way and use the cli with git commands again:
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.
Author: Paulo Gomes
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:
Now I have to add a small change to my field definitions:
Now I can work with the editor :-)
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.
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:
- width: 800
- height: auto
- method: bestFit
- quality: 80
For a cropped image use the thumbnail option: