ueditor富文本解决图片过大展示不好的问题

2018-09-10 16:10:32

1.文章详情页面的图片展示问题

        由于富文本插入过来的图片过大,导致详情页里面的图片展示超过的我给的布局,尤其是在手机页面。这样就会很难看。

这个可以用

img{
    max-width: 100% !important;
    height: auto !important;
}

            全局限制下,就能解决这个问题。perfect。


2.解决富文本中图片展示不友好,并且手动拉伸不方便的问题。

        本打算用js给展示iframe注入css的方法来解决这个问题,后来通过控制的网络访问,发现富文本的iframe会请求iframe.css的一个文件,再ueditor/theme下面。上面写着可以自定义样式。原来早就留有入口。

        于是把这段话放在了iframe.css里面。完美。并且拖拽也不变形了。


3.扩展自定义js  (更多功能,就可以自己放心的开发了,同样的js和css不要忘记放在展示页面内)

        全文搜索丁文带代码,照葫芦画瓢,我又增加了自定义iframe.js


        部分代码如下

var html = ( ie && browser.version < 9  ? '' : '<!DOCTYPE html>') +
    '<html xmlns=\'http://www.w3.org/1999/xhtml\' class=\'view\' ><head>' +
    '<script src=\'/ueditor/themes/iframe.js\'></script>' +
    '<style type=\'text/css\'>' +
    //设置四周的留边
    '.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' +
    //设置默认字体和字号
    //font-family不能呢随便改,在safari下fillchar会有解析问题
    'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
    //设置段落间距
    'p{margin:5px 0;}</style>' +
    ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +
    (options.initialStyle ? '<style>' + options.initialStyle + '</style>' : '') +
    '</head><body class=\'view\' ></body>'


  • 2018-06-02 00:31:27

    Android layout实现输入法弹出后,布局整体上移

    那如果要实现沉浸式状态栏又要保持布局不会被输入法遮挡,怎么办呢? 只要在根布局加上android:fitsSystemWindows=”true”即可,效果如下(为方便看效果我把背景改成了黄色):

  • 2018-06-04 10:06:43

    mysql查询数据的同时对它进行删除操作

    今天遇见一个问题,需要把mysql数据库里面的 商品主表 和它的每一个条目对应不上的数据给全部删除(数据如下图);也就是整理一下数据库里的数据保证数据的可用;

  • 2018-06-19 16:39:03

    java缩放图片、java裁剪图片代码工具类

    在系统的上传图片功能中,我们无法控制用户上传图片的大小,用户可能会上传大到几十M小到1k的的图片,一方面图片太大占据了太多的空间,另一方面,我们没办法在页面上显示统一大小的图片。所以我们需要对用户上传的图片进行缩放和裁剪,这里的缩放和平常的压缩不是一个意思,因为要实现小的图片会放大,大的图片会缩小,而且是等比例变的,图片不会显示挤压的效果。而这种操作Java完全可以实现。下面分享下java缩放、裁剪图片的工具类。