API

Quill を使用すると、そのコンテンツにきめ細かくアクセスできます。

検索

• Quill.prototype.getText
• Quill.prototype.getLength
• Quill.prototype.getContents
• Quill.prototype.getHTML

操作

• Quill.prototype.insertText
• Quill.prototype.deleteText
• Quill.prototype.formatText
• Quill.prototype.formatLine
• Quill.prototype.insertEmbed
• Quill.prototype.updateContents
• Quill.prototype.setContents
• Quill.prototype.setHTML
• Quill.prototype.setText

選択

• Quill.prototype.getSelection
• Quill.prototype.setSelection
• Quill.prototype.prepareFormat
• Quill.prototype.focus
• Quill.prototype.getBounds

カスタマイズ

• Quill.registerModule
• Quill.prototype.addModule
• Quill.prototype.getModule
• Quill.prototype.onModuleLoad
• Quill.prototype.addFormat
• Quill.prototype.addContainer

Quill.prototype.getText

エディターの文字列コンテンツを取得します。

メソッド

• getText()
• getText(start)
• getText(start, end)

パラメーター

戻り値

• 弦エディターの内容

例

var text = editor.getText(0, 10);

Quill.prototype.getLength

エディターのコンテンツの長さを取得します。

メソッド

• getLength()

戻り値

• 番号エディター内の文字の数。

例

var length = editor.getLength();

Quill.prototype.getContents

で表されるフォーマットデータを含むエディターのコンテンツを取得します。 あるデルタ物体。

メソッド

• getContents()
• getContents(start)
• getContents(start, end)

パラメーター

戻り値

• デルタエディターの内容。

例

var delta = editor.getContents();

Quill.prototype.getHTML

エディターの HTML コンテンツを取得します。

メソッド

• getHTML()

戻り値

• 弦エディターの HTML コンテンツ

例

var html = editor.getHTML();

Quill.prototype.insertText

エディターにテキストを挿入します。見るフォーマット利用可能な形式のリストについては、

メソッド

• insertText(index, text)
• insertText(index, text, name, value)
• insertText(index, text, formats)
• insertText(index, text, source)
• insertText(index, text, name, value, source)
• insertText(index, text, formats, source)

パラメーター

例

editor.insertText(0, 'Hello', 'bold', true);

editor.insertText(5, 'Quill', {
  'italic': true,
  'fore-color': '#ffff00'
});

Quill.prototype.deleteText

エディターからテキストを削除します。

メソッド

• deleteText(start, end)
• deleteText(start, end, source)

パラメーター

例

editor.deleteText(0, 10);

Quill.prototype.formatText

エディターでテキストの書式を設定します。テキストなどの行レベルの形式の場合 整列、改行文字をターゲットにするか、formatLineヘルパー。見るフォーマット利用可能な形式のリストについては、

メソッド

• formatText(start, end)
• formatText(start, end, name, value)
• formatText(start, end, formats)
• formatText(start, end, source)
• formatText(start, end, name, value, source)
• formatText(start, end, formats, source)

パラメーター

例

editor.setText('Hello\nWorld!\n');

editor.formatText(0, 5, 'bold', true);      // bolds 'hello'

editor.formatText(0, 5, {                   // unbolds 'hello' and set its color to blue
  'bold': false,
  'color': 'rgb(0, 0, 255)'
});

editor.formatText(5, 6, 'align', 'right');  // right aligns the 'hello' line

Quill.prototype.formatLine

指定された範囲内のすべての行をフォーマットします。見るフォーマット利用可能な形式のリストについては、ありません インライン形式で呼び出された場合に効果があります。

メソッド

• formatLine(start, end)
• formatLine(start, end, name, value)
• formatLine(start, end, formats)
• formatLine(start, end, source)
• formatLine(start, end, name, value, source)
• formatLine(start, end, formats, source)

パラメーター

例

editor.setText('Hello\nWorld!\n');

editor.formatLine(1, 3, 'align', 'right');   // right aligns the first line
editor.formatLine(4, 8, 'align', 'center');  // center aligns both lines

Quill.prototype.insertEmbed

埋め込みコンテンツをエディターに挿入します。現在は画像のみです サポートされました。

メソッド

• insertEmbed(index, type, url)
• insertEmbed(index, type, url, source)

パラメーター

例

editor.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');

Quill.prototype.updateContents

デルタをエディターのコンテンツに適用します。

メソッド

• updateContents(delta)

パラメーター

例

// Assuming editor currently contains [{ insert: 'Hello World!' }]
editor.updateContents({
  ops: [
    { retain: 6 },        // Keep 'Hello '
    { delete: 5 },        // 'World' is deleted
    { insert: 'Quill' },  // Insert 'Quill'
    { retain: 1, attributes: { bold: true } }    // Apply bold to exclamation mark
  ]
});
// Editor should now be [{ insert: 'Hello Quill' }, { insert: '!', attributes: { bold: true} }]

Quill.prototype.setContents

エディターを指定された内容で上書きします。

メソッド

• setContents(delta)

パラメーター

例

editor.setContents([
  { insert: 'Hello ' },
  { insert: 'World!', attributes: { bold: true } },
  { insert: '\n' }
]);

Quill.prototype.setHTML

指定された HTML を使用してエディターのコンテンツを設定します。編集者は次のことを行うことに注意してください。 入力を認識するサブセットに正規化します。例えばstrongタグはに変換されますbタグ。

メソッド

• setHTML(html)

パラメーター

例

editor.setHTML('<div>Hello</div>');

Quill.prototype.setText

エディターのコンテンツを指定されたテキストで設定します。 Quill ドキュメントの末尾に注意してください 改行なので、省略した場合は追加されます。

メソッド

• setText(text)

パラメーター

例

editor.setText('Hello\n');

Quill.prototype.getSelection

ユーザーの選択範囲を取得します。

メソッド

• getSelection()

戻り値

• 範囲鍵付きstartとendユーザーの選択範囲を表す

例

var range = editor.getSelection();
if (range) {
  if (range.start == range.end) {
    console.log('User cursor is at index', range.start);
  } else {
    var text = editor.getText(range.start, range.end);
    console.log('User has highlighted: ', text);
  }
} else {
  console.log('User cursor is not in editor');
}

Quill.prototype.setSelection

ユーザー選択を指定された範囲に設定します。エディターにも焦点を当てます。もしもnull、エディターがぼやけます。

メソッド

• setSelection(start, end)
• setSelection(start, end, source)
• setSelection(range)
• setSelection(range, source)

パラメーター

例

editor.setSelection(0, 5);

Quill.prototype.prepareFormat

現在のカーソル位置の形式を設定します。したがって、その後の入力 その結果、それらの文字は指定された形式の値に設定されます。ために たとえば、太字に設定して「a」と入力すると、太字になります。 「あ」。

現在の選択が存在しない場合、または選択されていない場合は効果がありません。 カーソル。

メソッド

• prepareFormat(format, value)

パラメーター

例

editor.prepareFormat('bold', true);

Quill.prototype.focus

エディターにフォーカスを当てます。

メソッド

• focus()

例

editor.focus();

Quill.prototype.getBounds

ピクセル位置 (エディタ コンテナを基準とした) を取得し、 指定されたインデックスにおけるカーソルの高さ。実際のカーソルは次の位置にある必要はありません そのインデックス。ツールチップを配置する場所を計算するのに役立ちます。

メソッド

• getBounds(index)

パラメーター

戻り値

• 物体キーを持つオブジェクトheight、left、 とtop。

例

editor.setText('Hello\nWorld\n');
editor.getBounds(7);    // Returns { height: 15, left: 27, top: 31 }

Quill.registerModule

モジュールを登録し、エディタに追加できるようにします。見るモジュール詳細については。

メソッド

• registerModule(name, function)

パラメーター

例

Quill.registerModule('custom-module', function(quill, options) {
  console.log(options);
});

Quill.prototype.addModule

モジュールをエディタに追加します。モジュールは以前に存在していたはずです に登録されていますレジスタモジュール。見るモジュール詳細については。

メソッド

• addModule(name, options)

パラメーター

戻り値

• 物体追加されたモジュールのインスタンス。

例

var toolbar = editor.addModule('toolbar', {
  container: '#toolbar-container'
});

Quill.prototype.getModule

エディターに追加されたモジュールを取得します。

メソッド

• getModule(name)

パラメーター

戻り値

• 物体追加されたモジュールのインスタンス。

例

var toolbar = editor.getModule('toolbar');

Quill.prototype.onModuleLoad

指定されたモジュールが追加されると、指定されたコールバックを呼び出します。モジュールが すでに追加されている場合は、コールバックがすぐに呼び出されます。

メソッド

• onModuleLoad(name, callback)

パラメーター

例

editor.onModuleLoad('toolbar', function(toolbar) {
  console.log('Toolbar has been added');
});

Quill.prototype.addFormat

カスタム定義フォーマットをエディターに追加します。

メソッド

• addFormat(name, config)

パラメーター

例

editor.addFormat('strike', { tag: 'S', prepare: 'strikeThrough' });

Quill.prototype.addContainer

Quill コンテナ内にエディタの兄弟となる div コンテナを追加します。 自体。慣例により、Quill モジュールにはクラス名の接頭辞が必要です。 とql-。

メソッド

• addContainer(cssClass, before)

パラメーター

戻り値

• DOM要素追加されたDIVコンテナ。

例

var container = editor.addContainer('ql-custom');