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

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

npm install ngx-quill

2.引入ngx-quill需要的css

<link href="https://cdn,quilljs.com/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();
//读出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中使用富文本编辑器和进行图片上传所用到的基本操作，希望可以一起学习。