一、npm 安裝 vue-quill-editor css
npm install vue-quill-editor
二、再main.js中引入vue
import VueQuillEditor from 'vue-quill-editor' // require styles 引入樣式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
三、建立子組件UE.vueios
<template> <div> <Upload :show-upload-list="false" class="editor_upload" :format="['jpg','jpeg','png']" :max-size="2048" multiple :before-upload="handleUpload" action="//jsonplaceholder.typicode.com/posts/" > <Button icon="ios-cloud-upload-outline" ></Button> </Upload> <quill-editor v-model="msg" :options="editorOption" ref="QuillEditor"> </quill-editor> </div> </template> <script> import {PostBase64Upload} from '../../../services/pages/market' //工具 const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike','blockquote', 'code-block',{'indent': '-1'}, {'indent': '+1'},{'color': []}, {'background': []},{'align': []},'image','clean'], // toggled buttonssuperscript/subscript ]; //工具名稱 const titleConfig = { 'ql-bold':'加粗', 'ql-color':'顏色', 'ql-font':'字體', 'ql-code':'插入代碼', 'ql-italic':'斜體', 'ql-link':'添加連接', 'ql-background':'背景顏色', 'ql-size':'字體大小', 'ql-strike':'刪除線', 'ql-script':'上標/下標', 'ql-underline':'下劃線', 'ql-blockquote':'引用', 'ql-header':'標題', 'ql-indent':'縮進', 'ql-align':'文本對齊', 'ql-direction':'文本方向', 'ql-code-block':'代碼塊', 'ql-image':'圖片', 'ql-video':'視頻', 'ql-clean':'清除字體樣式', }; export default { name: 'UE', data () { return { IMAGE_URL: global.IMG_URL, QuillEditor: null, editorOption: { modules: { toolbar: { container: toolbarOptions, // 工具欄 handlers: { 'image': function (value) { if (value) { document.querySelector('.ivu-upload .ivu-btn').click() } else { this.quill.format('image', false); } } } } } }, file_url: '', importFile: '', msg: '' } }, props: ["defaultMsg",], mounted() { this.msg = this.defaultMsg; this.addQuillTitle() }, methods: { // 提交文件並阻斷自動上傳 handleUpload(file) { let that = this; let time = setTimeout(function () { that.upload(file); clearTimeout(time); }, 0); return false }, //上傳圖片 upload(file) { let index = file.name.lastIndexOf("\."); let file_url = file.name.substring(index + 1, file.name.length); if (file_url == 'jpg' || file_url == 'jpeg' || file_url == 'png' ) { let that = this; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { PostBase64Upload({ base64_content: e.target.result, module_name: 'topic' }) .then(data => { that.file_url = data.file_url; that.handleSuccess(that.file_url) }) .catch(err => { that.$Message.error(err); }); return false; }; } else { this.$Message.error("請上傳'jpg','jpeg', png'格式的圖片"); return false; } }, //圖片加入到富文本框中 handleSuccess (res) { let quill = this.$refs.QuillEditor.quill; let length = quill.getSelection().index; quill.insertEmbed(length, 'image', res) quill.setSelection(length + 1); this.msg = this.getImgSrc(this.msg); }, //加入路徑的IP getImgSrc(content) { // 正則替換img的路徑 let that = this; content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) { content = content.replace(new RegExp(capture, 'g'), that.IMAGE_URL + capture);//這裏也能夠替換成須要的路徑 }); content = content.replace(/<img/g, '<img style="width: 100%;"'); return content; }, //富文本工具添加名稱 addQuillTitle () { const oToolBar = document.querySelector('.ql-toolbar'), aButton = oToolBar.querySelectorAll('button'), aSelect = oToolBar.querySelectorAll('select'); aButton.forEach(function(item){ if(item.className === 'ql-script'){ item.value === 'sub' ? item.title = '下標': item.title = '上標'; }else if(item.className === 'ql-indent'){ item.value === '+1' ? item.title ='向右縮進': item.title ='向左縮進'; }else{ item.title = titleConfig[item.classList[0]]; } }); aSelect.forEach(function(item){ item.parentNode.title = titleConfig[item.classList[0]]; }); }, }, } </script> <style> .editor_upload { display: none; } </style>
四、引入該組件頁面npm
<UE :defaultMsg=defaultMsg ref="ue"></UE> <script> import UE from "./UE" //因子組件不能修改父組件的參數,因此父組件提交時,直接調取子組件的參數 this.$refs.ue.msg </script>
上述的工具欄是根據我司的要求來選擇的,若是你想需求的更多,我也是查看別的大神的,你也能夠看看http://www.javashuo.com/article/p-vqiuxgbu-gq.html,json