Vue中使用wangEditor富文本框

大家好，欢迎来到IT知识分享网。

前言

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

在vue3项目中使用富文本框

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

一、wangEditor富文本框是什么？

二、使用步骤

1.引入库

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

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

2.读入数据

<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方法来初始化编辑器