zoukankan      html  css  js  c++  java
  • Fckeditor 2.6.3增加图片预览功能

    打开editor/filemanager/browser/default/frmresourceslist.html文件

    1、查找:

    return '<tr>' +
         '<td width="16">' +
          sLink +
          '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
         '<\/td><td>&nbsp;' +
          sLink +
          fileName +
          '<\/a>' +
         '<\/td><td align="right" nowrap>&nbsp;' +
          fileSize +
          ' KB' +
        '<\/td><\/tr>' ;

    替换为:

    if ("|jpg|gif|bmp|png|jpeg|".indexOf("|"+fileName.substr( fileName.lastIndexOf('.') + 1 ).toLowerCase()+"|")>-1)
    {
       return '<tr>' +
         '<td width="16">' +
          sLink +
          '<img alt="" src="' + ProtectPath( fileUrl ) + '" width="24" height="24" border="0" onmouseover="previewImgShow(this,\'' + ProtectPath(fileUrl ) + '\')"><\/a>' +
         '<\/td><td>&nbsp;' +
          sLink +
          fileName +
          '<\/a>' +
         '<\/td><td align="right" nowrap>&nbsp;' +
          fileSize +
          ' KB' +
        '<\/td><\/tr>' ;
    }else{
       return '<tr>' +
         '<td width="16">' +
          sLink +
          '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
         '<\/td><td>&nbsp;' +
          sLink +
          fileName +
          '<\/a>' +
         '<\/td><td align="right" nowrap>&nbsp;' +
          fileSize +
          ' KB' +
        '<\/td><\/tr>' ;
    }

    2、然后增加下列函数:
    //鼠标指向预览图片
    function previewImgShow(obj,src){
    if(!obj)return;
    var floatObj=document.getElementById("floatPreviewImg");
       floatObj.innerHTML="<img src='"+src+"' width='260' height='200' />";
       floatObj.style.left=getOffsetLeft(obj)+"px";
       floatObj.style.top=getOffsetTop(obj)+"px";
       floatObj.style.display="";
    }

    //取对象绝对top值,兼容IE、FF(有细微差别)
    function getOffsetTop(obj) {
    var n = obj.offsetTop;
    while (obj = obj.offsetParent) n+= obj.offsetTop;
    return n;
    }
    //取对象绝对left值,兼容IE、FF
    function getOffsetLeft(obj) {
    var n = obj.offsetLeft;
    while (obj = obj.offsetParent) n+= obj.offsetLeft;
    return n;
    }
    //

    3、在 oHtml.Append( '<\/table>' ) ;这行后添加一行:
    oHtml.Append('<div id="floatPreviewImg" style="position:absolute;display:none;" onmouseout="this.style.display=\'none\'"></div>');

  • 相关阅读:
    docker学习构建镜像---第三章节
    docker学习端口映射---第二章节
    推荐一个小而美的Python代码格式化工具
    Bi-LSTM+CRF在文本序列标注中的应用
    大数据分析师到底在干嘛
    Pytorch实现的语义分割器
    Python大数据与机器学习之NumPy初体验
    python数据分析工具——Pandas、StatsModels、Scikit-Learn
    Python修改paramiko模块开发运维审计保垒机
    Python数据预处理:使用Dask和Numba并行化加速
  • 原文地址:https://www.cnblogs.com/ANDY_ZHANG/p/1872040.html
Copyright © 2011-2022 走看看