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

資訊專欄INFORMATION COLUMN

angular引入富文本ngx-quill,自定義圖片上傳(解決Can't resolve

hlcc / 3434人閱讀

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 頁面上引用 */

點(diǎn)擊查看其他css版本

3. 自定義圖片上傳

給組件添加 onEditorCreated 方法,獲取quill對(duì)象,并綁定自定義圖片上傳函數(shù)

html:


ts:
  // 富文本初始化鉤子函數(shù)
  EditorCreated(quill: any) {
    // 獲取quill的工具欄對(duì)象
    const toolbar = quill.getModule("toolbar");
    // 給工具欄的image功能添加自定義函數(shù),注意this指向問題
    toolbar.addHandler("image", this.imageHandler.bind(this));
    // 保存quill對(duì)象
    this.editor = quill;
  }
  // 自定義圖片上傳功能
  // 創(chuàng)建一個(gè)input對(duì)象來實(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();
  }

無注釋復(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/114934.html

相關(guān)文章

  • angular引入文本ngx-quill定義圖片上傳解決Can't resolve

    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...

    willin 評(píng)論0 收藏0
  • angular引入文本ngx-quill定義圖片上傳解決Can't resolve

    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...

    honmaple 評(píng)論0 收藏0
  • 手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽事件手動(dòng)維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺(tái) 系列...

    Channe 評(píng)論0 收藏0
  • 手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽事件手動(dòng)維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺(tái) 系列...

    zgbgx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

hlcc

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<