vue3 富文本summernote

Vue3中的富文本编辑器有许多选择，其中之一是Summernote。Summernote是一个轻量级且灵活的富文本编辑器，适用于Vue3项目。它具有许多功能，包括插入图片、插入表格、格式化文本等。

在Vue3中使用Summernote，可以按照以下步骤进行：

1. 首先，通过npm或yarn安装Summernote插件。可以使用以下命令：

npm install summernote --save

2. 在Vue组件中引入Summernote插件。可以通过以下代码添加到Vue组件的`<script>`部分：

import 'summernote/dist/summernote-bs4.css';
import 'summernote/dist/summernote-bs4.js';

3. 在Vue组件中的`<template>`部分添加一个textarea元素，用于放置Summernote编辑器：

<template>
  <div>
    <textarea ref="summernote"></textarea>
  </div>
</template>

4. 在Vue组件的`<script>`部分中，添加对Summernote的引用和相关配置。可以使用以下代码：

export default {
  mounted() {
    $(this.$refs.summernote).summernote({
      width: 800,
      height: 300
      // 其他配置项
    });
  }
}

5. 最后，在需要使用Summernote的地方，添加`<summernote>`标签。可以使用以下代码：

<template>
  <div>
    <summernote ref="summernote"></summernote>
  </div>
</template>

通过以上步骤，就可以在Vue3中使用Summernote富文本编辑器。需要注意的是，具体的配置可以根据需求进行调整，并且可以通过Summernote的官方文档了解更多配置选项和功能。