Quill Content Editor

This module replaces Scriptor's native Markdown editor with Quill rich text editor. Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Module Description

Scriptor comes by default with a Markdown editor for creating page content. However, not everyone likes markdown, and sometimes circumstances require rich, visual content control. Quill uses Rich Text, is a type of formatting used by millions of casual authors who want to see their results instantly. The Quill Content Editor module replaces Scriptor's native Markdown editor and is available for Scriptor 1.4.6 and higher.

Install Instruction

Download the zip file, unzip it and upload the complete folder QuillContentEditor to your server in the directory site/modules/.

Open your custom.scriptor-config.php file. Enable HTML output by setting it to true and add also the following configuration to the modules and hooks section:

/**
 * Enable HTML tags in page content output
 * 
 * @var bool
 */
'allowHtmlOutput' => true,

'modules' => [
    'QuillContentEditor' => [
            'menu' => '',
            'position' => 100,
            'active' => true,
            'auth' => true,
            'autoinit' => true,
            'path' =>  'modules/QuillContentEditor/Quill',
            'class' => 'Quill',
            'display_type' => [],
            'description' => 'Quill content editor - Scriptor\'s extension module.'
    ]
],
'hooks' => [
    'Pages::beforeRenderEditorPage' => [
        [
            'module' => 'QuillContentEditor',
            'method' => 'beforeRenderPageEditor'
        ]
    ],
    'Pages::afterRenderEditorContentField' => [
        [
            'module' => 'QuillContentEditor',
            'method' => 'renderEditorContentField'
        ]
    ],
    'Pages::afterCheckAction' => [
        [
            'module' => 'QuillContentEditor',
            'method' => 'checkAction'
        ]
    ],
    'Pages::afterRenderEditorPage' => [
        [
            'module' => 'QuillContentEditor',
            'method' => 'createImageSelector'
        ]
    ],
    'Pages::beforeSavePage' => [
        [
            'module' => 'QuillContentEditor',
            'method' => 'prepareContentLinks'
        ]
    ],
    'Pages::afterSavePage' => [
        [
            'module' => 'QuillContentEditor',
            'method' => 'replaceTimestampPlaceholders'
        ]
    ]
]

Log in to the Scriptor editor area, open a page in edit mode, if the installation was successful you should see Quill editor instead of the default editor.

CSS

By the way, the formatting in the Edit Page section of your Scriptor editor does not really match how your content looks on your frontend website. To style content created with the editor in the frontend correctly, you must adjust the stylesheet for your frontend theme:

.ql-align-center {
    ...
}

.ql-align-right {
    ...
}

.ql-align-justify {
    ...
}

.ql-syntax {
    ...
}

.ql-float-left {
    ...
}