UMeditor实战应用

***一、最好下载最新版的UMeditor，使用PhP的版本开发，UM比Ue更简洁，优化程度更高，（官方文档都是对ueditor的介绍，对UM的实用性不高，很多东西都无法参考）https://ueditor.baidu.com/website/umeditor.html
Alt
third-party 文件夹里是算法js和JQ文件

themes 文件夹里放的是一些默认的images和css样式

php 放的当然就是php文件图片的复制粘贴就在这里设置

lang 文件夹放的两个版本的编辑器功能目录结构和备注

dialogs 文件夹放的是各个复杂功能组件的资源配置文件，尤其是常用images music video 或者后期添加的功能配置

umeditor.min.js 压缩版的UM代码

umeditor.config.js UM的配置项

解压后的目录是这样的，直接打开index.html 就可以启动
Alt

二、项目中使用（以添加music为例）
直接引入上面的文件，并在项目的index.html中引入这些文件路径
Alt
um = UM.getEditor( ’ myEditor’ ) 这个方法实例化一下到对应的ID节点上，设置宽高
Alt
然后根据项目的需求删除或者添加一些操作项，
打开umeditor.config.js 文件，
Alt
删除的话简单，直接去掉对应的字符就可以的，
在lang/zh-cn/zh-cn.js里可以看对应的介绍，控制鼠标划入时的功能提示，以及对应的弹框提示字段信息，都可以在这里配置
Alt
UM是对ueditor的精简优化升级，操作功能提供的比较少，常规开发基本都够用，添加完整功能比较繁琐，
以添加music为例
1.首先在umeditor.config.js 里面的toolbar添加music，
2.在lang/zh-cn/zh-cn.js 里面的labelMap添加 music:‘音乐’ ，在下面的music配置里模仿上面的video加入下面内容，或者从ueditor里复制过来

'music':{
'static':{
'lang_input_text':'文本内容：' ,
'lang_input_url':'在线链接地址：',
'lang_input_title':'标题：',
},
'validLink':'只支持选中一个链接时生效',
}

3.在umeditor.min.js里搜索UM.registerUI字段，这个字段是专门来注册自定义按钮

UM.registerUI("link image video music map formula", function (a) {

4.注册玩按钮之后，在后面添加插件或者功能代码

UM.plugins['music'] = function () {var me = this;this.addOutputRule(function (root) {$.each(root.getNodesByTagName('audio'), function (i, a) {var _src = UM.utils.html(a.getAttr('_src'));if (!/^(ftp|https?|\/|file)/.test(_src)) {_src = 'http://'+ _src;}a.setAttr('src', _src);a.setAttr('_src')})});this.addInputRule(function (root) {$.each(root.getNodesByTagName('audio'), function (i, a) {a.setAttr('_src', UM.utils.html(a.getAttr('src')));})});me.commands['music'] = {execCommand: function (cmdName, opt) {var me = this;var rng = me.selection.getRange();if (rng.collapsed) {var start = rng.startContainer;if (start == domUtils.findParentByTagName(start,'audio', true)) {$(start).attr(opt);rng.selectNode(start).select()} else {rng.insertNode($(`<iframe class='iframeMusicslocalMusic' mid="${opt.mid}" musicid="${opt.musicid}" scrolling="no"frameborder="0" coverImg="${opt.coverImg}" audiourl="${opt.audiourl}"albumurl="${opt.coverImg}" singer="${opt.singername}" music_name="${opt.songname}" src="https://mp.weixin.qq.com/${opt.datasrc}"}"></iframe>`)[0])}} else {console.log('插入在线音乐');}},queryCommandState: function () {return this.queryCommandValue('music') ? 1 : 0;},queryCommandValue: function () {var path = this.selection.getStartElementPath();var result;$.each(path, function (i, n) {if (n.nodeName == "audio") {result = n;return false;}})return result;}};};

这里的execCommand的值需要在dialogs里创建music文件夹，新建music.js插入代码

项目中我们是调用的QQ音乐接口，需要同步到微信后台，数据都需要针对微信的规则进行匹配拼接，

微信后台音乐html节点都是和,这种自定义的编辑器是不会显示的，

(function(){var utils = UM.utils;var sub_search_list = []function srcStartWith(href, arr) {href = href.replace(/^\s+|\s+$/g, '');for (var i = 0, ai; ai = arr[i++];) {if (href.indexOf(ai) == 0) {return true;}}return false;}UM.registerWidget('music', {tpl: "<style type=\"text/css\">" +`* {margin: 0px;padding: 5px;}.flex {display: flex;}.flex_wrap {flex-wrap: wrap;}.flex_between {display: flex;justify-content: space-between;align-items:center}.flex_around {display: flex;justify-content: space-around;}.music {width: 100% margin: 0 auto;}.edui-dialog-music{width:500px!important}.edui-dialog-music-body{width:495px!important}.music .music_search{padding:10px 20px 0 20px}.music .music_search a {color: #666;text-decoration: none;border: 1px solid #e1e1e1;border-radius: 6px;margin-left: 10px;padding: 3px 15px;}.music .music_search input {border-radius: 6px;border: 1px solid #e1e1e1;padding: 0 0 0 10px;outline: none;}.music .music_conter {padding-top: 20px;min-height:350px}.music .music_conter > div:first-child {padding-left: 20px;padding-right: 20px;background-color: #f4f5f9;color: #353535;font-size: 14px;line-height: 40px;vertical-align: middle;}.music .music_conter > div:first-child section {width: calc(100% / 3);max-width: calc(100% / 3);}.music .music_conter > div ul {padding: 10px 20px;border-bottom: 1px solid #e0e0e0;min-height:60px;}.music .music_conter > div ul li {padding:0 5px;list-style: none;width: calc(100% / 3);max-width: calc(100% / 3);color: #353535;font-size: 14px;}.music .music_conter > div ul li p {color: #353535;font-size: 14px;padding-left:10px}.music .music_conter > div ul li p:last-child {color: #8d8d8d;}` +"</style>" +`<div class="music"><div class="flex music_search"><input id="postval" placeholder="搜索 歌名 或 歌手" type="text"><a id="sub_search" href="javascript:void(0)">搜索</a></div><div class="music_conter"><div class="flex_between"><section>歌曲</section><section>歌手</section><section>专辑</section></div><div id="music_conter_list"></div></div></div>`,initContent: function (editor) {var lang = editor.getLang('music');if (lang) {var html = $.parseTmpl(this.tpl, lang.static);}this.root().html(html);},initEvent: function (editor, $w) {var music = editor.queryCommandValue('music');$('#sub_search').click(function(){// $('.music_conter').show()let postval = $('#postval').val()$("head").append(`<script src='https://auth-external.music.qq.com/open/fcgi-bin/fcg_weixin_music_search.fcg?jsonCallback=success_jsonpCallback&remoteplace=txt.weixin.officialaccount&w=${postval}&platform=weixin&perpage=15&curpage=1&callback=success_jsonpCallback&_=1542941930209'><\/script>`);});success_jsonpCallback = function(result){sub_search_list=result.listvar html=''result.list.map((el,i)=>{html+=`<ul class="flex_between musicList" data-index=${i}><li><p>${el.songname}</p></li><li><p>${el.singername}</p></li><li>${el.albumname}</li></ul>`})$('#music_conter_list').html(html)$('#music_conter_list ul').click(function(){$(this).css('background-color','#e1e1e1')$(this).attr('data-id','1')$(this).siblings().css('background-color','#fff')$(this).siblings().attr('data-id','2')})}},buttons: {'ok': {exec: function (editor, $w) {let that = thisconsole.log(sub_search_list,'sub_search_list')let ind = $('#music_conter_list ul[data-id="1"]').attr('data-index')let albumurl = sub_search_list[ind].f.split("|")[22]let newalbumurl = "/" + albumurl.slice(albumurl.length - 2, albumurl.length - 1) + "/" + albumurl.slice(albumurl.length - 1, albumurl.length) + "/" + albumurl + ".jpg"let audiourl = sub_search_list[ind].m4a.replace("ws.stream", "dl.stream")let datasrc = "/cgi-bin/readtemplate?t=tmpl/qqmusic_tmpl&singer=" + encodeURIComponent(sub_search_list[ind].f.split("|")[3]) + "&music_name=" + encodeURIComponent(sub_search_list[ind].songname)+"&albumurl=" + newalbumurllet N = sub_search_list[ind].songnamelet SN = sub_search_list[ind].singernamevar name = N.replace(/[^\u0000-\u007f]/g, "aa").lengthname = name > 30 ? N.substring(0, 30) + "..." : (N || (N = "&nbsp;"), N)var singername = SN.replace(/[^\u0000-\u007f]/g, "aa").lengthsingername = singername > 30 ? SN.substring(0, 30) + "..." : (SN || (SN = "&nbsp;"), SN)if (sub_search_list[ind]) {editor.execCommand('music', {songname:sub_search_list[ind].songname,//歌曲名albumname:sub_search_list[ind].albumname,//专辑名singername:sub_search_list[ind].singername,//歌名人名mid:sub_search_list[ind].f.split("|")[20],musicid:sub_search_list[ind].id,coverImg: "https://y.gtimg.cn/music/photo_new/T002R68x68M000" + newalbumurl.substring(newalbumurl.lastIndexOf('/') + 1),downUrl:sub_search_list[ind].downUrl,albumurl:newalbumurl,audiourl:audiourl,datasrc:datasrc,getextname:name,getextsingername:singername});}}},'cancel':{}},width: 400})})()

然后重新启动一波就可以操作，
Alt

Alt

三、项目中使用（从微信聊天窗口复制图片以及微信防盗链）
先在umeditor.config.js 里面最下面看看有没有白名单，白名单没有的话编辑器会自动过滤标签，没有就加上去

, whiteList: {// mp-miniprograma: ['target', 'href', 'title', 'style', 'class', 'id'],abbr: ['title', 'style', 'class', 'id'],address: ['style', 'class', 'id'],area: ['shape', 'coords', 'href', 'alt', 'style', 'class', 'id'],article: ['style', 'class', 'id'],aside: ['style', 'class', 'id'],audio: ['autoplay', 'controls', 'loop', 'preload', 'src', 'style', 'class', 'id'],b: ['style', 'class', 'id'],bdi: ['dir'],bdo: ['dir'],big: [],blockquote: ['cite', 'style', 'class', 'id'],br: [],caption: ['style', 'class', 'id'],center: [],cite: [],code: ['style', 'class', 'id'],col: ['align', 'valign', 'span', 'width', 'style', 'class', 'id'],colgroup: ['align', 'valign', 'span', 'width', 'style', 'class', 'id'],dd: ['style', 'class', 'id'],del: ['datetime', 'style', 'class', 'id'],details: ['open', 'style', 'class', 'id'],div: ['style', 'class', 'id'],dl: ['style', 'class', 'id'],dt: ['style', 'class', 'id'],em: ['style', 'class', 'id'],embed: ['style', 'class', 'id', '_url', 'type', 'pluginspage', 'src', 'width', 'height', 'wmode', 'play', 'loop', 'menu', 'allowscriptaccess', 'allowfullscreen'],font: ['color', 'size', 'face', 'style', 'class', 'id'],footer: ['style', 'class', 'id'],h1: ['style', 'class', 'id'],h2: ['style', 'class', 'id'],h3: ['style', 'class', 'id'],h4: ['style', 'class', 'id'],h5: ['style', 'class', 'id'],h6: ['style', 'class', 'id'],header: ['style', 'class', 'id'],hr: ['style', 'class', 'id'],i: ['style', 'class', 'id'],iframe: ['style', 'class', 'id', 'src', 'frameborder', 'data-latex','scrolling','frameborder','musicid','mid','albumurl','audiourl','music_name','singer','play_length','musictype','otherid','albumid','data-miniprogram-appid','data-miniprogram-path','data-miniprogram-nickname','data-miniprogram-avatar','data-miniprogram-title','data-miniprogram-imageurl'],img: ['src', 'title', 'width', 'height', 'style', 'class', 'id', '_url'],ins: ['datetime', 'style', 'class', 'id'],li: ['style', 'class', 'id'],mark: [],nav: [],ol: ['style', 'class', 'id'],p: ['style', 'class', 'id'],pre: ['style', 'class', 'id'],s: [],section: ['style', 'class', 'width', 'height','display','padding','background'],small: ['style', 'class', 'id'],span: ['style', 'class', 'id', 'data-original'],sub: ['style', 'class', 'id'],sup: ['style', 'class', 'id'],strong: ['style', 'class', 'id'],table: ['width', 'border', 'align', 'valign', 'style', 'class', 'id'],tbody: ['align', 'valign', 'style', 'class', 'id'],td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'style', 'class', 'id'],tfoot: ['align', 'valign', 'style', 'class', 'id'],th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'style', 'class', 'id'],thead: ['align', 'valign', 'style', 'class', 'id'],tr: ['rowspan', 'align', 'valign', 'style', 'class', 'id'],tt: ['style', 'class', 'id'],u: [],ul: ['style', 'class', 'id'],svg: ['style', 'class', 'id', 'width', 'height', 'xmlns', 'fill', 'viewBox'],video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'style', 'class', 'id'],}

先说图片防盗链问题，就这一句话就可以解决微信端的图片不现实问题

Alt

UM的复制粘贴分为好几种，从网页复制，本地复制，QQ聊天窗口复制，微信聊天窗口复制，粘贴的时候调用

的接口和命令又是不一样的，所以对于微信复制图片的问题，由后台解决会容易很多，

Alt

从微信聊天窗口复制图片的时候报的这个错，发现是UM包里有一个HPH文件，

Alt

<?phpheader("Content-Type:text/html;charset=utf-8");//error_reporting(E_ERROR | E_WARNING);date_default_timezone_set("Asia/chongqing");include "Uploader.class.php";require_once '../../../vendor/autoload.php';//上传配置$config = array("savePath" => "upload/", //存储文件夹"maxSize" => 1000, //允许的文件最大尺寸，单位KB"allowFiles" => array(".gif", ".png", ".jpg", ".jpeg", ".bmp") //允许的文件格式);//上传文件目录$Path = "upload/";//背景保存在临时目录中$config["savePath"] = $Path;$up = new Uploader("upfile", $config);$type = $_REQUEST['type'];$callback = isset($_GET['callback']) ? $_GET['callback'] : null;$info = $up->getFileInfo();$dir = "verifier/";//$dir = "difftools/";//上传到OSSuse OSS\OssClient;use OSS\Core\OssException;//公司测试地址$accessKeyId = "Zssxcg0nUUpge8q2";$accessKeySecret = "FKLpvnFE9J38zAHrQfdYrdM7C0WzlS";$endpoint = "-----";$bucket = "-----";// 文件名称$object = $dir . $info['name'];// <yourLocalFile>由本地文件路径加文件名包括后缀组成，例如/users/local/myfile.txt$filePath = realpath(__DIR__ . '/' . $info['url']);$oss_result = null;try {$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);// $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint, true, $signature);// var_dump($ossClient->listBuckets());// exit;// $oss_result = $ossClient->putObject($bucket, $object, file_get_contents($filePath));$oss_result = $ossClient->uploadFile($bucket, $object, $filePath);//var_dump($oss_result);} catch (OssException $e) {printf(__FUNCTION__ . ": FAILED\n");printf($e->getMessage() . "\n");return;}//print(__FUNCTION__ . ": OK" . "\n");//exit;if (isset($oss_result['info']['url'])) {//$info['oss_url'] = $oss_result['info']['url'];$info['url'] = $oss_result['info']['url'];@unlink($filePath);}/*** 返回数据*/if ($callback) {echo '<script>' . $callback . '(' . json_encode($info) . ')</script>';} else {echo json_encode($info);}

因为涉及到跨域，所以图片在粘贴的时候找不到本地的图片，需要我们先上传到服务器，然后返回储存的线上地址，覆盖本地粘贴板图片，

我们前端需要做的就是修改umeditor.config.js 里的imagePath;’ ’ 置空就好了，后端解决的话会很快

Alt

只需要这两部就可以轻松解决，微信端图片复制的问题，

四、项目中使用（图片的缩放和上传）
UM下载下来会发现，图片的缩放存在问题，原因是编辑器默认的box-sizing :border-box ，只在ueditor.min.css中加入如下代码，就好了

.edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}.edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}

修改Upload 本地上传中 config 函数中的 url

先在本地向自己的服务器上传，获取到线上地址，然后加载到编辑器中，这样图片就可以显示了，（以OSS上传为例）


uploadOssImg({
browse_button: "umeditor-upload-image",
init: {
BeforeUpload: () => {
me.toggleMask("Loading....");
},
FileUploaded: (up, file, info, imgurl) => {
if (imgurl) {
me.uploadComplete({
state: "SUCCESS",
url: imgurl
})
}
},
Error: (up, err) => {
me.uploadComplete(err)
}
}
})

UMeditor实战应用相关推荐

umeditor 专题
一.安装在 angular6/7 中使用 umeditor 富文本编辑器 (Ionic3适用,实用) 二.umeditor实用封装示例(实用.赞) https://github.com ...
【实战】Spring+Spring MVC+Mybatis实战项目之云笔记项目
[实战]Spring+Spring MVC+Mybatis实战项目之云笔记项目一.项目简介 1.项目概述云笔记,是tmocc上的一个子项目,用于客户进行在线学习记录,分享,收藏 ...
IDEA的Docker插件实战(Dockerfile篇)
IDEA的Docker插件实战(Dockerfile篇) IntelliJ IDEA的Docker插件能帮助我们将当前工程制作成Docker镜像.运行在指定的远程机器上,是学习和开发阶段的好帮手,本文 ...
数据结构（04）— 线性顺序表实战
1. 设计思路本实战的实质是完成对学生成绩信息的建立.查找.插入.修改.删除等功能,可以首先定义项目的数据结构,然后将每个功能写成一个函数来完成对数据的操作,最后完成主函数以验证各个函数功能并得出运 ...
【置顶】利用 NLP 技术做简单数据可视化分析教程（实战）
置顶本人决定将过去一段时间在公司以及日常生活中关于自然语言处理的相关技术积累,将在gitbook做一个简单分享,内容应该会很丰富,希望对你有所帮助,欢迎大家支持. 内容介绍如下你是否曾经在租房时因 ...
2 用python进行OpenCV实战之图像基本知识
前言在这一节,我们将学习图像的基本构成单元--像素,我们将详细的探讨什么是像素?像素是如何使用来构成图像的?然后学习如何通过OpenCV来获取和操纵像素. 1 什么是像素所有的图像都包含一组像素, ...
PyTorch 高级实战教程：基于 BI-LSTM CRF 实现命名实体识别和中文分词
20210607 https://blog.csdn.net/u011828281/article/details/81171066 前言:译者实测 PyTorch 代码非常简洁易懂,只需要将中文分词 ...
实战清除电脑上恶意弹出广告窗口
实战清除电脑上恶意弹出广告窗口当你碰到电脑桌面右下角时不时弹出广告,如游戏推广.商品广告等,怎么删也删不掉,这是因为用户不小心安装有捆绑广告推广的软件,系统被静默安装了恶意木马广告,这不仅仅是影响用 ...
deeplearning模型量化实战
deeplearning模型量化实战 MegEngine 提供从训练到部署完整的量化支持,包括量化感知训练以及训练后量化,凭借"训练推理一体"的特性,MegEngine更能保证量化 ...

UMeditor实战应用

UMeditor实战应用相关推荐

最新文章

热门文章