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

sca_
  • 673
  • 5
  • 10

2 Answers2

11

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 :)

sca_
  • 673
  • 5
  • 10
  • Thanks so much for offering this complete-looking writeup, even taking the time to answer your own Q with the answer you found :-) Where do/could you have your latest & complete working code on say Github or a https://gist.github.com ? -I and certainly others would love to have the example to download, play with, and extend. – Destiny Architect May 08 '14 at 08:17
  • Thank you! Of course, here you are: https://github.com/sca-/sails-ckeditor-sample – sca_ May 12 '14 at 13:42
  • File uploading is happening. but how to browse images from server . Its not working. – Pritam Parua Apr 06 '16 at 14:31
3

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.

MyNameIsAVerb
  • 201
  • 1
  • 5