类别: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>" +

    剩下就是有空的时候修改一下图片的自适应样式就可以正常启用了,强迫症真的难受。

解决zblog前台ueditor插件相关问题  p ueditor zblog initialFrameWidth emotion 第1张

赞助

感谢您的打赏~

打开支付宝扫一扫,即可进行扫码打赏哦~

版权声明 : 本文使用「署名-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议 / Article Use Creative Commons Attribution-ShareAlike 4.0 International License「CC BY 4.0」

 可能感兴趣的文章

伤心叹戈

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。

近期评论