描述

示例： register_block_type(block_type, options)

功能： 注册Block类型

参数

block_type (String) (Required) Block类型关键字

options (Object) (Required)

name (String) (Required) Block类型名称，如：文章
description (String) (Optional) Block类型描述
category (String) (Optional) Block所属分类
icon (VueComponent) (Required) Block图标
attributes (Object) (Required) Block data 默认值（数据中有引用类型时，应使用工厂函数）
setDefaultValues (Array[String]) (Optional) 4.1.0 可以设为默认值的key。此处对应attributes的key（使用时应注意：用户输入的内容不应该设为默认值，只有基础配置如：颜色、对齐等才建议设为默认值）此处仅仅是建议值，即使开发者不设置，用户也可以手动选择设置默认值的key
editor (VueComponent) (Required) Block编辑器显示的内容
settings (VueComponent) (Optional) Block边栏设置显示的内容
inlineTunes (VueComponent) (Optional) Toolbar控制按钮
transform (Object) (Optional) Block转换
- from (Object) (Optional) 转换自
- to (Object) (Optional) 转换到
combine (Object) (Optional) Block合并
- from (Object) (Optional) 后一Block合并到当前Block
- to (Object) (Optional) 当前Block合并到上一Block
receiver (Object) (Optional) 接收来自“拖拽/粘贴”的“文件/HTML/文本”
- config (Object) (Optional) 可接收的范围配置
  - tags (Array) (Optional) 接收HTML时，允许的HTML Element tagName
  - files (Object) (Optional) 接收文件时，可接收的文件类型
    - mimeTypes (Array) (Optional) 允许的mime类型
    - extensions (Array) (Optional) 允许的扩展名
- handler (Function) (Required) 如何处理接收的数据

(Void) 无

options.editor

编辑器Vue.js组件。

Props

名称	类型	默认值	说明
block	Object	null	{ id: Block ID type: Block类型 data: Block数据（仅在editor/settings/inlineTunes中响应） wrapper: 父元素Ref }

options.settings

边栏设置Vue.js组件。

Props

名称	类型	默认值	说明
block	Object	null	{ id: Block ID type: Block类型 data: Block数据（仅在editor/settings/inlineTunes中响应） wrapper: 包裹编辑器的父元素Ref }

options.inlineTunes

toolbar工具栏按钮Vue.js组件。

Props

名称	类型	默认值	说明
block	Object	null	{ id: Block ID type: Block类型 data: Block数据（仅在editor/settings/inlineTunes中响应） wrapper: 包裹编辑器的父元素Ref }

Expose

名称	类型	说明
checkState	(selection)=>void	选中范围改变或Toolbar显示时，检查工具栏按钮活动状态的回调

options.transform

模块转换。包含 from 和 to 两种方式：

例如：当前模块为A，另一模块为B

from: B → A
to：A → B

触发条件： 在Toolbar中点击转换按钮触发

如果在注册A模块时：存在 A to B的方法，又在注册B模块时：存在B from A的方法。那么，在将A模块转换到B模块时，当前模块A to B的方法优先级高于B from A的方法。

from 和 to 对象的Key值，是对应的B模块的 block_type, 例如：

transform: {
    from: {
        // 当前block可以从paragraph转换而来
        paragraph( paragraph_block, resolve, reject ) {
            var paragraph_data = paragraph_block.data;
            //...
            resolve({
                // 转换后的当前block类型data
            })
        },
        // 当前block可以从list转换而来
        list( list_block, resolve, reject ) {
            var list_data = list_block.data;
            //...
            resolve({
                // 转换后的当前block类型data
            })
        },
    },
    to: {
        // 当前block可以转换成 paragraph
        paragraph( currentBlock, resolve, reject ) {
            var current_data = currentBlock.data;
            //...
            resolve({
                // 转换后的paragraph data
            })
        },
        // ...
    }
}

转换的结果只需要resolve转换后的数据即可
转换后的数据要与对应block的attributes匹配，key值不对应的数据将被丢弃，缺少的key值将使用对应block attributes默认值

options.combine

模块合并，包含 from 和 to 两种方式：

例如：当前模块为A，另一模块为B

from: B → A
to：A → B

触发条件

当前模块第一个Richtext的首部，按下Backspace键，将触发当前模块向上一模块合并（A to B）
当前模块最后一个RichText的尾部，按下Backspace键，将触发下一模块合并到当前模块（B from A）

如果在注册A模块时：存在 A to B的方法，又在注册B模块时：存在B from A的方法。那么，在将A模块合并到B模块时，当前模块A to B的方法优先级高于B from A的方法。

from 和 to 对象的Key值，是对应的B模块的 block_type, 例如：

combine: {
    from: {
        // 可以在header的首部点击backspace将header的数据合并到当前模块
        header(from_block, to_block, event) {
            event.preventDefault();
            // 处理当前数据，绝大多数情况下，需要使用 web selection 的相关知识处理光标位置
            // ...
            // 通常在处理完合并之后，被from block会被移除
            nv.editor.blocks.remove(from_block);
        }
    },
    to: {
        // 可以在当前模块第一个richText的首部点击backspace，将当前数据合并到header的尾部
        header(from_block, to_block, event) {
            event.preventDefault();
            // 处理当前数据，绝大多数情况下，需要使用 web selection 的相关知识处理光标位置
            // ...
            // 通常在处理完合并之后，被from block会被移除
            nv.editor.blocks.remove(from_block);
        }
    }
}

合并需手动处理数据或页面Dom

options.receiver

用于粘贴/拖拽时，对文件/HTML进行接收

接收范围配置

接收时，可接收文件/HTML，因此要对允许接收的内容进行配置。例如：接收图片，在接收html时仅允许IMG标签。或对文件的mime或扩展名进行限制

receiver: {
    config: {
        tags: ['IMG'],
        files: {
            mimeTypes: ['image/*'],
            extensions: ['gif', 'jpg', 'png']
        }
    }
}

接收数据的处理

收到数据后，由 receiver.handler 方法进行处理。该方法接收Object参数，对象解构如下：

名称	类型	默认值	说明
originalEvent	Event		触发粘贴或拖拽的原始事件对象
type	String	'tag'或'file'	接收到HTML时为tag，接收到文件时为file
file	File	undefined	此参数为接收到的文件
node	Element	undefined	此参数为接收到的HTML元素
receiver	Object	{nodes, files, currentIndex}	nodes: 在接收到HTML时，所有的HTML元素 files: 在接收到文件时，所有的文件 currentIndex：当前待处理的序号

例如：接收到图片文件，对图片文件做上传处理后，插入上传的url。接收到图标标签，直接插入图片标签的url

receiver: {
    config: {
        // ...
    },
    handler({originalEvent, type, file, node, receiver}) {
        if (type == 'tag') {
            var src = node.getAttribute('src');
            if (src) {
                nv.editor.blocks.insert({
                    type: 'image',
                    data: {src}
                })
            }
        }
        if (type == 'file') {
            var formDatas = new FormData();
            formDatas.append('file',file);
            var loading = $message.loading(`图片上传中：${file.name}`,{duration: 0});

            nv.$axios({
                method: 'post',
                url: nv.$API + '/nv/media-upload',
                transformRequest: [function(){
                    return formDatas;
                }],
            })
            .then(({data})=>{
                loading.content = `上传成功：${file.name}`
                loading.type = 'success'
                nv.editor.blocks.insert({
                    type: 'image',
                    data: {
                        src: data.urls.original
                    }
                })
            })
            .catch((error)=>{
                loading.content = `上传失败：${file.name}`
                loading.type = 'error'
            })
            .finally(()=>{
                setTimeout(()=>{
                    loading.destroy()
                },3000)
            })
        }
    }
}