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

willin 發布于2019-08-02 15:30 / 2147人閱讀

1. 安裝依賴

npm i ngx-quill
npm i quill

ps：一定要安裝 quill ，不然ngx-quill會報Can"t resolve "quill" in xxxx, 因為ngx-quill內部引用了quill。

2. 使用

1. 引用

/* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */
import { QuillModule } from "ngx-quill";
@NgModule({
  imports: [
    ...
    QuillModule.forRoot()
    ...
  ]
})

2. 使用組件

/* 直接使用 */


/* 模板綁定 */


/* 響應式表單 */

點擊查看quill配置地址

3. css 樣式引用

/* 在 index.html 頁面上引用 */

點擊查看其他css版本

3. 自定義圖片上傳

給組件添加 onEditorCreated 方法，獲取quill對象，并綁定自定義圖片上傳函數

html:


ts:
  // 富文本初始化鉤子函數
  EditorCreated(quill: any) {
    // 獲取quill的工具欄對象
    const toolbar = quill.getModule("toolbar");
    // 給工具欄的image功能添加自定義函數，注意this指向問題
    toolbar.addHandler("image", this.imageHandler.bind(this));
    // 保存quill對象
    this.editor = quill;
  }
  // 自定義圖片上傳功能
  // 創建一個input對象來實現上傳，除了下面的自定義代碼區域，其他為官方代碼
  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) {
          /* 自定義代碼 */
          .......
          .......
          // 下面這句話必填，成功后執行 （imageUrl 為上傳成功后的圖片完整路徑）
          this.editor.insertEmbed(this.editor.getSelection(true).index, "image", imageUrl);
      }
    });
    Imageinput.click();
  }

無注釋復制粘貼版本

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();
  }

GPU云服務器云服務器 jsp 引入自定義類自定義圖片自定義圖片伸縮富文本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54170.html

angular引入富文本ngx-quill，自定義圖片上傳（解決Can&#039;t resolve

1. 安裝依賴 npm i ngx-quill npm i quill ps：一定要安裝 quill ，不然ngx-quill會報Cant resolve quill in xxxx, 因為ngx-quill內部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */ import { Quil...

honmaple 2019-08-23 18:35 評論0 收藏0
angular引入富文本ngx-quill，自定義圖片上傳（解決Can&#039;t resolve

1. 安裝依賴 npm i ngx-quill npm i quill ps：一定要安裝 quill ，不然ngx-quill會報Cant resolve quill in xxxx, 因為ngx-quill內部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */ import { Quil...

hlcc 2019-08-30 11:21 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0