vue3集成ueditor 并将内容同步展示到第三方 详细过程

先上本人的实际需求：

需求是点编辑，弹出一个窗口，窗口中是ueditor，在ueditor中编辑上图中的描述信息，然后存到数据库，接下来在unity程序中拉取描述信息并展示。接下来开始操作。

1.做一个弹窗，很简单，就不细聊了，本人用的el-dialog（elementUI）。如下：

2.开始集成百度的ueditor，首先下载包装了ueditor的vue组件，链接如下：

vue-ueditor-wrap - Vue + UEditor + v-model双向绑定

如图下载，本人下载的是.net版本，下载解压后如图：

重命名后（下载解压后的文件夹我重命名为ueditor）将此文件夹完整放入项目的public文件夹下，如图（重命名是为了让其他人更好识别，你不重命名也无所谓的）：

3.安装组件：

npm i vue-ueditor-wrap@3.x -S

本人装的是3.0.8版本，vue3项目必须安装3.0以上版本

4.vue代码设置

（1）main.js设置

两行代码即可，引入并use，如下：

import VueUeditorWrap from 'vue-ueditor-wrap';

app.use(VueUeditorWrap);

（2）在弹窗中加入ueditor，红框中的即可

（3）ueditor 配置，我是写在和上图同一个.vue文件中，如图

配置部分代码如下，方便各位复制

        let msg = ref('测试ueditor')
        let myConfig = {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 450,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传图片接口
        serverUrl: 'http://127.0.0.1:8083/ueditor/net/controller.ashx',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
        UEDITOR_HOME_URL: '/ueditor/'
        }

最后别忘了把msg和myconfig一起return

好了，至此，ueditor应该是完全能用起来了，界面如下图（各位的框中内容可能是其他的，这段文字是本人自己瞎写的本地数据）：

如果你不需要上传图片，文件等涉及上传的功能，只编辑纯文本，ok，至此可以结束了。但是如果需要上传图片，可以继续往下看。

5.上传图片相关设置

还记得之前下载解压并放入public下的文件吗？重点就在那里，打开下载并解压的文件夹，发现有个net文件夹。如下图：

这个文件夹需要以应用程序的方式运行，什么意思呢，接下来细说。

（1）首先发布vue项目，本人发布在windows IIS，发布过程简单写下，老手可以自行发布，直接跳过这里

npm run build

build结束后出现dist文件夹，打开IIS，添加网站，把发布后的dist文件夹发布成网站，如下图：

（2）展开上图红框，在net文件夹右键点击，选择 转换为应用程序，弹出窗口中，应用程序池

选择.net4.x，本人是.net4.5，如果没有，可以尝试选择其他版本，然后试下后续上传图片功能，不行的话就自行下载.net4.x版本安装一下吧，毕竟我只试了.net4.5，是可以的，其他版本没试过。完成后net的文件夹图标会变成如下图所示的图标。

（3）测试，在浏览器输入http://127.0.0.1:8083/ueditor/net/controller.ashx，ip和端口改成你刚刚发布的vue项目网站的ip和端口，ueditor改成你之前下载解压，并重命名放入public的文件夹名称。如果浏览器出现下图所示，代表成功。

此时可打开你发布后的网站，测试上传图片。如提示上传错误等报错，则继续往下看。

6.ueditor相关设置

打开之前下载并解压的文件夹，如下图：

我们删除ueditor.all.min.js，把ueditor.all.js重命名为ueditor.all.min.js，相当于做了一次名称覆盖，一定要看清楚在操作，别搞错了！为什么这么做，是因为ueditor.all.min.js乱成一锅粥，大家可以在vscode自己看看，这个文件完全没法改。所以我们修改格式清晰的ueditor.all.js就舒服多了。

在新的ueditor.all.min.js（也就是重命名之前的ueditor.all.js，此时最原始的ueditor.all.min.js已被删除）这个文件，15279行（可能每个人由于ueditor下载的版本不一样，所以行数不一样，建议搜索domUtils.on(iframe, 'load', callback)，直接定位），把这三行注释掉

然后加入下述代码：

                var formdata = new FormData(form);
                var arr,reg=new RegExp("(^| )_token=([^;]*)(;|$)");

                var myForm = document.getElementById("myForm");
                var xhr= new XMLHttpRequest();
                xhr.open("POST", me.getOpt('serverUrl')+'?action=uploadimage', true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4)
                        if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
                            alert(xhr.responseText);
                }
                xhr.send(formdata);

                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4) {
                        var response = JSON.parse(xhr.responseText);
                        if(response.state=='SUCCESS' ){
                            loader = me.document.getElementById(loadingId);
                            console.log('/ueditor/net/' + response.url);
                            loader.setAttribute('src', '/ueditor/net/' + response.url);
                            loader.setAttribute('_src', response.url);
                            loader.setAttribute('title', response.title || '');
                            loader.setAttribute('alt', response.original || '');
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        }
                    }
                }

这里注意：这个位置需要修改为你自己的路径，也就是ueditor需要修改为你之前重命名的名称，net大家应该都没改，如果你连net文件夹都重命名了，那你也改下吧

好了，可以在测试下在发布后的网站上传图片了，至此，vue这一侧上传图片应该是没问题了。如果没有后续需求，至此大家可以完结撒花了。有问题可以留言或者私聊，有帮助的话也希望各位大佬点个关注~

7.unity侧相关改动

这一部分按需查看，没有此需求的可以结束了。很恶心的是，领导要求要把在vue中用ueditor编辑出的富文本，同步展示在第三方应用或者网站里（我们是unity开发的webgl），好吧，开动。

之前在vue编辑的富文本，通过接口存储在数据库里，后端接口的开发略过。在unity拉取到富文本后，发现图片展示不出来，仔细研究发现了问题所在，用ueditor编辑的富文本，保存时，图片使用的是相对路径，是相对当前vue项目的路径，所以unity侧根据这个路径当然找不到图片资源。知道问题就好改了，直接上正则，匹配到路径并且修改

至此完美解决！撒花~

大佬们有问题可以留言或者私聊，有帮助的话也希望各位大佬点个关注~