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