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

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

npm install ngx-quill

2.引入ngx-quill需要的css

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

import{ QuillModule} from 'ngx-quill';

@NgModule({
imports:[
QuillModule
],
});

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

5.自定义编辑器

< option value="justify">

对图片进行编码上传

在html中：

如果对图片格式不限制：

accept="image/*"

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

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

Nodejs进行后台处理

app.post('/upload',function(req,res){
   //接收前台post的base64
   var imgData=req.body.imgData;
   //过滤data:URL
   var 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中使用富文本编辑器和进行图片上传所用到的基本操作，希望可以一起学习。