angular8 富文本编辑_angular4 富文本编辑器

使用quill富文本编辑器实现，angular项目中用到了ngx-quill插件。

quill的GitHub地址：https://github.com/quilljs/quill

ngx-quill的GitHub地址：https://github.com/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的样式 :

3、使用

在页面使用标签进行使用，效果如下：

上图中的工具类是配置后的工具类，代码如下：

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

]

};

-------------------------------------------------

2018-05-13 16:13:20

自定义工具栏

0">图片已上传：{{ uploader2?.queue.length > 0 ? uploader2?.queue[uploader2?.queue.length-1]?.progress : 0 }}%

上传图片代码(使用了ng2-file-upload插件)

publicuploader2: FileUploader;this.uploader2 = newFileUploader({

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= '';

that.data.content+=img;

}

};