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

1、npm安装

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

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',
        'blockquote',
        '|',
        'bold',
        'underline',
        'italic',
        {
          key: 'group-more-style',
          title: '更多',
          iconSvg:
            '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
          menuKeys: ['through', 'code', 'sup', 'sub']
        },
        'color',
        'bgColor',
        '|',
        'fontSize',
        {
          key: 'group-justify',
          title: '对齐',
          iconSvg:
            '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
          menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
        },
        'todo',
        'fontFamily',
        {
          key: 'group-indent',
          title: '缩进',
          iconSvg:
            '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
          menuKeys: ['indent', 'delIndent']
        },
        '|',
        'emotion',
        'insertLink',
        'uploadImage',
        'insertTable',
        'codeBlock',
        'divider',
        'clearStyle',
        '|',
        'undo',
        'redo'
      ]
    }

    //编辑器配置
    let editorConfig = {
      placeholder: '请输入内容...',
      // 所有的菜单配置，都要在 MENU_CONF 属性下
      MENU_CONF: {}
    }

    const handleEditorCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
      console.log('created', editor)
    }
    watchEffect(() => {
      valueHtml.value = props.value
    })
    watchEffect(() => {
      emit('update:value', valueHtml.value)
    })

    const handleChange = (editor) => {
      console.log('change:', editor.children)
    }
    const handleDestroyed = (editor) => {
      console.log('destroyed', editor)
    }
    const handleFocus = (editor) => {
      console.log('focus', editor)
    }
    const handleBlur = (editor) => {
      console.log('blur', editor)
    }
    const customAlert = (info, type) => {
      alert(`【自定义提示】${type} - ${info}`)
    }
    const customPaste = (editor, event, callback) => {
      console.log('ClipboardEvent 粘贴事件对象', event)
      // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
      // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
      // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

      // 自定义插入内容
      editor.insertText('xxx')

      // 返回 false ，阻止默认粘贴行为
      event.preventDefault()
      callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

      // 返回 true ，继续默认的粘贴行为
      // callback(true)
    }

    //父组件调用子组件的方法清空编辑器内容
    const abc = function () {
      valueHtml.value = ''
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleEditorCreated,
      handleChange,
      handleDestroyed,
      handleFocus,
      handleBlur,
      customAlert,
      customPaste,
      abc
    }
  }
}
</script>
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

3、父组件中使用

<template>
	<WangEditor :value="editorContent" @update:value="handleEditorUpdate" />
</template>
<script setup lang="ts">
	//导入WangEditor组件
	import WangEditor from '@/components/wangEditor/index.vue'
	const editorContent = ref('')
	const formData = ref({
	  remark: ''//真正使用Editor的值
	})
	// 接收子组件传递的编辑器内容，并更新到父组件
	const handleEditorUpdate = (value) => {
  		formData.value.remark = value 
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以直接可以使用