vue3富文本~wangEditor

 可直接参考官网

wangeditor官网

1.安装editor

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

2. 单独将富文本封装成一个组件 

<template>
  <div>
    <!-- <div>
      <button @click="insertText">insert text</button>
      <button @click="printHtml">print html</button>
      <button @click="disable">disable</button>
    </div> -->
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <editor
        :defaultConfig="editorConfig"
        :mode="mode"
        v-model="valueHtml"
        style="height: 400px; overflow-y: hidden"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
        @onBlur="handleBlur"
        @customAlert="customAlert"
        @customPaste="customPaste"
      />
    </div>
    <!-- <div style="margin-top: 10px">
      <textarea
        v-model="valueHtml"
        readonly
        style="width: 100%; height: 200px; outline: none"
      ></textarea>
    </div> -->
  </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 {
  props: { // 接收父组件传递过来的值
    fulltext: {
      type: String,
    },
  },
  components: { Editor, Toolbar },
  setup(props, { emit }) {
    // 编辑器实例，必须用 shallowRef，重要！
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref('');

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        // 获取父组件传过来的值并展示
        valueHtml.value = props.fulltext;
      }, 1000);
    });

    const toolbarConfig = {};
    // 初始化 MENU_CONF 属性
    const editorConfig = {
      // TS 语法
      // const editorConfig = {                       // JS 语法
      MENU_CONF: {},

      // 其他属性...
    };
    editorConfig.placeholder = '请输入内容...';

    // const editorConfig = { placeholder: '请输入内容...' };

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

      editor.destroy();
    });

    // 编辑器回调函数
    const handleCreated = editor => {
      // console.log('created', editor);
      editorRef.value = editor; // 记录 editor 实例，重要！
    };
    const insertContent = ref('');
    const handleChange = editor => {
      // 将子组件中输入的字符传给父组件
      emit('passContent', editor.getHtml());
      insertContent.value = editor.getHtml();
    };
    const handleDestroyed = () => {};
    const handleFocus = () => {
      // console.log('focus', editor);
    };
    const handleBlur = editor => {
      emit('passContent', editor.getText());
    };
    const customAlert = (info, type) => {
      alert(`【自定义提示】${type} - ${info}`);
    };
    const customPaste = (editor, event, callback) => {
      // console.log('ClipboardEvent 粘贴事件对象', event);

      // 自定义插入内容
      editor.insertText(insertContent.value);

      // 返回值（注意，vue 事件的返回值，不能用 return）
      callback(false); // 返回 false ，阻止默认粘贴行为
      // callback(true) // 返回 true ，继续默认的粘贴行为
    };

    const insertText = () => {
      const editor = editorRef.value;
      if (editor == null) return;

      editor.insertText('hello world');
    };

    const printHtml = () => {
      const editor = editorRef.value;
      if (editor == null) return;
      console.log(editor.getHtml());
    };

    const disable = () => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.disable();
    };

    return {
      editorRef,
      mode: 'simple',
      valueHtml,
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleChange,
      handleDestroyed,
      handleFocus,
      handleBlur,
      customAlert,
      customPaste,
      insertText,
      printHtml,
      disable,
    };
  },
};
</script>

3. 在父组件中使用富文本子组件

<BasicEditor @passContent="passContent" :fulltext="txt" />

import BasicEditor from './wangeditor.vue';
  // 将子组件中传的值回显在父组件上
const passContent = value => {
  formState.fulltext = value;
};

const txt = ref('');

// 将父组件中获取到的值传给子组件-回显数据
txt.value = res.data[0].fulltext;

总结：

将富文本作为子组件在父组件上渲染，在子组件中输入发生改变时，传递给父组件，父组件获取到值；

当需要在富文本中回显数据时，从父组件中获取到数据，然后父传子，将数据传给富文本子组件回显。