vue3 WangEditor富文本

使用

        <WangEditor ref="EditorRef" v-model:value="formState.description" />

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      style="height: 200px; overflow-y: hidden"
      :modelValue="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import { onBeforeUnmount, shallowRef, watch } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
const mode = 'default'; // 或 'simple'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = defineModel('value');
const emit = defineEmits(['update:value']);
watch(valueHtml, newVal => {
  console.log('wangEditor', newVal);
});
function handleChange(editor: any) {
  // 获取 HTML
  const html = editor.getHtml();
  console.log('handleInput', html);
  valueHtml.value = html;
  emit('update:value', html);
}
const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };

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

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

<style scoped lang="scss">
// @use './styles/wangEditor.scss';
</style>