前言
提示:这里可以添加本文要记录的大概内容:
在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方法来初始化编辑器