richText组件

在上一节中我们注册并成功插入了一个“块”，然而并没有实现“编辑功能”，仅仅是插入后在编辑中显示了“编辑器内容显示在这里”字样。接下来我们使用一个富文本编辑器来允许用户录入文本：

在准备知识这一节中提到了window.nv.components中存储了常用的组件，富文本编辑器也在里面。就像使用Vue一样，将富文本编辑器的组件找到，直接在template中使用即可：

block-example/public_srcs/block-editor-ui.vue

<template>
    <div class="block-example-wrapper">
        富文本：
        <editorRichText />
    </div>
</template>

<script setup>
var {editorRichText} = nv.components;
</script>

<style scoped>
.block-example-wrapper {
    border: 1px solid;
}
</style>

此时刷新后台编辑器并插入“block示例块”可以看到如下效果：

保存

可以看到：无论我们怎么输入，保存后刷新都不会被保存成功。那是因为我们还没有将数据进行绑定。

数据位置

在准备知识这一节中提到了：editor、Block inline tunes、Block settings都能从 props 中得到仅block自身的type、id、data信息。而在上一节中，我们注册block时定义了title和contents这两个数据。此时我们将 title 用来存储富文本：

<template>
    <div class="block-example-wrapper">
        富文本：
        <editorRichText v-model:value="$props.block.data.title" tag="div" nowrap />
    </div>
</template>

<script setup>
var {editorRichText} = nv.components;
var $props = defineProps({
    block: {default: Object}
})
</script>

<style scoped>
.block-example-wrapper {
    border: 1px solid;
}
</style>

::: tip

由于不同浏览器对于contenteditable换行的处理不一致，为了不让数据变得混乱，一般会给 editorRichText 加上 nowrap 参数禁止换行
editorRichText组件参数详见 nv.components 章节 :::