注册块

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名称的方式（中间使用/分隔）。 :::