PhoneGap中文网

 找回密码
 立即注册
查看: 19667|回复: 1

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

[复制链接]

28

主题

44

帖子

204

积分

中级会员

Rank: 3Rank: 3

积分
204
发表于 2018-10-10 09:50:27 | 显示全部楼层 |阅读模式
nodejs中有很多的富文本插件。但是这些富文本插件都是基于中间件,如果要在egg.js配置nodejs富文本插件的话比较麻烦。


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


效果图:
22.png


使用方法:

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. <!-- Include Editor style. -->
  4. <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
  5. <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" rel="stylesheet" type="text/css" />


  6. <!-- Include jQuery lib. -->
  7. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  8. <!-- Include Editor JS files. -->
  9. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"></script>

  10. <!-- 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. </script>
复制代码




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



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

注意后台返回数据的格式:
{link: 图片地址}
  1. async uploadImg() {

  2.         let parts = this.ctx.multipart({ autoFields: true });
  3.         let files = {};               
  4.         let stream;
  5.         while ((stream = await parts()) != null) {
  6.             if (!stream.filename) {         
  7.               break;
  8.             }      
  9.             let fieldname = stream.fieldname;  //file表单的名字

  10.             //上传图片的目录
  11.             let dir=await this.service.tools.getUploadFile(stream.filename);
  12.             let target = dir.uploadDir;
  13.             let writeStream = fs.createWriteStream(target);

  14.             await pump(stream, writeStream);  

  15.             files=Object.assign(files,{
  16.               [fieldname]:dir.saveDir   
  17.             })
  18.             
  19.         }      

  20.      
  21.       console.log(files,parts.field);


  22.       this.ctx.body={link: files.file};



  23.     }
  24.       
复制代码




最后还要配置csrf。


  1.   exports.security = {
  2.     csrf: {
  3.       // 判断是否需要 ignore 的方法,请求上下文 context 作为第一个参数
  4.       ignore: ctx => {

  5.         if(ctx.request.url=='/admin/goods/uploadImg'){
  6.           return true;
  7.         }
  8.         return false;      
  9.         
  10.       },
  11.     },
  12.   }
复制代码






回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 06:05 , Processed in 0.043754 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表