安装依赖
npm install ngx-quill
npm install ng2-quill-editor --save
官方文档：/package/ngx-quill
quill的配置
import { QuillModule } from 'ngx-Quill';@NgModule({declarations: [.....],imports: [...QuillModule.forRoot()],})export class PaperModule { }
在index.html中添加quill的样式 :
<link href="assets/css/quill.core.css" rel="stylesheet"><link href="assets/css/quill.bubble.css" rel="stylesheet"><link href="assets/css/quill.snow.css" rel="stylesheet">
使用：
<quill-editor[modules]="quillConfig"[style]="{height: '200px'}"[(ngModel)]="model.titleEditorData"(onEditorCreated)="EditorCreated($event)"(onContentChanged)="onEditorChange($event)"><input type="file" class="file_input"/></quill-editor>
ts：
public editor;quillConfig = {toolbar: [//['bold', 'italic', 'underline', 'strike'], // toggled buttons//['blockquote', 'code-block'],//[{ 'header': 1 }, { 'header': 2 }],// custom button values//[{ 'list': 'ordered' }, { 'list': 'bullet' }],//[{ 'script': 'sub'}, { 'script': 'super' }],// superscript/subscript//[{ 'indent': '-1'}, { 'indent': '+1' }],// outdent/indent//[{ 'direction': 'rtl' }],// text directio//[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown//[{ 'header': [1, 2, 3, 4, 5, 6, false] }],//[{ 'color': [] }, { 'background': [] }],// dropdown with defaults from theme//[{ 'font': [] }],//[{ 'align': [] }],//['clean'], // remove formatting button[ 'image']// link and image, video]};default='';onEditorChange(quill) {//此处当富文本里面改变时候可以在此操作，传数据给后端}EditorCreated(quill: any) {const toolbar = quill.getModule('toolbar');// console.log(toolbar)toolbar.addHandler('image', this.imageHandler.bind(this));this.editor = quill;// console.log(this.editor)}imageHandler() {let that=this;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];//console.log(file)if (Imageinput.files != null && Imageinput.files[0] != null) {const formData = new FormData();formData.set('bucketName', 'examimgs');formData.set('file', file);return that.http.post(`upload/file?_allow_anonymous=true`, formData).toPromise().then((res) => {//console.log(res)that.default='https://放图片的服务器/' + res.bucketName + '/' + res.objectName;that.editor.insertEmbed(that.editor.getSelection(true).index, 'image',that.default);});}});Imageinput.click();}
