Menu
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
826
Yay! Finally did it!
At last I used the CKEditor and it worked! Check it out:
assets folder of your projectconfig.filebrowserUploadUrl = '/uploader'; to your ckeditor/config.js fileupload_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); }); });}
'/uploader' : { controller : 'post', action : 'upload_file' }
assets/files for me) for uploadsblock 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 :)
139
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
