vue3安装WangEditor富文本编辑器v5版本

最新推荐文章于 2024-07-31 15:57:48 发布

实习打字猿

最新推荐文章于 2024-07-31 15:57:48 发布

阅读量1.6k

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42863549/article/details/126513677

版权

vue3 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

本文档介绍了如何在Vue3项目中安装和使用WangEditor v5及其编辑器组件`@wangeditor/editor-for-vue`。通过示例代码展示了编辑器的配置、初始化、销毁以及获取HTML内容的方法，同时提供了上传图片的自定义配置。文章还包含了组件的使用示例，展示如何获取编辑器的HTML内容。

摘要由CSDN通过智能技术生成

vue3安装WangEditor富文本编辑器v5版本

前言

🌈 官方文档

安装

yarn add @wangeditor/editor@5.1.14

yarn add @wangeditor/editor-for-vue@5.1.12

WangEditor.vue

<script lang="ts" setup>
import { ref, onBeforeUnmount, shallowRef } from 'vue';

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

// 【接口】接受传参字段
interface IProps {
    mode?: string;
    defaultHtml?: string;
    toolbarConfig?: object;
    editorConfig?: any;
}

// 初始化默认参数
const props = withDefaults(defineProps<IProps>(), {
    mode: 'default',
    defaultHtml: '',
    toolbarConfig: Object(),
    editorConfig: { placeholder: '请输入内容...', MENU_CONF: {} },
});

props.editorConfig.MENU_CONF["uploadImage"] = {
    // 上传图片的配置
    // 自定义上传
    async customUpload(file: any, insertFn: any) {
        // file 需要自己调用上传后端接口

        // 然后使用 insertFn(url, alt, href) 回调编辑器显示
        // insertFn();
    },
};

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

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

    editor.destroy();
});

// 编辑器回调函数
const handleCreated = (editor: any) => {
    // 记录 editor 实例，重要！
    editorRef.value = editor;
};

const valueHtml = ref(props.defaultHtml);

const getHtml = () => {
    return editorRef.value.getHtml();
}

// 暴露函数
defineExpose({
    valueHtml,
    getHtml,
});

</script>

<template>
    <div class="wangEditor">
        <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"
            style="border-bottom: 1px solid #ccc" />
        <Editor :defaultConfig="editorConfig" :mode="mode" v-model="valueHtml" class="wangEditor__editor"
            @onCreated="handleCreated" />
    </div>
</template>

<style scoped>
.wangEditor {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
}

.wangEditor__editor {
    height: 400px !important;
    overflow-y: hidden !important;
}
</style>

使用

<script setup lang="ts">
import { ref, reactive } from 'vue';

import WangEditor from './WangEditor.vue';

const wangEditorRef = ref();

const getHtml = () => {
  console.log(wangEditorRef.value?.getHtml());
}

const defaultHtml = '<p>你好</p>'

</script>

<template>
  <p>================================</p>

  <button @click="getHtml">获取html</button>
  <WangEditor ref="wangEditorRef" :defaultHtml="defaultHtml"></WangEditor>

  <p>================================</p>


</template>

<style scoped>
</style>