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中使用富文本编辑器和进行图片上传所用到的基本操作,希望可以一起学习。