クイックスタート

始めるための最良の方法は、簡単な例です。 Quill が初期化されました DOM 要素を使用してエディターを含めます。その要素の内容 Quill の初期コンテンツになります。

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

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

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

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor');
  quill.addModule('toolbar', { container: '#toolbar' });
</script>

Quill も強力なサポートを提供しますAPIためにエディターのコンテンツへのきめ細かいアクセスと操作。

<script>
  quill.on('text-change', function(delta, source) {
    console.log('Editor contents have changed', delta);
  });

  quill.insertText(11, ' Bilbo');
  console.log(quill.getText());   // Should output "Hello World Bilbo!\nSome initial bold text";
</script>

次のステップ

シンプルな Quill エディタをセットアップするために必要な作業はこれだけです。しかし Quill の強みは、その柔軟性と拡張性です。をチェックしてください例これを実際に見てみましょう。または開始します柔軟な Quill との対話API。