使用quill富文本编辑器实现，angular项目中用到了ngx-quill插件。
quill的GitHub地址：/quilljs/quill
ngx-quill的GitHub地址：/KillerCodeMonkey/ngx-quill
ngx-quill适用于版本号在2以及以上的angular。
具体操作如下：
1、ngx-quill的安装
angular >= 5时ngx-quill的安装
npm install ngx-quill
angular < 5时
npm install ngx-quill@1.6.0
2、quill的配置
引入（ngx-quill的）QuillModule :
import { QuillModule } from 'ngx-quill'
在你的NgModule中添加 QuillModule :
@NgModule({
imports: [
...,
QuillModule
],
...
})
在index.html中添加quill的样式 :
<link href="/1.0.0/quill.snow.css" rel="stylesheet">
3、使用
在页面使用标签<quill-editor></quill-editor>进行使用，效果如下：
上图中的工具类是配置后的工具类，代码如下：
<quill-editor [modules]="config" [style]="{height: '200px'}" [(ngModel)]="data.content"></quill-editor>
config的内容如下：
{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 direction//[{ '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['link', 'image', 'video']// link and image, video ]};
-------------------------------------------------
-05-13 16:13:20
自定义工具栏
<quill-editor [style]="{height: '200px'}" [(ngModel)]="data.content" placeholder="在这里详细描述一个推荐原因，\n"><div quill-editor-toolbar><span class="ql-formats"><button type="button" class="ql-header" value="1"></button><button type="button" class="ql-header" value="2"></button><button type="button" class="ql-blockquote"></button><button type="button" class="ql-code-block ql-active"></button><button type="button" class="ql-list" value="ordered"></button></span><span class="ql-formats"><button type="button" class="ql-link"></button><button type="button" style="outline:none"><div class="upload_img"><svg class="camera" viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg><input type="file" class="file_input" ng2FileSelect [uploader]="uploader2" /></div></button></span><span class="ql-formats"><p style="font-size: 9px;" *ngIf="uploader2?.queue.length > 0">图片已上传：{{ uploader2?.queue.length > 0 ? uploader2?.queue[uploader2?.queue.length-1]?.progress : 0 }}%</p></span></div></quill-editor>
上传图片代码（使用了ng2-file-upload插件）
public uploader2: FileUploader;this.uploader2 = new FileUploader({url: this.URL, method: "POST", itemAlias: "upfile", autoUpload: true});this.uploader2.onSuccessItem = function (item, response, status, headers) {if(status == 200){let rsp = JSON.parse(response);let img = '<img class="camera" src="'+"http://您的域名"+ rsp.url+'" alt="">';that.data.content += img;}};
