README

Bootstrap 简单编辑器插件

安装

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

使用示例

例如使用 input-group

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

...并通过脚本初始化

<script type="text/javascript">
    $(document).ready(function () {
    
        // For init plugin use:
        $('#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',
            highlight: true,
            debug: false
        });
        
        // To destroy plugin use:
        $('#editor').wysiwyg('destroy');
        
    });
</script>

选项

状态和版本

• v.1.1.4 - Gulp，添加了 destroy 方法
• v.1.1.3 - 修复了页脚中的路径信息
• v.1.1.2 - 添加了视觉块视图模式，修复了一些错误
• v.1.1.1 - 错误修复
• v.1.1.0 - 插件正在开发中