quill.js官方文档(五)【API之Model,Extension】

以你之姓@ 2021-07-04 19:12 808阅读 0赞

Model

find

静态方法,给定一个DOM节点,返回对应的QuillBlot实例。
返回后者时,参数bubbletrue时,将向上搜索给定DOM的祖先节点,知道找到对应的Blot

方法

  1. Quill.find(domNode: Node, bubble: boolean = false): Blot | Quill

示例

  1. var container = document.querySelector("#container");
  2. var quill = new Quill(container);
  3. console.log(Quill.find(container) === quill); // Should be true
  4. quill.insertText(0, 'Hello', 'link', 'https://world.com');
  5. var linkNode = document.querySelector('#container a');
  6. var linkBlot = Quill.find(linkNode);

getIndex

返回文档开始至给定Blot对象位置的距离。

方法

  1. getIndex(blot: Blot): Number

示例

  1. let [line, offset] = quill.getLine(10);
  2. let index = quill.getIndex(line); // index + offset should == 10

getLeaf

指定文档中的距离,返回对应的叶Blot实例。

方法

  1. getLeaf(index: Number): Blot

示例

  1. quill.setText('Hello Good World!');
  2. quill.formatText(6, 4, "bold", true);
  3. let [leaf, offset] = quill.getLeaf(7);
  4. // leaf should be a Text Blot with value "Good"
  5. // offset should be 1, since the returned leaf started at index 6

getLine

指定文档中的距离,返回行Blot
方法

  1. getLine(index: Number): [Blot, Number]

示例

  1. quill.setText('Hello\nWorld!');
  2. let [line, offset] = quill.getLine(7);
  3. // line should be a Block Blot representing the 2nd "World!" line
  4. // offset should be 1, since the returned line started at index 6

getLines

返回指定位置包含的行。

方法

  1. getLines(index: Number = 0, length: Number = remaining): Blot[]
  2. getLines(range: Range): Blot[]

示例

  1. quill.setText('Hello\nGood\nWorld!');
  2. quill.formatLine(1, 1, 'list', 'bullet');
  3. let lines = quill.getLines(2, 5);
  4. // array with a ListItem and Block Blot,
  5. // representing the first two lines

Extension

debug

启用记录信息的静态方法,给定的级别有:’error’, ‘warn’, ‘log‘或’info’。传入true等同于传入’log’。传入false表示停用所有级别的消息记录。

方法

  1. Quill.debug(level: String | Boolean)

示例

  1. Quill.debug('info');

import

返回Quill库、格式、模块或主题的静态方法。一般,路径应该准确映射到Quill源码的目录结构。除非另有说明,对返回实体的修改可能打断已经引入的Quill功能,所以千万不要这么做。

方法

  1. Quill.import(path): any

示例

  1. var Parchment = Quill.import('parchment');
  2. var Delta = Quill.import('delta');
  3. var Toolbar = Quill.import('modules/toolbar');
  4. var Link = Quill.import('formats/link');
  5. // Similar to ES6 syntax `import Link from 'quill/formats/link';`

register

注册一个模块、主题或格式,让它们可用于添加到编辑器上。注册之后,可用Quill.import引入。使用’formats/’, ‘modules/‘或’themes/’ 路径前缀来分别注册格式、模块和主题。对于格式,特有一个简短的方法,只需要传入格式对象,路径将会自动生成。如果传入路径将会直接覆盖已经定义的路径。

方法

  1. Quill.register(format: Attributor | BlotDefinintion, supressWarning: Boolean = false)
  2. Quill.register(path: String, def: any, supressWarning: Boolean = false)
  3. Quill.register(defs: { [String]: any }, supressWarning: Boolean = false)

示例

  1. var Module = Quill.import('core/module');
  2. class CustomModule extends Module { }
  3. Quill.register('modules/custom-module', CustomModule);
  4. Quill.register({
  5. 'formats/custom-format': CustomFormat,
  6. 'modules/custom-module-a': CustomModuleA,
  7. 'modules/custom-module-b': CustomModuleB,
  8. });
  9. Quill.register(CustomFormat);
  10. // You cannot do Quill.register(CustomModuleA); as CustomModuleA is not a format

addContainer

Quill容器内部新增并返回一个容器元素,和编辑器本身是兄弟关系。按照惯例,Quill模块应该有一个带前缀ql-的类名。可指定一个引用节点,新节点会插入改节点的前面。

方法

  1. addContainer(className: String, refNode?: Node): Element
  2. addContainer(domNode: Node, refNode?: Node): Element

示例

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

getModule

返回一个已经添加到编辑器的模块。

方法

  1. getModule(name: String): any

示例

  1. var toolbar = quill.getModule('toolbar');

disable

enable(false)的快捷方法。

enable

让通过鼠标或键盘等输入设备设置让用户能够编辑内容。当source为”api“或"silent`“时,不影响API的调用。

方法

  1. enable(value: Boolean = true)

示例

  1. quill.enable();
  2. quill.enable(false); // Disables user input

发表评论

表情:
评论列表 (有 0 条评论,808人围观)

还没有评论,来说两句吧...

相关阅读