Node.js(sails.js)wysiwyg编辑器 – 图像
有没有在sails应用程序中使用任何所见即所得/ HTML编辑器的方法? 我找不到任何手册来做到这一点。 看起来像水星在Node中得到了很好的支持,但是我找不到一种适应它的方法。 :(请指导我
现在好了,它变得很容易连接TinyMCE(就像http://www.tinymce.com/wiki.php/Installation上描述的一样简单)。 所以现在又出现了另一个主要问题:有没有Node.js连接到任何编辑器来上传图片和东西?
或者我怎样才能允许用户上传图片并将其插入到post主体?
谢谢
好极了! 终于做到了!
最后我用CKEditor,它工作! 一探究竟:
- 请在http://ckeditor.com/download下载编辑器
- 把它放到你的项目的
assets
文件夹中 - 添加
config.filebrowserUploadUrl = '/uploader';
到你的ckeditor/config.js
文件 - 在您的控制器中添加一个上传操作:
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); }); });
}
- 为此操作添加路由:
'/uploader' : { controller : 'post', action : 'upload_file' }
- 为我上传一个文件夹(
assets/files
) - 最后,把ckeditor的forms改成:
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='Сохранить')
(在这里玉)
就这样! 享受所见即所得:)
上面的答案将起作用(我给了它投票),但是如果你在网站上启用了csrf标记,你需要做一些额外的事情(我会留下评论,但是我的代表还不够高):
在正在使用ckeditor的窗体中添加标准csrf隐藏input:
<input type="hidden" name="_csrf" value="<%= _csrf %>" id="csrf" />
接下来,将下列行添加到第498行的ckeditor / ckeditor.js中。
var csrf = document.getElementsByName("_csrf"); var token = csrfitems[0].defaultValue;
然后,您需要在ckeditor.js的第499行的上载器上使用的表单上添加隐藏的input
<input type="hidden" name="_csrf" value="' + token + '" id="csrf" />
这里是全线499只是在上下文中看到它:
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"),
希望这可以帮助我解决一些令人头疼的问题。 这可能不是最优雅的解决scheme,但是它可以让上传者在你的帆船网站上工作。