概述
wangEditor 5是一款开源Web富文本编辑器,开箱即用,配置简单
虽然官方有文档,但是不够简明,所以我写本博客方便以后快速引入wangEditor 5富文本编辑器
实现过程
安装
1
| npm install @wangeditor/editor @wangeditor/editor-for-vue@next --save
|
定义组件
在components
文件夹新建一个名为myEditor.vue
的文件,内容如下,直接复制下面的代码即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
| <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" /> </div> </template>
<script> import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default { components: { Editor, Toolbar }, setup() { const editorRef = shallowRef()
const valueHtml = ref('<p>hello</p>')
onMounted(() => { setTimeout(() => { valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>' }, 1500) })
const toolbarConfig = {} const editorConfig = { placeholder: '请输入内容...' }
onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return editor.destroy() })
const handleCreated = (editor) => { editorRef.value = editor }
return { editorRef, valueHtml, mode: 'default', toolbarConfig, editorConfig, handleCreated }; } } </script>
<style scoped>
</style>
|
使用组件
首先在使用组件的页面引入上面的组件,然后即可使用
1 2 3 4 5 6 7 8 9 10 11
| <template> <myEditor/> </template>
<script setup> import myEditor from "../components/myEditor.vue"; </script>
<style scoped>
</style>
|
PS.
关于父组件给富文本编辑器设置内容以及获取内容的实现(通过改变编辑器组件的valueHtml
属性来实现)可以参考博客:Vue.js3.2实现父组件调用子组件的方法和属性 | LeDao’s Blog (zoutl.cn),参考博客时不需要暴露属性了,因为在上面的代码中valueHtml
已经通过return
暴露过了
参考代码GitHub仓库链接:a6678696/wang-editor-demo