先上本人的实际需求:
需求是点编辑,弹出一个窗口,窗口中是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侧根据这个路径当然找不到图片资源。知道问题就好改了,直接上正则,匹配到路径并且修改
至此完美解决!撒花~
大佬们有问题可以留言或者私聊,有帮助的话也希望各位大佬点个关注~