egg.js富文本插件wysiwyg-editor的使用

tengfeng

nodejs中有很多的富文本插件。但是这些富文本插件都是基于中间件，如果要在egg.js配置nodejs富文本插件的话比较麻烦。


下面给大家推荐一筐egg.js富文本插件wysiwyg-editor的使用。


效果图：



使用方法：

1、wysiwyg-editor基于jquery所以要引入jquery，其次引入下面的js以及css

1. <!-- Include CSS for icons. -->
   
2. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
   
3. 
   
4. <!-- Include Editor style. -->
   
5. <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
   
6. <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" rel="stylesheet" type="text/css" />
   
7. 
   
8. 
   
9. <!-- Include jQuery lib. -->
   
10. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
11. 
    
12. <!-- Include Editor JS files. -->
    
13. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"></script>
    
14. 
    
15. <!-- Initialize the editor. -->

复制代码

2、页面中定义一个textarea

1. <textarea name="content" id="content"></textarea>

复制代码

3、配置egg.js富文本插件wysiwyg-editor

1. <script>
   
2.     $(function() {
   
3.       $('#content').froalaEditor({
   
4.         height: 300,   
   
5.         imageUploadURL: '/admin/goods/uploadImg'        
   
6. 
   
7.       })
   
8.     });
   
9. </script>

复制代码

官方文档：https://www.froala.com/wysiwyg-editor/docs/options#imageUploadURL



egg.js后台接受上传的图片：   

注意后台返回数据的格式：
{link: 图片地址}

1. async uploadImg() {
   
2. 
   
3.         let parts = this.ctx.multipart({ autoFields: true });
   
4.         let files = {};               
   
5.         let stream;
   
6.         while ((stream = await parts()) != null) {
   
7.             if (!stream.filename) {         
   
8.               break;
   
9.             }      
   
10.             let fieldname = stream.fieldname;  //file表单的名字
    
11. 
    
12.             //上传图片的目录
    
13.             let dir=await this.service.tools.getUploadFile(stream.filename);
    
14.             let target = dir.uploadDir;
    
15.             let writeStream = fs.createWriteStream(target);
    
16. 
    
17.             await pump(stream, writeStream);  
    
18. 
    
19.             files=Object.assign(files,{
    
20.               [fieldname]:dir.saveDir   
    
21.             })
    
22.             
    
23.         }      
    
24. 
    
25.      
    
26.       console.log(files,parts.field);
    
27. 
    
28. 
    
29.       this.ctx.body={link: files.file};
    
30. 
    
31. 
    
32. 
    
33.     }
    
34.       

复制代码

最后还要配置csrf。

1. 
   
2.   exports.security = {
   
3.     csrf: {
   
4.       // 判断是否需要 ignore 的方法，请求上下文 context 作为第一个参数
   
5.       ignore: ctx => {
   
6. 
   
7.         if(ctx.request.url=='/admin/goods/uploadImg'){
   
8.           return true;
   
9.         }
   
10.         return false;      
    
11.         
    
12.       },
    
13.     },
    
14.   }

复制代码