Vue3中使用富文本编辑器

在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能

npm地址：https://www.npmjs.com/package/@wangeditor/editor-for-vue/v/5.1.12?activeTab=readme

官网：Editor 

1. 安装
pnpm add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
 
pnpm add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
 2. 组件封装
@/comps/Editor/index.vue 

首先为了能让vue认识@wangeditor/editor-for-vue库、我们可以在.d.ts中声明一下即可

// 声明外部 npm 插件模块
declare module '@wangeditor/editor-for-vue';

 

<template>
  <div class="Wft-Editor flex flex-col">
    <Toolbar
      class="default-border"
      :editor="editorRef"
      :mode="mode"
    />
    <Editor
      cl