前端富文本编辑器 quilljs使用

quilljs 初始化

html:

<!-- quill css 和 js引入-->
<link href="css/quill.snow.custom.css" rel="stylesheet">  
<script src="js/quill.js"><script>

<!-- toolbar 部分-->
<div class="ql-toolbar" id="toolbar">
    <span class="ql-formats">
        <select class="ql-font" title="字体"></select>
        <select class="ql-size" title="字号"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-bold" title="加粗"></button>
        <button class="ql-italic" title="斜体"></button>
        <button class="ql-underline" title="下划线"></button>
        <button class="ql-strike" title="删除线"></button>
    </span>
    <span class="ql-formats">
        <select class="ql-color" title="字体颜色"></select>
        <select class="ql-background" title="背景颜色"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-script" value="sub" title="上标"></button>
        <button class="ql-script" value="super" title="下标"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-header" value="1" title="一级标题"></button>
        <button class="ql-header" value="2" title="二级标题"></button>
        <button class="ql-blockquote" title="引用"></button>
        <button class="ql-code-block" title="代码"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-list" value="ordered" title="有序列表"></button>
        <button class="ql-list" value="bullet" title="无序列表"></button>
        <button class="ql-indent" value="-1" title="左偏移"></button>
        <button class="ql-indent" value="+1" title="右偏移"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-direction" value="rtl" title="输入方向"></button>
        <select class="ql-align" title="对齐方式"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-link" title="超链接"></button>
        <button class="ql-image" title="插入图片"></button>
        <button class="ql-video" title="插入视频"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-clean" title="清除格式"></button>
    </span>
</div>
 <!-- Create the editor container -->
 <div class="editor" id="editor"></div>

javascript:

var options = {
            modules: {
                toolbar: '#toolbar'
            },
            placeholder: '正文...',
            readOnly: false,
            theme: 'snow'
        };

var editor = new Quill('#editor', options);

获取quilljs光标位置

// 光标位置  
var cursorIndex = editor.getSelection().index;

自定义quilljs的toolbar按钮事件

var cursorIndex= 0;
var imageHandler = function () {

            var range = editor.getSelection();
            if (range) {
                cursorIndex = range.index;
               // 执行对应的按钮事件 
                editor.insertEmbed(cursorIndex, 'image', 'http://ol3ndb4qa.bkt.clouddn.com/fuli_logo1489050947354');
            } else {
                alert('光标不在编辑器上');
            }

        };
var toolbar = editor.getModule('toolbar');
toolbar.addHandler('image', imageHandler);

获取输入的内容长度

editor.getLength()

获取编辑器中的html内容

editor.root.innerHTML

获取delta数据

editor.getContents();

设置delta数据

editor.setContents(deltaObj);