Skip to content
WYSIWYG editor plugin for Bootstrap framework
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Added visual blocks view mode, fixed some bugs Mar 25, 2020
examples
src Added visual blocks view mode, fixed some bugs Mar 25, 2020
.gitignore
Gruntfile.js Bugfix Apr 8, 2019
LICENSE
README.md Added visual blocks view mode, fixed some bugs Mar 25, 2020
bower.json Added visual blocks view mode, fixed some bugs Mar 25, 2020
composer.json
package.json Added visual blocks view mode, fixed some bugs Mar 25, 2020

README.md

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', 'visual', '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.2 - Added visual blocks view mode, fixed some bugs
  • v.1.1.1 - Bugfix
  • v.1.1.0 - Plugin in progress development
You can’t perform that action at this time.