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-03-13 19:58:19

    推荐Android两种屏幕适配方案

    在Android开发中,由于Android碎片化严重,屏幕分辨率千奇百怪,而想要在各种分辨率的设备上显示基本一致的效果,适配成本越来越高。虽然Android官方提供了dp单位来适配,但其在各种奇怪分辨率下表现却不尽如人意,因此下面探索一种简单且低侵入的适配方式。本文将推荐两种屏幕适配方案,大家可以根据实际情况使用。

  • 2020-03-14 16:35:00

    nuxt.js部署全过程(ubuntu+nginx+node+pm2)

    系统的话本篇是Ubuntu 16.04.6 ,centos也行,大同小异都是Linux。不过如果你是初学者,最好和我使用一样的,因为因为发行版本不同而导致的差异可能导致运行某些东西失败,找问题要找好久。windows server不推荐了,企业用的多,小服务器跑windows server比较费劲。

  • 2020-03-14 23:15:25

    icomoon使用详细介绍

    此篇博文讲述如何利用icomoon导入图标,从而把自己想要的都通过icomoon方式进行,大家都知道,网站以及移动端,用图标还是尽量选择这种。因为直接用image有些图标会失真,从而也是前端开发之中,需求去掌握的一项,很简单的就几个步骤。

  • 2020-03-14 23:39:59

    vuetify和@nuxt/vuetify icon 之我见

    vuetify中v-icon,貌似默认支持 Material Design Icons, Material Icons, Font Awesome 4 and Font Awesome 5, 我自己单独引入了vuetify 用哪一个图标都没有问题。但是用了@nuxt/vuetify只能用mdi-home这样的。不知道因为啥。肯定是封装后,封装成一个了。 但是我修改vuetify的设置,哪一个图标也都能用。哎,不过多研究了。

  • 2020-03-16 15:57:53

    nuxtjs中单独引入Message组件的问题

    // 引入elementUIimport { Message } from 'element-ui';//由于Message组件并没有install 方法供Vue来操作的,是直接返回的,因此按照官方文档单独引入的方法是//会报错的,需要给 Message 添加 install 方法Message.install = function (Vue, options) {Vue.prototype.$message = Message}Vue.use(Message )//消息提示

  • 2020-03-16 16:03:20

    css的var()函数

     随着sass,less预编译的流行,css也随即推出了变量定义var函数。var()函数,就如同sass和less等预编译软件一样,可以定义变量并且进行对应的使用。