egg(68,69)--egg引用wysiwyg-editor富文本

引入wysiwyg-editor

字体,css,jquery,js,汉化包

<link href="/public/admin/wysiwyg-editor/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <!-- Include Editor style. -->
    <link href="/public/admin/wysiwyg-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link href="/public/admin/wysiwyg-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />


    <!-- 引入jquery -->
    <!-- Include Editor JS files. -->
    <script type="text/javascript" src="/public/admin/wysiwyg-editor/js/froala_editor.pkgd.min.js"></script>


    <script type="text/javascript" src="/public/admin/wysiwyg-editor/js/zh_cn.js"></script>

前端配置wysiwyg-editor

1. height 高度
2. language 语言
3. imageUploadURL 图片上传地址
4. toolbarButtons ,toolbarButtonsMD ,toolbarButtonsSM 不同分辨率显示工具

<script>
            $(function() {
                $('#content').froalaEditor({

                    height: 300,    //给编辑器设置默认的高度
                    language: 'zh_cn',   
                    imageUploadURL: '/admin/goods/goodsUploadImage',
                    //根据不同的分辨率加载不同的配置
                    toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],
                    toolbarButtonsMD: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],
                    toolbarButtonsSM: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo']
                });
            });
        </script>

后台配置图片上传

router.js

router.post('/admin/goods/goodsUploadImage', controller.admin.goods.goodsUploadImage);

controller

app/controller/admin/goods.js

async goodsUploadImage() {
        //实现图片上传
        let parts = this.ctx.multipart({ autoFields: true });
          let files = {};               
          let stream;
          while ((stream = await parts()) != null) {
              if (!stream.filename) {          
                break;
              }       
              let fieldname = stream.fieldname;  //file表单的名字

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

              await pump(stream, writeStream);  

              files=Object.assign(files,{
                [fieldname]:dir.saveDir    
              })
              
          }      
          console.log(files);
          //图片的地址转化成 {link: 'path/to/image.jpg'} 
          this.ctx.body={link: files.file};
      }

图片上传不经过csrf

报错

解决办法

config/config.default.js

config.security = {
    csrf: {
        // 判断是否需要 ignore 的方法，请求上下文 context 作为第一个参数
        ignore: ctx => {
          if(ctx.request.url=='/admin/goods/goodsUploadImage'){
            return true;
          }
          return false;
        }      
      }
    }

成功效果