angular引入富文本ngx-quill，自定义图片上传（解决Can't resolve

willin 发布于2019-08-02 15:30 / 2140人阅读

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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