UEditorPlus + vue3使用的一些坑，避雷雷雷雷~~~~~（富文本）

nini UEditorPlus是一个基于百度UEditor二次开发的富文本编辑器，它由ModStart团队开发，并且通常遵循MIT开源协议。

下载地址：https://gitee.com/modstart-lib/ueditor-plus/tree/master

文档地址：UEditorPlus 软件介绍 | UEditorPlus 使用文档

演示地址：UEditor Plus演示

这个富文本有以下我觉得比其他富文本好的优势：

1.复制word文档过来的内容比其他的富文本还原度高；

2.内置了可以解析word和Markdown文档；

3.内置了导出pdf和打印功能；

4.有手写板功能、插入公式；

5.虽然百度已经停止维护了但是有很多的程序员大佬维护。

第一步、下载文件

第二步、放位置

解压 UEditorPlus 到静态资源目录

复制 dist-min 到项目 public/static/UEditorPlus/ 目录

这里注意，也可以放在pulic/下面。反正只要你到时候找路径能找对就可以了！！（把dist改名成UEditorPlus）

第三步、导入依赖

npm i --save vue-ueditor-wrap@3.x
# 或
yarn add --save vue-ueditor-wrap@3.x

这里注意：因为他这个依赖的证书过期了所以需要绕过一下方法在这篇文章中：npm install报错提示证书过期CERT_HAS_EXPIRED-CSDN博客

第四步、引入组件并使用

mian.js文件

import {createApp} from 'vue'
import App from './App.vue'
import VueUeditorWrap from 'vue-ueditor-wrap';

createApp(App).use(VueUeditorWrap).mount('#app')

需要使用的组件 

<template>
    <div>
        <vue-ueditor-wrap v-model="content"
                          editor-id="editor"
                          :config="editorConfig"
                          :editorDependencies="['ueditor.config.js','ueditor.all.js']"
                          style="height:500px;"/>
    </div>
</template>

<script setup>
    import {ref} from 'vue';

    const content = ref('<p>Hello UEditorPlus</p>');
    const editorConfig = {
        // 后端服务地址，后端处理参考
        // https://open-doc.modstart.com/ueditor-plus/backend.html
        serverUrl: '/api/path/to/server',
        UEDITOR_HOME_URL: '/static/UEditorPlus/',
        UEDITOR_CORS_URL: '/static/UEditorPlus/',
    }
</script>

如果你需要两个页面用一个的话可以把editor-id="editor"给加上，不需要的话你给去掉就行，editor-id="editor"不能重复。

editor-id="editor"

 下面这个两个地址就是你刚刚放在pulic文件下面的路径，一定要不路径给弄对，不然使用不了。

这样就可以使用了，如果你需要修改一些东西你可以在

去找找看，里面都有说明，写的很清楚！