bootstrap-wysiwyg-editor v1.0.0

Bootstrap WYSIWYG

Simple editor plugin for Bootstrap

Installation

$ npm install bootstrap-wysiwyg-editor
$ bower install bootstrap-wysiwyg-editor
$ yarn add bootstrap-wysiwyg-editor
$ composer require bootstrap-wysiwyg-editor

Usage example

For example use the input-group:

<div class="form-group">
    <label class="control-label" for="editor">Message:</label>
    <textarea id="editor" class="form-control" rows="3"></textarea>
</div>

... and init from script:

<script type="text/javascript">
    $(document).ready(function () {
        $('#editor').wysiwyg({
            toolbar: [
                ['mode'],
                ['operations', ['undo', 'rendo', 'cut', 'copy', 'paste']],
                ['styles'],
                ['fonts', ['select', 'size']],
                ['text', ['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'font-color', 'bg-color']],
                ['align', ['left', 'center', 'right', 'justify']],
                ['lists', ['unordered', 'ordered', 'indent', 'outdent']],
                ['components', ['table']],
                ['intervals', ['line-height', 'letter-spacing']],
                ['insert', ['emoji', 'link', 'image', 'video', 'symbol']],
                ['special', ['print', 'unformat', 'clean']],
            ],
            fontSizes: ['8px', ... '48px'],
            fontSizeDefault: '12px',
            fontFamilies: ['Open Sans', 'Arial', ... 'Times New Roman', 'Verdana'],
            fontFamilyDefault: 'Open Sans',
            emojiDefault: [...],
            symbolsDefault: [...],
            colorPalette: [...],
            mode: 'editor',
            debug: false
        });
    });
</script>

Options

Status and version

• v.1.1.1 - Bugfix
• v.1.1.0 - Plugin in progress development