类别:FRONTEND / 前端 / 日期:2020-05-02 / 浏览:1717 / 评论:0
近期想启用一个前台评论插件,搜了一下应用商城发现有一个款N年之前的前台评论插件,ueditor编辑器阉割版。测试了一下子发现跟现有模板不太兼容,大概有以下几个问题
1、编辑器不支持现有PHP7.2,会导致表情无法使用 2、zblog回复AjaxComment默认使用<p>标签会导致换行 3、编辑器总体宽度是JS公式跑出来的
我是第一次接触这种JS公式套用的前端插件,所以来回折腾了好久,最终还是解决了...首先是第一个兼容问题..打开 editor4comment\ueditor\dialogs\emotion\emotion.php 将所有count全部替换为getCount并添加getCount判断语句,如下
function getCount($array,$mode = COUNT_NORMAL){ if(is_array($array) || is_object($array)){ return count($array, $mode); }else{ return 0; } }
第二个问题的解决思路,就是将<p>标签替换为<span>标签,打开 editor4comment\ueditor\umeditor.min.js 将所有带<p>的标签全部替换为<span>即可,这里需要注意,有些是带<p style的格式,所以务必手动过一次。
第三个问题的解决方法,参考ueditor官方说明,宽度是通过initialFrameWidth来定义的,搜索了一下发现仍然是通过公式跑出来的,因此我们这里直接修改内外框的公式,如下
var f = e.options; f.minFrameWidth = f.initialFrameWidth ? f.initialFrameWidth: f.initialFrameWidth = e.$body.width() || UM.defaultWidth; b.css({ width: "auto", //修改为自动识别 // width: f.initialFrameWidth, 这里默认是以公式数值为宽度 zIndex: e.getOpt("zIndex") }); //test(b.initialFrameWidth) ? "100%": b.initialFrameWidth - c("padding-left") - c("padding-right") + "px" 这里默认是以公式数值为宽度 test(b.initialFrameWidth) ? "100%": "auto" //修改为自动识别
修改后保存就正常自适应宽度了,不需要刷新,他会根据边框自动适应。顺带说一下我修改了link的绝对样式,他的格式是这样的
"<label for=\"target\" style=\"border-left-style: none;border-top-color: #fff;border-right-color: #fff;border-bottom-color: #fff;border-left-color: #fff;\"><%=lang_input_target%></label>" +
剩下就是有空的时候修改一下图片的自适应样式就可以正常启用了,强迫症真的难受。
发表评论 / 取消回复