商品详情使用富文本编辑器

1、https://www.wangeditor.com/ 

1、安装依赖包 

npm install @wangeditor/editor-for-vue@next --save

2、因为好多页面都需要用到，封装富文本编辑器组件

 Editor.vue代码

<template>
    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
      <Editor style="height:150px; overflow-y: hidden;" v-model="modelValue" @onCreated="handleCreated" />
    </div>
  </template>
  <script setup lang="ts">
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { ref, shallowRef, defineModel } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

//   defineModel实例，用于父子间传数据
  const modelValue = defineModel()
  // 编辑器实例，必须用 shallowRef，弱引用，在点击提交后在创建实例
const editorRef = shallowRef()

// 内容 HTML
const handleCreated = (editor:any)=>{
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

3、在商品编辑和商品添加页面添加富文本编辑器 

以新增页面为例

 

结果