vue3 wangEditor 使用

一、官网地址

官网操作文档

二、下载依赖包

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

三、页面引入

import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

四、使用方式

<template>
  <div class="Wedit">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="'default'" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="'default'"
      @onCreated="handleCreated" />
    <el-button type="primary" @click="save">确定</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { createEditor, DomEditor, IToolbarConfig } from "@wangeditor/editor";
const props = defineProps({
  html_text: {
    type: String,
    required: false,
    default: "<p>hello</p>",
  },
});
//
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = computed({
  get() {
    // 这里返回的值是获取计算属性的值
    return props.html_text;
  },
  set(newValue) {},
});
onMounted(() => {});
// 工具栏配置
const toolbarConfig = reactive({
  toolbarKeys: [
    // 菜单 key
    "headerSelect",
    // 分割线
    "|",
    // 菜单 key
    "bold",
    "italic",
    "color",
    "bgColor",
    "fontSize",
    "fontFamily",
  ],
});
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></style>

五、API介绍（editorRef为组件的实例），只介绍了本人用上的，有需要可以上官网查看

//获取工具栏的所有工具
editorRef.value.getAllMenuKeys();
//查看工具栏的默认配置
editorRef.value.getConfig();
//获取html文本内容
editorRef.value.getHtml();

六、工具栏配置

工具栏的配置都存入toolbarKeys当中，可以自定义工具栏

const toolbarConfig = reactive({
  toolbarKeys: [
    // 菜单 key
    "headerSelect",
    // 分割线
    "|",
    // 菜单 key
    "bold",
    "italic",
    "color",
    "bgColor",
    "fontSize",
    "fontFamily",
     "lineHeight",
  ],
});

工具栏关键字介绍(本人用过的，后续用上继续补上)

//headerSelect  正文、标题一、标题二...
//bold 字体加粗
//italic 文本斜体
//color 文本颜色
// bgColor 文本背景色
//fontSize 文本字体大小
//fontFamily 文本字体类型
//lineHeight 文本行高

–end–