描述
示例: 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
触发条件: 在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
触发条件
- 当前模块第一个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);
}
}
}
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)
})
}
}
}