Search code examples
node.jseditorwysiwygsails.js

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


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


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