Node.js (sails.js) wysiwyg editor - images

2019-02-07 07:19发布

站内问答 / 前端开发
637 2 5

Is there a way to use any WYSIWYG/html editor in the sails app? I can't find any manuals to do that. Seems like Mercury is well-supported in Node but I can't find a way to adapt sails for it either. :( Please guide me

OK now, it turned up to be easy to connect TinyMCE (just as easy as described on http://www.tinymce.com/wiki.php/Installation ). So now another major question comes out: is there any Node.js connector to any editor for uploading images and stuff?

Or just how can I allow user to upload an image and insert it to a post body?

Thanks

2条回答
祖国的老花朵
2楼-- · 2019-02-07 07:22

Yay! Finally did it!

At last I used the CKEditor and it worked! Check it out:

  • download the editor at http://ckeditor.com/download
  • put it into the assets folder of your project
  • add config.filebrowserUploadUrl = '/uploader'; to your ckeditor/config.js file
  • add an action for uploads in your controller :

upload_file : function(req, res) {

var fs = require('fs');
console.log(req.files);

fs.readFile(req.files.upload.path, function (err, data) {
  var newPath = 'assets/files/' + req.files.upload.name;
    fs.writeFile(newPath, data, function (err) {
    if (err) res.view({err: err});
      html = "";
      html += "<script type='text/javascript'>";
      html += "    var funcNum = " + req.query.CKEditorFuncNum + ";";
      html += "    var url     = \"/files/" + req.files.upload.name + "\";";
      html += "    var message = \"Uploaded file successfully\";";
      html += "";
      html += "    window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);";
      html += "</script>";

      res.send(html);
  });

});

}

  • add a route for this action:
'/uploader' : {
    controller : 'post',
    action : 'upload_file'
  }
  • make a folder (assets/files for me) for uploads
  • finally, change the form putting ckeditor in:
block body
  script(type="text/javascript", src="/ckeditor/ckeditor.js")
  form(action='/posts/create', method="post", enctype="multipart/form-data")
    p Title
    input(type='text', name='title')
    p Body
    textarea(name='body', id='ck')
    script.
      CKEDITOR.replace( 'ck' );
    hr
    input(type='submit', value='Сохранить')

(in jade here)

That's all! Enjoy WYSIWYG :)

查看更多
0人赞 添加讨论(0) 举报
The star\"
3楼-- · 2019-02-07 07:46

The above answer will work (I gave it the up vote), but if you have the csrf token enabled on the site you need to do a few extra things (I would leave a comment but my rep is not high enough yet):

Add the standard csrf hidden input on the form that ckeditor is being used in:

<input type="hidden" name="_csrf" value="<%= _csrf %>" id="csrf" />

Next, add the following lines to ckeditor/ckeditor.js around line 498.

var csrf = document.getElementsByName("_csrf");
var token = csrfitems[0].defaultValue;

You then need to add the hidden input on the form that the uploader uses on line 499 of ckeditor.js

<input type="hidden" name="_csrf" value="' + token + '" id="csrf" />

Here is the full line 499 just to see it in context:

var csrf = document.getElementsByName("_csrf");var token = csrfitems[0].defaultValue;



  d.$.write(['<html dir="'+g+'" lang="'+i+'"><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">','<form enctype="multipart/form-data" method="POST" dir="'+g+'" lang="'+i+'" action="',CKEDITOR.tools.htmlEncode(f.action),
'"><label id="',a.labelId,'" for="',h,'" style="display:none">',
CKEDITOR.tools.htmlEncode(f.label),
'</label>
<input type="hidden" name="_csrf" value="' + token + '" id="csrf" /><input style="width:100%" id="',h,'" aria-labelledby="',a.labelId,'" type="file" name="',CKEDITOR.tools.htmlEncode(f.id||"cke_upload"),

Hopefully this saves some people the headaches I had to go through. This might not be the most elegant solution but it will allow the uploader to work across your sails site now.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)