am-editor-002/docs/plugin/tutorials-block.zh-CN.md

Block 插件

块级节点插件

通常用于独占一行的块级节点，类似于标题、引用

此类插件我们需要继承 BlockPlugin 抽象类，BlockPlugin 抽象类在继承 ElementPlugin 抽象类的基础上扩展了一些属性和方法。所以继承 BlockPlugin 的插件也同样拥有ElementPlugin抽象类的所有属性和方法

继承

继承 BlockPlugin 抽象类

import { BlockPlugin } from '@aomao/engine'

export default class extends BlockPlugin {
	...
}

属性

tagName

标签名称，必须

类型：string | Array<string>

此处的标签名称与父类ElementPlugin中的标签名称作用是一致的，只不过标签名称是 BlockPlugin 插件必要的属性之一

BlockPlugin 标签名称可以是数组。例如标题，h1 h2 h3 h4 h5 h6 多种标签名称，设置为数组后，会把这些名称单独和 style attributes组合成 schema 规则

readonly tagName = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

allowIn

该节点允许可以放入的 block 节点，默认为 $root编辑器根节点

类型：Array<string>

readonly allowIn = ['blockquote', '$root']

disableMark

禁用的 mark 插件样式，该 block 节点下不可以出现的 mark 插件节点的样式

类型：Array<string>

//传入 mark插件 名称
disableMark = ['fontsize', 'bold'];

canMerge

相同的 block 节点能否合并，默认 false，可选

类型：boolean

方法

init

初始化，可选

BlockPlugin 插件已经实现了init方法，如果需要使用，需要手动再次调用。否则会出现意料外的情况

export default class extends BlockPlugin {
	...
    init(){
        super.init()
    }
}

queryState

查询插件状态命令，可选

queryState() {
    //不是引擎
    if (!isEngine(this.editor)) return;
    const { change } = this.editor
    //获取当前光标选择区域内的所有块级标签
    const blocks = change.blocks;
    if (blocks.length === 0) {
        return '';
    }
    //查看是否有包含当前插件设置的标签名称，如果有设置属性样式，还需要比较属性和样式
    return this.tagName.indexOf(blocks[0].name) >= 0 ? blocks[0].name : '';
}

execute

执行插件命令，需要实现

添加一个 block 标签的例子：

execute(...args) {
    //不是引擎
    if (!isEngine(this.editor)) return;
    const { change, block, node } = this.editor;
    if (!this.queryState()) {
        //包裹块级节点
        block.wrap(`<${this.tagName} />`);
    } else {
        //获取光标对象
        const range = change.range.get();
        //获取当前光标区域内的第一个块级节点并且向上查找与当前插件设置的块级节点名称相同的节点
        const blockquote = change.blocks[0].closest(this.tagName);
        //标记移除包裹前光标位置
        const selection = range.createSelection();
        //移除包裹
        node.unwrap(blockquote);
        //还原移除包裹后的光标所处位置
        selection.move()
        //重新设置编辑器所处光标
        change.range.select(range);
    }
}

schema

设置此 block 插件的schema规则，可选

BlockPlugin 插件已经实现了schema方法，会自动根据 tagName style attributes 设置规则。

如果需要使用，可以重写此方法或者使用 super.schema()再次调用此方法

markdown

解析markdown语法，可选

默认在按下空格后，引擎会获取到空格前面的文本字符，然后调用此方法，我们可以在方法中查找文本的markdown语法

/**
 * Markdown 处理
 * @param event 事件
 * @param text 文本
 * @param block 块级节点
 * @param node 触发节点
 */
markdown?(event: KeyboardEvent, text: string, block: NodeInterface, node: NodeInterface): boolean | void;