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>'


  • 2020-04-28 10:47:16

    currentColor css 的使用

    以前我们在如何动态设置伪元素的颜色上非过不少心思,看完下面的文章,你就会超级见到那的设置伪元素的颜色了。

  • 2020-04-28 10:48:39

    使用currentColor设置SVG样式

    css自己也又很多变量哦,大家还要多多学习哦。CSS中的变量很有用,因为它们允许我们写更多DRY(不再自我重复,也就是不需要一直写重复内容的代码)代码。它们对于管理和维护大型项目也有非常好用,因为它们包含了大量重复的值。

  • 2020-04-29 20:57:07

    mac卸载avast

    第一种就是卸载。打开主界面,在左上角Avast一栏中选择卸载。卸载完之后要么再装回去,要么去找找别的杀软吧

  • 2020-05-06 14:43:53

    bootstrap @media尺寸

    超大屏,1100分辨率,880分辨率,720分辨率,440分辨率以下