Vue中使用wangEditor富文本框

前言

提示：这里可以添加本文要记录的大概内容：

在vue3项目中使用富文本框

提示：以下是本篇文章正文内容，下面案例可供参考

一、wangEditor富文本框是什么？

WangEditor是一个基于JavaScript的富文本编辑器，用于在网页上创建和编辑富文本内容，例如格式化文本、插入图片、表格等功能。它提供了一个简单易用的界面，用户可以直接在浏览器中进行编辑，并将编辑后的内容保存或者传输给服务器。WangEditor支持常见的富文本编辑功能，并且提供了丰富的插件和扩展接口，可以满足不同需求的定制化。因其易用性和功能丰富性，WangEditor在网页开发中被广泛使用，特别是在需要用户编辑富文本内容的场景下。

二、使用步骤

1.引入库

在项目根目录使用shell命令下载依赖，代码如下（示例）：

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

2.读入数据

接下来要编写vue页面
代码如下（示例）：

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" @onChange="handleChange" />
    </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


const value = ref('');
watch(value, () => {
    console.log(value.value);
})


export default {
    components: { Editor, Toolbar },
    setup() {
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref('')


        const toolbarConfig = {}
        const editorConfig = { placeholder: '请输入内容...' }

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }

        const handleChange = (editor) => {
            valueHtml.value = editor.getHtml();
            value.value = editor.getText();
        }
        return {
            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            handleCreated,
            handleChange
        };
    }
}
</script>

效果如下图所示：

总结

在这个示例中，我们首先引入Vue 3的ref函数用于创建响应式数据。然后引入了WangEditor，并在setup函数中初始化了富文本编辑器。在初始化过程中，我们可以配置一些选项，比如图片上传的服务器地址。接着定义了保存内容的方法saveContent，在这个方法中，我们可以获取编辑器的HTML内容并进行保存或其他操作。最后，在组件的mounted钩子函数中调用initEditor方法来初始化编辑器