（laravel5.4可用）轻量且美观的富文本编辑器quill

上效果：

quill效果图

1.安装

npm install quill

你也可以参见官网，得到更多安装办法

2.打开resources/assets/js/bootstrap.js，并加入

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
    //引入quill
    window.Quill = require('quill');
} catch (e) {}

别忘记执行npm run dev让此生效

3.引入quill样式css：在头部或者编辑器所在文件引入

<link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet">

4.在需要显示编辑器的地方，加入以下代码

<div id="editor" style="min-height: 200px;">
</div>

<!-- 如果此编辑器在form表单里，可用textarea获取上面editor的值，这样就可以提交表单了，具体参考以下js-->
 <textarea name="content" id="content" style="display: none"></textarea>

5.在编辑器所在页面加入以下js

<script>

        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            ['link', 'image','video', 'formula'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            [{ 'align': [] }],

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'direction': 'rtl' }],                         // text direction
            ['clean']                                        // remove formatting button
        ];

        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow',
        });

        quill.getModule('toolbar').addHandler('image', showImageUI);

        var showImageUI = function(image, callback) {
            var range = quill.getSelection();
            var value = prompt('image URL');
            this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
        };

        quill.on('editor-change', function(eventName, ...args) {
           $('#content').val(quill.root.innerHTML)
           //console.log($('#content').val())
        });
    </script>