wdmg/bootstrap-wysiwyg-editor

Simple WYSIWYG editor plugin for Bootstrap 3

1.1.1 2019-05-29 12:55 UTC

README

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

Name Type Description
toolbar array List of available editor features.
fontSizes array List of available font sizes.
fontSizeDefault string The default font size.
fontFamilies array List of font families.
fontFamilyDefault string Default font.
emojiDefault array List of emojis.
symbolsDefault array List of characters (spec. symbols).
colorPalette array Color picker.
mode string The default editor mode.
debug boolean Flag if debugging is required.

Status and version

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