WYSIWYG editor for Flarum

What is it?

Flarum is a beautifully designed and aesthetically pleasing modern forum software.

Quill is a powerful free and open source online rich text editor with extensive documentation.

This extension integrates Quill into Flarum.

Here is a screenshot

I have a flarum instance with the WYSIWYG extension installed. Click on the button below to play with it.

Go Play!

Username: demo
Password: demo1234

How to install it?

Please note that at this point it is mostly a proof of concept. So, the intended audience is developers. Having said that, from your flarum folder run.

composer require sledov/flarum-ext-quill

Then enable Quill Editor extension from your Admin control panel. I also recommend disabling BBCode and Markdown extensions, since Quill will be taking care of rich text editing from this point.

Github repository is here.

Why am I doing this?

My primary criteria when evaluating forum software is whether it has a WYSIWYG editor or not. While I am personally OK with markdown (and I am writing this page using markdown), I consider this to be a definitive sign of software maturity. And in my experience, user-friendly editing increases forum participation, it brings in non-technical people. So it is good for your forum.

By providing this example I hope to increase WYSIWYG editing adoption among flarum users. And to find out how many people also think that this is important.

How is it done?

Default Flarum editor is replaced with a custom QuillEditor component.

js/forum/src/main.js

extend(ComposerBody.prototype, 'init', function init() {
    this.editor = new QuillEditor({
        submitLabel: this.props.submitLabel,
        placeholder: this.props.placeholder,
        onchange: this.content,
        onsubmit: this.onsubmit.bind(this),
        value: this.content()
    });
});

The view function of this component defines <div> element where Quill editor will be subsequently rendered.

js/forum/src/components/QuillEditor.js

view() {
    const classNames = 'Composer-flexible ' + this.props.className;
    return (
        <div className="TextEditor">
            <div className={classNames} config={this.configEditor.bind(this)} />
            ...
        </div>
    )
}

After real DOM element for this <div> is created, configEditor function creates a Quill editor (a javascript class instance). Take a look at getting started example on quilljs.com site.

configEditor(element, isInitialized) {

    ...

    this.quill = new Quill('.' + this.props.className, {
        modules: {
            toolbar: true
        },
        placeholder: this.props.placeholder || '',
        readOnly: !!this.props.disabled,
        theme: 'snow'
    });

    this.quill.clipboard.dangerouslyPasteHTML(0, this.value());
    this.quill.on('text-change', this.oninput.bind(this));

}

Two last lines insert html into the editor, and hook "text-change" event of the editor to "oninput" function of our component.

Quill natively stores rich text as json with some formatting info. And we want to deal with html. So we just fetch it from the root <div> element and update "value" property of our component every time user presses a key.

oninput() {
    let html = this.quill.root.innerHTML;
    this.value(html);
    ...
}