注册块
nvPress将与编辑器相关的API放置在 window.nv.editor
中,例如注册Block的方法是这个:
block-example/public_srcs/block-admin-register.js
var {register_block_type} = nv.editor.blocks;
var {_defineRemoteComponent, defineComponent} = nv.Vue;
var editor = _defineRemoteComponent("/pandastudio-sample-block-srcs/block-editor-ui.vue")
export default ({post_type, post_id})=>{
register_block_type("block-example",{
name: "block示例",
description: "示例描述内容",
category: 'design', // 默认的分类有:text/illustration & media/design
icon: defineComponent({
// icon也是一个vue组件,建议使用尺寸为24*24的svg图片作为icon
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 648 712" width="24" height="24"><path d="M360.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>`
}),
attributes: {
// 在这里定义需要被存储的block data数据字段,并提供默认值
// 当默认值是引用数据类型时,应使用工厂函数!
title: "",
contents(){return {}},
},
editor,
})
}
block-example/public_srcs/block-editor-ui.js
<template>
编辑器内容显示在这里
</template>
在后台编辑器刷新后,即可看到新增的编辑器。尝试添加,还会在内容区域显示“编辑器内容显示在这里”字样。
::: tip
在上面的示例中,register_block_type
的第一个参数是Block类型,通常是一个包含下划线的内部名称。为了与其他人开发的名称不重复,建议使用开发者名称/block名称
的方式(中间使用/分隔)。
:::