不会健身的程序员
不是好作家

项目总结-百度编辑器(1):插入图片的时候自动添加width和heigth属性

用百度编辑器ueditor做富文本编辑器,在显示内容的时候需要对内容的图片进行延迟加载,其中有2点比较重要,1、需要每张图片都有width和height宽高属性进行占位,这样延迟加载的时候内容的高度基本不会变,2、需要把图片的src属性替换成另外一个属性进行图片延迟加载。下面以服务器端java为例介绍如何在插入图片的时候自动添加宽高属性。小林的做法如下:

步骤一:

在ActionEnter类的invoke方法中添加下面高亮的代码

case ActionMap.UPLOAD_IMAGE:
case ActionMap.UPLOAD_SCRAWL:
case ActionMap.UPLOAD_VIDEO:
case ActionMap.UPLOAD_FILE:
    conf = this.configManager.getConfig( actionCode );
    conf.put("actionCode", actionCode);
    state = new Uploader( request, conf ).doExec();
    break;

步骤二:

分别在BinaryUploader和Base64Uploader类的save方法中添加下面高亮的代码

storageState.putInfo("url", PathFormat.format(savePath));
storageState.putInfo("type", suffix);
storageState.putInfo("original", "");
if(StringUtils.equals((String)conf.get("imageActionName"), "uploadimage")) {
    InputStream tempis = null;
    BufferedImage src = null;
    int height = -1;
    int width = -1;
    try {
        tempis = new FileInputStream(new File(physicalPath));
        src = javax.imageio.ImageIO.read(tempis);
        height = src.getHeight(null); // 得到源图高
        width = src.getWidth(null);
        tempis.close();
        tempis = null;
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        if(tempis != null) {
            IOUtils.closeQuietly(tempis);
        }
    }
    if(height > 0) {
        storageState.putInfo("height", height);
    }
    if(width > 0) {
        storageState.putInfo("width", width);
    }
}

步骤三:

以ueidtor 1.4.3.2为例子,修改dialogs/image/image.js加入宽高属性

getInsertList: function () {
    var i, data, list = [],
    align = getAlign(),
    prefix = editor.getOpt('imageUrlPrefix');
    for (i = 0; i < this.imageList.length; i++) {
        data = this.imageList[i];
        list.push({
            src: prefix + data.url,
            _src: prefix + data.url,
            title: data.title,
            width: data['width'] || '',
            height: data['height'] || '',
            alt: data.original,
            floatStyle: align
        });
    }
    return list;
}
赞(0)
转载请注明出处:林俊龙博客 » 项目总结-百度编辑器(1):插入图片的时候自动添加width和heigth属性

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

年年岁岁花相识,岁岁年年人不同

给我留言网站地图

谢主隆恩

支付宝扫一扫打赏

微信扫一扫打赏