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

editor, node.js, sails.js, wysiwyg

Solution

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

Problem

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

Original source