1、安装依赖npmingx-quillnpmiquillps:quill必须安装，否则ngx-quill会报Can'tresolve'quill'inxxxx，因为ngx-quillinternallyreferencesquill。2.使用1.Reference/*Referenceinyour`NgModule`的`imports`，我在`RoutesModule`*/import{QuillModule}from'ngx-quill';@NgModule({imports:[...QuillModule.forRoot()...]})2.使用组件/*直接使用*//*模板绑定*//*响应式表单*/点击查看quill配置地址3.css样式参考/*inindex.htmlhtml页面参考*/点击查看其他css版本3.上传自定义图片到components添加onEditorCreated方法，获取quill对象，绑定自定义图片上传功能html:ts://富文本初始化钩子functionEditorCreated(quill:any){//获取quill的工具栏对象consttoolbar=quill.getModule('toolbar');//给toolbar的image函数添加自定义函数，注意这里指向问题toolbar.addHandler('im年龄',this.imageHandler.bind(this));//保存羽毛笔对象this.editor=quill;}//自定义图片上传函数//创建一个input对象上传，除了下面自定义代码区，其他都是官方代码imageHandler(){constImageinput=document.createElement('input');Imageinput.setAttribute('类型','文件');Imageinput.setAttribute('accept','image/png,image/gif,image/jpeg,image/bmp');//可以改变上传图片格式Imageinput.classList.add('ql-image');Imageinput.addEventListener('change',()=>{constfile=Imageinput.files[0];if(Imageinput.files!=null&&Imageinput.files[0]!=null){/*自定义代码*/........//下面这句必填，成功后执行（imageUrl为上传图片的全路径）this.editor.insertEmbed(this.editor.getSelection(true).index,'image',imageUrl);}});图片输入.click();}无评论复制粘贴版本html:ts:EditorCreated(quill:any){consttoolbar=quill.getModule('工具栏');toolbar.addHandler('image',this.imageHandler.bind(this));this.editor=羽毛笔；}imageHandler(){constImageinput=document.createElement('input');Imageinput.setAttribute('类型','文件');Imageinput.setAttribute('accept','image/png,image/gif,image/jpeg,image/bmp');Imageinput.classList.add('ql-image');Imageinput.addEventListener('change',()=>{constfile=Imageinput.files[0];if(Imageinput.files!=null&&Imageinput.files[0]!=null){......this.editor.insertEmbed(this.editor.getSelection(true).index,'image',图片完整路径);}});Imageinput.click();}
