ueditor_对接秀米
需求是 公众号文章复制可以复制到小程序里，并且可以文章的链接跳转小程序内部页
后端 admin 集成
后端 admin 我使用的是 vue，为了方便集成 udeitor 使用了vue-ueditor-wrap
一: 去 ueditor 官网下载官方源码
https://ueditor.baidu.com/website/download.html
public 下新建 UEditor，放下载的文件全丢进去
然后去秀米 秀米图文排版 UEditor 插件示例 (xiumi.us) 下载他需要的文件 ,全部放到 UEditor 下
二：安装 vue-ueditor-wrap
npm i vue-ueditor-wrap
import VueUeditorWrap from "vue-ueditor-wrap";
components: {
VueUeditorWrap;
}
<vue-ueditor-wrap v-model="formData.description" :config="myConfig"/>
//v-model是你的富文本内容 和 :config 都是必须的
this.myConfig = {
catchRemoteImageEnable: true,
serverUrl: ``, // 上传功能的后端服务器接口地址
UEDITOR_HOME_URL: '/UEditor/', // 你的UEditor资源存放的路径,相对于打包后的index.html
autoHeightEnabled: true, // 编辑器是否自动被内容撑高
autoFloatEnabled: false, // 工具栏是否可以浮动
initialFrameHeight: 600, // 初始容器高度
initialFrameWidth: '100%', // 初始容器高度
enableAutoSave: false, // 关闭自动保存
loadServerConfig: false
}
三：引入并使用 vue-ueditor-wrap
这些完成后，ueditor 就 ok 了
三： 接入秀米 我的文件结构如下图
我是在 index.html 里直接引入了
<link rel="stylesheet" href="<%= BASE_URL %>public/css/app.css" />
<link rel="stylesheet" href="/UEditor/themes/default/css/ueditor.css'" />
<link rel="stylesheet" href="/jquery.toast.min.css" />
<script src="/jquery.js"></script>
<script src="/jquery.toast.min.js"></script>
<link rel="stylesheet" href="/UEditor/xiumi-ue-v5.css" />
<script src="/UEditor/ueditor.config.js"></script>
<script src="/UEditor/ueditor.all.js"></script>
<script src="/UEditor/lang/zh-cn/zh-cn.js"></script>
<script
type="text/javascript"
charset="utf-8"
src="/UEditor/xiumi-ue-dialog-v5.js"
></script>
修改 xiumi-ue-dialog.js 对应文件放的路径
UE.registerUI("dialog", function (editor, uiName) {
var btn = new UE.ui.Button({
name: "xiumi-connect",
title: "秀米",
onclick: function () {
var dialog = new UE.ui.Dialog({
iframeUrl: "/UEditor/xiumi-ue-dialog-v5.html",
editor: editor,
name: "xiumi-connect",
title: "秀米",
cssRules:
"width: " +
(window.innerWidth - 60) +
"px;" +
"height: " +
(window.innerHeight - 60) +
"px;",
});
dialog.render();
dialog.open();
},
});
return btn;
});
集成成功会出现秀米的图标,点击就可以弹出秀米的编辑器了
由于秀米编辑器图片都是存在他自己的服务器上的，小程序不能直接访问，所以我们需要利用 Ueditor 的自动抓图功能，抓取图片的地址，然后把图片上传到自己的服务器上
开启自动抓图;
vue-ueditor-wrap 的config 里面配置
this.myConfig = {
catchRemoteImageEnable: true,
};
在ueditor.all.js 搜下catchRemoteImageEnable 就可以找到具体的抓图代码了
如果你没配置 配置(vue-ueditor-wrap 的 config 属性与 ueditor.config.js)中的 serverUrl 那么你需要修改 catchremoteimage 函数上传到自己的服务器上
问题 1 默认的抓图代码没有上传图片的提示 我们加一下
function catchremoteimage(imgs, callbacks) {
console.log(catcherFieldName);
_myToast = $.toast({
text: "上传图片中...",
hideAfter: false,
position: "mid-center",
allowToastClose: true,
});
}
问题 2 默认的抓图代码没有抓取秀米背景
/**
* 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片
*/
UE.plugins["catchremoteimage"] = function () {
}
在UE.plugins["catchremoteimage"] 函数里加上
//背景图片地址的替换
backgroundimagestags = domUtils.getElementsByTagName(me.document,"section span div p "),
var bodyHtml = me.document.body.innerHTML;
//console.log("上传之前html：" + bodyHtml);
for (var a = 0; a < backgroundimages.length; a++) {
oldSrc = backgroundimages[a] || "";
for (j = 0; (cj = list[j++]); ) {
if (oldSrc == cj.source && cj.state == "SUCCESS") {
//抓取失败时不做替换处理
newSrc = catcherUrlPrefix + cj.url;
console.log("上传之后oldSrc：" + oldSrc);
console.log("上传之后newSrc：" + newSrc);
console.log(
"上传之后html：" +
me.document.body.innerHTML.replace(oldSrc, newSrc)
);
bodyHtml = bodyHtml.replace(oldSrc, newSrc);
break;
}
}
}
问题三 背景图片的引号会被 ueditor 转义&qout;
ueditor.config.js
/**
* 将str中的html符号转义,将转义“'，&，<，"，>”五个字符
* @method unhtml
* @param { String } str 需要转义的字符串
* @return { String } 转义后的字符串
* @example
* ```javascript
* var html = '<body>&</body>';
*
* //output: <body>&</body>
* console.log( UE.utils.unhtml( html ) );
*
* ```
*/
unhtml: function (str, reg) {
return str
? str.replace(
reg || /[&<">'](?:(amp|lt|quot|gt|#39|nbsp|#\d+);)?/g,
function (a, b) {
if (b) {
return a;
} else {
return {
"<": "<",
"&": "&",
// '"': """, //取消转义
">": ">",
"'": "'",
}[a];
}
}
)
: "";
},
问题四 秀米点导出的时候不触发抓图
xiumi-ue-dialog-v5.html
window.addEventListener(
"message",
function (event) {
console.log(
"Received message from xiumi, origin: %o %o",
event.origin,
xiumi_url
);
if (event.origin == xiumi_url) {
console.log("Inserting html");
editor.execCommand("insertHtml", event.data);
editor.fireEvent("catchRemoteImage"); // 触发抓图
console.log("Xiumi dialog is closing");
dialog.close();
}
},
false
);
下面开始小程序的配置
小程序我这里使用的是 uniapp
引入 wxpaser 插件
pages.json 这个插件可不小，我把他放分包里面了
"subPackages": [{
"root": "contentCenter",
"independent": true,
"wxparserPlugin": {
"version": "0.4.0",
"provider": "wx9d4d4ffa781ff3ac"
}
},
]
页面里直接使用
<wxparser :image-preview="false" //是否开启图片预览 :rich-text="richText"
//富文本内容 @tapLink="goto($event)" //跳转链接事件 />
goto(event) {
wx.navigateTo({
url: event.detail.href
});
}
调整一下 wxparser 的样式 秀米的宽度居然是 384px 导致超出屏幕
<style>
.wxParser-section {
width: 350px !important;
margin: 0 auto;
padding: 0 !important;
}
.wxParser-p {
padding: 15px !important;
}
</style>
🎉ok 完成
