今天在vue里面插入富文本遇到了一些小坑在這里提供給大家用于參考,如有錯(cuò)誤,望多加指正。
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了達(dá)孜免費(fèi)建站歡迎大家使用!
我這里使用的是Element-ui的上傳圖片組件
首先引入Element-ui(這個(gè)我就不作贅述了,詳情參考element中文官網(wǎng))
在引入富文本組件vue-quill-editor
使用在main.js引入相應(yīng)的樣式
import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor);
現(xiàn)在就可以在vue中使用富文本
這里需要注意的是editorOption是必須要配置的
其樣式由于沒有在modules配置工具攔所以它的出事顯示就較為簡(jiǎn)潔
如果需要上傳圖片或者視頻就需要對(duì)模塊里面對(duì)工具欄進(jìn)行改造重構(gòu)(使用handlers)
modules: { toolbar: { handlers: { container: toolbarOptions, // 工具欄 'image': function(value) { if(value) { alert(1) } else { this.quill.format('image', false); } }, 'video': function(value) { if(value) { alert(2) } else { this.quill.format('image', false); } }, } } }
配置好了過(guò)后會(huì)發(fā)現(xiàn)整個(gè)富文本編輯器的工具欄沒有改變,還是只保留了幾個(gè)基本的富文本功能。
這個(gè)是因?yàn)閔andlers是用來(lái)定義自定義程序的,而添加自定義處理程序就會(huì)覆蓋它本省的工具欄和主體行為所以我們還要再自行配置下自己需要的工具欄,所有功能的配置如下,大家也可以按需配置
const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{ 'font': [] }], [{ 'align': [] }], ['link', 'image', 'video'], ['clean'] // remove formatting button ]
此時(shí)的文本工具就會(huì)豐富了
這樣它的工具欄就會(huì)有上傳圖片和視頻的接口,然后你就可以在工具攔的配置里的image和video里配置上傳圖片或視頻,可以根據(jù)它的點(diǎn)擊來(lái)給他相應(yīng)的處理回應(yīng),也可以為其重新定向事件,這里我這里給大家介紹重新定向事件
首先定義一個(gè)上傳組件,我這里用的是自己寫好的上傳 組件
設(shè)置好相應(yīng)屬性值和事件
這里需要注意的是如果想直接實(shí)現(xiàn)上傳的話就需要在工具欄設(shè)置點(diǎn)擊圖片上傳的時(shí)候用指針函數(shù)將this鎖定再做其他操作
由于我是自己寫的上傳所以要插入到富文本內(nèi)部所以添加內(nèi)容的時(shí)候需要加入img標(biāo)簽,因?yàn)楦晃谋緝?nèi)部是支持圖片的解析的
AddInputUrl(data) { var a = data var tp = a.length var imghz = a.slice(tp - 4, tp) var src = 'src="' + a + '"' var bq = "" this.value += bq }
做到這里一個(gè)支持上傳圖片的富文本就做好了,再來(lái)說(shuō)下視頻,由于引入的富文本絕大多數(shù)都是沒有內(nèi)置的播放器所以video標(biāo)簽在富文本里面會(huì)失效,在這里我就選擇直接用iframe標(biāo)簽
var bq='' this.value += bq
總結(jié)
以上所述是小編給大家介紹的vue富文本框(插入文本、圖片、視頻)的使用及問(wèn)題小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!