1. 安装依赖
npm i ngx-quill npm i quill
ps:一定要安装 quill ,不然ngx-quill会报Can"t resolve "quill" in xxxx, 因为ngx-quill内部引用了quill。
2. 使用/* 在自己的`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
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...
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...
摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...
摘要:社区的认可目前已经是相关最多的开源项目了,体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址:vue-element-admin 系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列...
阅读 1954·2021-11-24 09:39
阅读 954·2021-11-11 16:55
阅读 1387·2021-10-09 09:43
阅读 1387·2021-10-08 10:17
阅读 1587·2021-08-25 09:41
阅读 390·2019-08-30 13:02
阅读 602·2019-08-29 15:14
阅读 959·2019-08-29 13:53