How to customize the editor

by mpelmmc 25th June 2019, 09:59

How to customize the editor

Yes, we know, it happens. You're designing your own forum with a dark theme. You went straight towards editing the page of the topics, or the page of creating one. And there it is. The editor. You start fighting yourself with the CSS. You add an !important here, and add another !important there. When you finally turn the white editor into a color you find yourself nice, you realize that the icons are images, and they look awful... and they don't quite fit in your black skin. Don't worry, your pain will be over. We got you covered.

As some of the basic aspects of the skin when it comes to the buttons or the BBCode editor are very easy to edit, changing the icons of the buttons or customize in WYSIWYG may get very challenging.

In the upcoming tutorial, we will learn to modify every aspect of the Forumotion editor. We will do it through HTML, CSS, and JavaScript.

Our goals

We will learn to modify the following:

The buttons, groups of buttons and editor overall.
The icons of the buttons, using Font Awesome.
The writing area in BBCode mode.
The writing area in WYSIWYG mode.

Requirements

Ease with the ACP of Forumotion.
Medium/advanced knowledge of templates and CSS.
Having Font Awesome installed in your forum.

Installation

The following JS, which must be added to your forum. Mark it as "All pages" through the JavaScript management. It will replace all of the icons of the editor into the equivalents icons of Font Awesome. Besides that, it will allow to customize it via CSS when it comes to the WYSIWYG mode.

Code:: !function() { const settings = { css: ` body { background: white; } body, code:before, html, p, table { font-size: 15px; color: black; font-family: Verdana, sans-serif; line-height: 1.8; } `, // CSS in JS is a bad habit, but its the only way. icons: { bold: 'bold', italic: 'italic', underline: 'underline', strike: 'strikethrough', left: 'align-left', center: 'align-center', right: 'align-right', justify: 'align-justify', bulletlist: 'list-ul', orderedlist: 'list-ol', horizontalrule: 'grip-lines', quote: 'quote-right', code: 'terminal', faspoiler: 'toggle-on', fahide: 'eye-slash', table: 'table', servimg: 'upload', image: 'images', link: 'link', youtube: ['fab', 'fa-youtube'], dailymotion: 'video', flash: 'file-video', headers: 'heading', size: 'text-height', color: 'palette', font: 'font', removeformat: 'undo', more: 'ellipsis-h', subscript: 'subscript', superscript: 'superscript', fascroll: 'arrows-alt-h', faupdown: 'arrows-alt-v', farand: 'dice', faroll: 'dice-six', emoticon: 'smile', date: 'calendar', time: 'clock', pastetext: 'paste', source: 'code', }, }; function replaceButtons(container) { Object.keys(settings.icons).forEach(k => { const button = container.querySelector('.sceditor-button-' + k), icon = document.createElement('I'); if (!button) return; icon.classList.add(...(Array.isArray(settings.icons[k]) ? settings.icons[k] : ['fas', 'fa-' + settings.icons[k]] )); button.removeChild(button.firstElementChild); button.appendChild(icon); }); } function appendStylesheet({contentDocument}) { const style = contentDocument.createElement('STYLE'); style.innerHTML = settings.css; contentDocument.head.appendChild(style); } function ready(e) { const container = document.getElementById('textarea_content'); if (!container) return; replaceButtons(container); const iframe = container.querySelector('iframe'); if (!iframe) return; appendStylesheet(iframe); } document.addEventListener('DOMContentLoaded', ready); }();

Customize the icons

The previous code has changed all the icons into the Font Awesome ones. That's why the editor might look a bit ugly by default. The following CSS (that you MUST add to your forum), you will center the icons.

Code:: .sceditor-container .sceditor-button { display: flex; align-items: center; justify-content: center; text-indent: 0; color: #333; } .sceditor-container .sceditor-button.disabled { color: #AAA; }

	In case the icons won't show up, that will mean you didn't add this previous CSS, and you must do it so the icons will show up, and overall, everything works the way its supposed to.

Also, with this CSS you will be able to change the color of the icons in order to adequate it to your forum. Just change the property color of the first selector by the color you want

The second selector is used to set the color of the deactivated buttons. For instance, the "Eliminate format" button remains deactivated until you select text.

Change the icons

The code you have installed contains mostly similar Font Awesome icons to the ones Forumotion uses. Even though the code allows you to change them, we highly recommend you to leave them as they are, as it will be way easier to understand for your potential members coming from other forums

However, if you still want to change an icon, there is an icon section at the beginning of the code with a bunch of lines afterward. In these lines, each icon is defined and its equivalent of Font Awesome this way

nameOfTheButton:'nameOfTheFontAwesomeIcon',

Leave the left side untouched since the code includes every button available in the edit. The only thing you have to do is change whats between quotation marks.

Note that the solid Font Awesome style is the one being used by default. If you want to use another style or another icon library, you may put instead of the text string and array with a list of classes. For instance:

youtube: ['fab', 'fa-youtube'],

This last code will generate the following:

<i class="fab fa-youtube"></i>

Similarly, if we used the normal method:

quote:'quote-right',

We'd obtain the following code:

<i class="fas fa-quote-right"></i>

Since the icons of type solid are the most common, it is easier to do it in the previous way, although you could also do it from the array method. The following code would be equivalent to the previous one:

quote:['fas', 'fa-quote-right'],

WYSIWYG Editor

In order to customize WYSIWYG editor, you already know that as it is an iframe, the CSS of your forum won't affect inside it.

With this last code, you will be able to add the CSS in the iframe, allowing you to edit stuff like the background color, font, text color and everything you could imagine.

Whatever CSS you want to include in the iframe, you have to add it in this last JavaScript. The regular rule, adding CSS inside a JS is a very bad habit, and this case doesn't differ from the rest, but we are doing it because it is the only way.

You have to add the CSS in the css part of the code, at the beginning. Actually, we added a CSS which covers the most asked stuff.

Code:: body { background: white; } body, code:before, html, p, table { font-size: 15px; color: black; font-family: Verdana, sans-serif; line-height: 1.8; }

You may use the selector body to change the background of the editor. The other one is used to change stuff like fonts, sizes...

If you want to use a font from Google Fonts, it won't work as you already installed it in your forum, and remember that the CSS of your forum won't affect iframes? It happens the same way with fonts. You will have to put the necessary CSS for the fonts next to the previous one.

Other customizations

The rest of the modifications that you may want to make to the editor you will surely already know, since they can be done with regular CSS. To complete this tutorial, We will include the most common selectors:

#textarea_content .sceditor-container: The editor's main container.
.sceditor-container .sceditor-toolbar: The container for all the buttons.
.sceditor-container .sceditor-group: Button groups.
.sceditor-container .sceditor-button: The buttons.
#textarea_content .sceditor-container iframe: The writing field in WYSIWYG mode.
#textarea_content .sceditor-container: The writing field in BBCode mode.

Some advice

We want to give you some bits of advice when it comes to modifying the editor:

Use big fonts, healthy line spacing, and colors with good contrast. Note your users will write here. Try to not hurt their eyes.
Make the style of the WYSIWYG and BBCode match. We can't think of something more annoying than switching between modes, and the text moving because in a mode the textarea has more padding than the iframe.
Don't change the default icons. This way every user who potentially joins another forum with this same code will be familiar with it, as the icons will be the same.