解决zblog前台ueditor插件相关问题

类别：FRONTEND / 前端 / 日期：2020-05-02 / 浏览：1702 / 评论：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>" +

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

赞助