vue3项目中使用富文本框——wangeditor

bingduYu

已于 2024-02-02 10:18:00 修改

阅读量656

点赞数 2

分类专栏： Yu的前端凑数笔记学习随笔文章标签：前端笔记

于 2024-02-02 09:46:29 首次发布

本文链接：https://blog.csdn.net/Yugoup/article/details/135986633

版权

1、npm安装

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

2、创建wangeditor的组件

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" />
    <Editor v-model="valueHtml" :defaultConfig="editorConfig" @onCreated="handleEditorCreated" />
  </div>
</template>
<script lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {
    Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {
    ref, shallowRef, watchEffect } from 'vue'

export default {
   
  components: {
   
    Editor,
    Toolbar
  },
  props: {
   
    value: String
  },
  emits: ['update:value'],
  setup(props, {
    emit }) {
   
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef(null)

    // 内容 HTML
    const valueHtml = ref(props.value || '')

    //配置功能栏
    let toolbarConfig = {
   
      toolbarKeys: [
        'headerSelect'