vue-html5-editor 使用

安裝      npm install vue-html5-editor

在main.js中 

import VueHtml5Editor from 'vue-html5-editor'
import '../src/assets/css/font-awesome.min.css'  //引入樣式  需要單獨下載
import oedit from './components/initHTMLEditor.js' //引入配置文件

Vue.use(VueHtml5Editor, oedit)  

在 ***.vue 中

<vue-html5-editor :content="content" @change="updateData"  :height="500"  :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>

methods: { 
        updateData(e) {  // 把所有傳入的圖片都統一成寬度100%； 防止用戶上傳圖片過大
            this.content = e;
            console.info(e);
            let c1 = e.replace(/<img width="100%"/g, "<img");
            let c2 = c1.replace(/<img/g, '<img width="100%"');
            this.content = c2;
        }
    }

雖然可以做圖文混排，不過在手機上依舊是操作困難。

個人建議：還是儘量在電腦端做上傳，手機瀏覽。