Throw out problem

It is common to encounter a UEditor that is edited on the PC and needs to be displayed on both PC and mobile. If it’s just text, there are probably no compatibility issues to be aware of. However, uEditor can edit and insert tables or images, which may need to be compatible if displayed on mobile devices.

1, tables,

When the table is displayed on mobile, the borders disappear and the format becomes ugly.

On the mobile side, make it slide left and right.

2, the picture

Some images look fine on the PC, but are too small to see on the mobile

On mobile, give it a zooming in effect by clicking on the image.

Solution:

The data we get from the back end is a string of HTML fragments, and we need a plug-in.

Cheerio, which is a plugin for parsing strings.

Implement table sliding using another plugin

better-scroll

Parsing string
<! --main.js--> // Import preview from image zoom'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview,{
  fullscreenEl:false// Turn off the full-screen button tapToClose:true,
  closeEl:false,})Copy the code
<! --> <template> <div> <div class="content-block" v-html="regHtml(detailData.content)"></div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll';
const cheerio = require('cheerio');
export default{
    data() {return{imgPreview: {}, width: 784, // PC display Max width}},mounted() {
        const _this = this;
        this.$preview.on('imageLoadComplete',(e,item)=>{
            console.log(this.$preview.self)
            this.imgPreview = this.$preview.self
        })
        document.addEventListener('backbutton'.function(e) {// Handle your business logic here e.preventDefault(); // Backbutton event has the default backback history, preventDefault() if you want to prevent the default backbackif(_this.imgPreview.close){
                _this.imgPreview.close()
            }
            _this.$router.go(-1) }); }, methods: { regHtml(str) { const _this = this; const $ = cheerio.load(str); // Screen width const docEl = document.documentElement; const clientWidth = docEl.clientWidth; $('img').each((index, element) => {
            // console.log($(element));
            const attr = element.attribs;
            $(element).attr('preview', index + 1); // If you do not need to set the image width, you can omit itif/* * const rate = attr. Width / _this.width; /* * const rate = attr. // const wh = width/height; $(element).attr('height', rate * clientWidth / wh);
              $(element).attr('width', rate * clientWidth);
              $(element).attr('style'.' ');
              $(element).attr('class'.'img-skew'); }}); $('table').each((index, element) => {
            const attr = element.attribs;
            $(element).attr('border'.'1px solid #ccc');
            const tableContent = $('<div class="table-content"></div>');
            $(element).wrap(tableContent);
          });
          this.$nextTick(() => {
            this.$root.$previewRefresh(a); / / form and transverse const tableList = document. The getElementsByClassName ('table-content');
            const tlen = tableList.length;
            for (let i = 0; i < tlen; i++) {
              console.log(tableList[i]);
              new Bscroll(tableList[i], {
                'scrollX': true.'eventPassthrough': 'vertical'}); }});return $.html();
        }
    }
}
</script>

<style lang='scss'>
.img-skew{
    max-width:100%;
}
</style>
Copy the code

The last

If you have a better solution, please leave a message.