Bootstrap

quill.js 用法

QuickStart

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Download

Github

Configuration

Container

Quill需要一个可以添加编辑器的容器,可以传递一个CSS选择器或者DOM对象。

var quill = new Quill('#editor');
var container = document.getElementById('editor');
var editor = new Quill(container);

Options

可以传递一个options对象来配置quill

var options = {
  debug: 'info',
  modules: {
    toolbar: '#toolbar'
  },
  placeholder: 'Compose an epic...',
  readOnly: true,
  theme: 'snow'
};
var editor = new Quill('#editor', options);

bounds

Default:document.body

只考虑左右边界

debug

Default:warn

debug是一种静态方法,会影响页面上的其他Quill编辑器实例。 只有警告和错误消息默认启用。

formarts

Default:  All formarts

允许在编辑器中使用的格式的白名单。

modules

包含的模块和相应的选项的集合。

placeholder

Default:None

readOnly

Default:false

scrollingContainer

Default:null

strict

Default:true

theme

‘bubble’or ‘snow’

API

getContents

getContents(index: Number = 0, length: Number = remaining)

var delta = quill.getContents();

;