国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-quill-editor自定義圖片上傳

miracledan / 826人閱讀

摘要：我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)當然也少不了，我們通過官網(wǎng)的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。

我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)vue當然也少不了，我們通過vue官網(wǎng)的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。
我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默認的圖片上傳是使用Data URL方式保存到了內(nèi)容里，這不是我想要的，我相信大部分人也不想這樣去保存圖片，還好quill提供了如何去自定義按鈕事件的demo(03-example.vue)，那么我們就可以自己去實現(xiàn)圖片的保存方式了。

先看看效果，可以支持直接上傳文件和裁切圖片



工具欄處理

先創(chuàng)建一個組件Editor.vue,引入vue-quill-editor,我們要做的就是重新定義它的操作按鈕，也就是使用slot="toolbar"這個插槽，先貼出quill案例的關(guān)鍵代碼

我們可以看到插槽內(nèi)我們放了兩個按鈕分別是加粗和傾斜，quill會根據(jù)這些按鈕的class屬性綁定樣式和操作，也就是說如果我們不用它的樣式，自己寫樣式，自己綁定事件，就可以去處理自己的邏輯了，那我們要保留quill之前的所有功能只修改圖片上傳應(yīng)該如何配置呢？原有的布局樣式都保留，只去掉圖片樣式并多帶帶加事件
邏輯處理

布局完成了，接下來就是邏輯處理了，我們使用cli構(gòu)建項目，創(chuàng)建兩個vue文件


Quilleditor.vue是我們對vue-quill-editor的封裝
CropUpload.vue是我們對vue-image-crop-upload的封裝

具體代碼請訪問https://github.com/lihualong/...

總結(jié)

我們是在quill的基礎(chǔ)上再封裝了一個插件，基本的配置按照quill就好了

定義props讓父組件傳值，圖片上傳的url和file控件的name名稱

處理圖片點擊的邏輯imgClick方法，判斷圖片是否裁切，選擇不同的處理方式，

圖片處理成功后，并把結(jié)果插入quill編輯器，

我們在父組件調(diào)用時都會采用v-model雙向綁定，當父組件綁定值時我們使用watch給quill賦值，quill編輯后調(diào)用onchange 事件使用this.$emit("input", this.content)給父組件傳值

至此我們的自定義Editor就完成了，跟多的細致的處理就由您發(fā)揮了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50899.html

相關(guān)文章

  • vue-quill-editor自定義圖片上傳

    摘要：我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)當然也少不了，我們通過官網(wǎng)的鏈接可以找到一些資源，或者去上查找一些開源的編輯器。 我們通常都會使用富文本編輯器在后臺編輯內(nèi)容，開發(fā)vue當然也少不了，我們通過vue官網(wǎng)的鏈接可以找到一些資源，或者去github上查找一些開源的編輯器。我使用的是vue-quill-editor，它的界面很簡潔，功能也滿足平時的編輯需要，不過于臃腫，但是它默...

    oneasp 評論0 收藏0

  • 改造vue-quill-editor(二)：10秒搞定自定義上傳圖片到服務(wù)器

    摘要：原生上傳圖片到服務(wù)器上次給大家分享過下面的文章結(jié)合上傳圖片到服務(wù)器基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。 原生上傳圖片到服務(wù)器 上次給大家分享過下面的文章結(jié)合element-ui上傳圖片到服務(wù)器基于上面的原理，我又替大家把整個配置封裝好了，大家在使用的時候直接引入配置文件即可。無需引入element-ui，并且增加了部分功能： 可限制圖片...

    xushaojieaaa 評論0 收藏0

  • # quill-image-extend-module ：實現(xiàn)vue-quill-editor圖片上

    摘要：的增強模塊，功能提供圖片上傳到服務(wù)器的功能復(fù)制插入拖拽插入顯示上傳進度顯示上傳成功或者失敗支持與其他模塊一起使用例如調(diào)整圖片大小富文本框參數(shù)設(shè)置的所有可配置項可選參數(shù)是否顯示上傳進 quill-image-extend-module vue-quill-editor的增強模塊， 功能： 提供圖片上傳到服務(wù)器的功能 復(fù)制插入 拖拽插入 顯示上傳進度 顯示上傳成功或者失敗 支持與其他模塊...

    big_cat 評論0 收藏0

  • vue-quill-editor富文本編輯器

    摘要：富文本編輯器自定義組件加粗斜體下劃線刪除線引用代碼標題標題有序列表無序列表下標上標減少縮進增加縮進輸入方向字體大小段落格式字體顏色背景色字體對齊 vue-quill-editor 富文本編輯器自定義組件 ...

    qujian 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<