1、安装

npm i wangeditor --save

2、引入并初始化

<div id="div1">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

import E from 'wangeditor'
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()

3、配置图片上传

1）、配置接口

const E = window.wangEditor
const editor = new E('#div1')

// 配置 server 接口地址
editor.config.uploadImgServer = '/upload-img'

editor.create()

2）、server 接口返回格式，重要！！！

接口要返回 application/json 格式，格式要求如下：

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
    "data": [
        {
            url: "图片地址",
            alt: "图片文字说明",
            href: "跳转链接"
        },
        {
            url: "图片地址1",
            alt: "图片文字说明1",
            href: "跳转链接1"
        },
        "……"
    ]
}

4、完整的例子

<template>
    <div>
        <div id="div1">
            <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        </div>
        <div style="margin-top: 20px">
            <el-button type="primary" @click="onShowText">获取内容</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import WangEditor from "wangeditor"

const editor = ref(null);

const onShowText = () => {
    //console.log(editor.txt.text());
    let msg = editor.value.txt.html();
    console.log(msg);
}


onMounted(() => {
    editor.value = new WangEditor("#div1");
    editor.value.create();
})

</script>

<style scoped></style>

文章参考

• https://www.wangeditor.com/v4/pages/01-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8/01-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html