Angular-富文本编辑器的基本使用

1.安装插件 ngx-quill 实现Angular中富文本编辑器

npm install ngx-quill

2.引入ngx-quill需要的css

<link href="https://cdn,/1.2.2/quill.snow.css"rel="stylesheet">

3.在app.modules.ts里面引入ngx-quill模块

import{ QuillModule} from 'ngx-quill';@NgModule({imports:[QuillModule],});

4.找到要使用的模块引用

<quill-editor [(ngModel)]="editorContent"><quill-editor>

5.自定义编辑器

<quill-editor><div quill-editor-toolbar><span class="ql-formats"><button class="ql-bold" [title]="'加粗'"></button></span><span class="ql-formats"><button type="button" class="ql-header" value="1"></button><button type="button" class="ql-header" value="2"></button></span><span class="ql-formats"><button type="button" class="ql-link"></button></span><span class="ql-formats"><select class="ql-align" [title]="'Aligment'"><option selected></option><option value="center"></option><option value="right"></option><option value="justify"></option></select><select class="ql-align" [title]="'Aligment2'"><option selected></option><option value="center"></option><option value="right"></option>< option value="justify"></option></select></span></div></quill-editor>

对图片进行编码上传

在html中：

<input type=“file” name="file" accept="image/*"(change)="changeImg($event)"/>

如果对图片格式不限制：

accept="image/*"

在.ts中实现changeImg($event)方法

changeImg($event){if(!event.traget.file[0]){return;}this.file=event.traget.files[0];var reader=new FileReader();//读出base64reader.readAsDataURL(this.file);reader.onloadend=function(){//将base64属性当成img的src的属性值var dataURL=reader.result;console.log(dataURL);};}

Nodejs进行后台处理

app.post('/upload',function(req,res){//接收前台post的base64var imgData=req.body.imgData;//过滤data:URLvar base64Data=imgData.replace(/^data:image\/\w+;base64,/,"");var dataBuffer=new Buffer(base64Data,'base64');fs.writeFile("image,png",dataBuffer,function(err){if(err){res.send(err);};else{res.send('保存成功');};};};

以上是在Angula中使用富文本编辑器和进行图片上传所用到的基本操作，希望可以一起学习。