1. 安裝依賴
npm i ngx-quill npm i quill
ps:一定要安裝 quill ,不然ngx-quill會(huì)報(bào)Can"t resolve "quill" in xxxx, 因?yàn)?b>ngx-quill內(nèi)部引用了quill。
2. 使用 1. 引用/* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { QuillModule } from "ngx-quill"; @NgModule({ imports: [ ... QuillModule.forRoot() ... ] })2. 使用組件
/* 直接使用 *//* 模板綁定 */ /* 響應(yīng)式表單 */
點(diǎn)擊查看quill配置地址
3. css 樣式引用/* 在 index.html 頁(yè)面上引用 */
點(diǎn)擊查看其他css版本
3. 自定義圖片上傳給組件添加 onEditorCreated 方法,獲取quill對(duì)象,并綁定自定義圖片上傳函數(shù)
html:ts: // 富文本初始化鉤子函數(shù) EditorCreated(quill: any) { // 獲取quill的工具欄對(duì)象 const toolbar = quill.getModule("toolbar"); // 給工具欄的image功能添加自定義函數(shù),注意this指向問(wèn)題 toolbar.addHandler("image", this.imageHandler.bind(this)); // 保存quill對(duì)象 this.editor = quill; } // 自定義圖片上傳功能 // 創(chuàng)建一個(gè)input對(duì)象來(lái)實(shí)現(xiàn)上傳,除了下面的自定義代碼區(qū)域,其他為官方代碼 imageHandler() { const Imageinput = document.createElement("input"); Imageinput.setAttribute("type", "file"); Imageinput.setAttribute("accept", "image/png, image/gif, image/jpeg, image/bmp"); // 可改上傳圖片格式 Imageinput.classList.add("ql-image"); Imageinput.addEventListener("change", () => { const file = Imageinput.files[0]; if (Imageinput.files != null && Imageinput.files[0] != null) { /* 自定義代碼 */ ....... ....... // 下面這句話必填,成功后執(zhí)行 (imageUrl 為上傳成功后的圖片完整路徑) this.editor.insertEmbed(this.editor.getSelection(true).index, "image", imageUrl); } }); Imageinput.click(); }
無(wú)注釋復(fù)制粘貼版本
html:ts: EditorCreated(quill: any) { const toolbar = quill.getModule("toolbar"); toolbar.addHandler("image", this.imageHandler.bind(this)); this.editor = quill; } imageHandler() { const Imageinput = document.createElement("input"); Imageinput.setAttribute("type", "file"); Imageinput.setAttribute("accept", "image/png, image/gif, image/jpeg, image/bmp"); Imageinput.classList.add("ql-image"); Imageinput.addEventListener("change", () => { const file = Imageinput.files[0]; if (Imageinput.files != null && Imageinput.files[0] != null) { ....... this.editor.insertEmbed(this.editor.getSelection(true).index, "image", 圖片完整路徑); } }); Imageinput.click(); }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/105485.html
1. 安裝依賴 npm i ngx-quill npm i quill ps:一定要安裝 quill ,不然ngx-quill會(huì)報(bào)Cant resolve quill in xxxx, 因?yàn)閚gx-quill內(nèi)部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { Quil...
1. 安裝依賴 npm i ngx-quill npm i quill ps:一定要安裝 quill ,不然ngx-quill會(huì)報(bào)Cant resolve quill in xxxx, 因?yàn)閚gx-quill內(nèi)部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { Quil...
摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類(lèi)文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類(lèi)文章四:手摸手,帶你用vue擼后臺(tái) 系列...
摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類(lèi)文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類(lèi)文章四:手摸手,帶你用vue擼后臺(tái) 系列...
閱讀 3189·2021-11-24 10:30
閱讀 1313·2021-09-30 09:56
閱讀 2385·2021-09-07 10:20
閱讀 2596·2021-08-27 13:10
閱讀 698·2019-08-30 11:11
閱讀 2050·2019-08-29 12:13
閱讀 758·2019-08-26 12:24
閱讀 2897·2019-08-26 12:20