Feature: Wysiwyg Editor (Trumbowyg)

This software uses the excellent free rich text editor plugin Trumbowyg by Alexandre Demode. This offers better text formatting to enhance your information / info / posts etc. Please read below for a brief look at how the editor works.

Most of the buttons will seem familiar if you know HTML. If you hover your cursor over any buttons you will see a description of what each button does.

To apply formatting, highlight the text first and make your button selection. You can click a button first, but nothing will happen until you start typing. By selecting the text first you see an immediate preview.

At this point it is worth mentioning the code view button, this enables advanced users to switch to the code view to enter HTML code manually.


This has many benefits including HTML not supported by the editor.

Used for showing a list of items. If you have formatted the text already, this will be retained during the bullet points/list as you hit the return key. Leave point blank to escape onto a new line.

Adding an hyperlink is easy via the link option. Likewise, enter an image url to add an image to your text.


You can resize the image by entering code in the code view area.


You could also add a class name and reference that class in a css file.

Adding multimedia content is super easy via copy/paste. Trumbowyg supports the NoEmbed web service to retrieve the exact formatting code for your post. This has the benefit of supporting many services, including YouTube, Soundcloud, Amazon & Twitter. More info here.

To load content, simply copy and paste the relevant url into the text area. Here is a YouTube example copying and pasting the following:

https://www.youtube.com/watch?v=2S24-y0Ij3Y


This example using the following SoundCloud url:

https://soundcloud.com/user-151356257/momoland-baam


Anything added is wrapped in a responsive class for all screen sizes.

The remove formatting button removes formatting (bold, italic, colors etc) from all selected text.

Undo/redo is a standard feature of most editors.

Click the fullscreen button for a larger editing area.

Data is sanitized on view. Only allowed HTML tags are parsed, these are set in the following file:

control/classes/system/class.tags.php

If you modify the template code to allow other HTML tags OR use the WYSIWYG code view and enter your own code, you need to add the new tags to the allowed list. Filters are set for frontend (if supported) and admin display, see the notes in the class.tags.php file.

More plugins are offered on the Trumbowyg website. Plugins should be added to the following folder...

admin/templates/js/plugins

..and triggered in the following file as per the plugin instructions.

templates/js-php/wysiwyg.php