Node.js（sails.js）所见即所得编辑器-图像 [英] Node.js (sails.js) wysiwyg editor - images

问题描述

在帆应用程序中是否可以使用任何WYSIWYG / html编辑器？我
找不到任何操作手册。似乎Mercury在Node中得到了
的良好支持，但我也找不到一种为它
适应风帆的方法。 :(请指导我

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

确定，连接TinyMCE很容易（就像 http://www.tinymce.com/wiki.php/Installation ）。因此，现在是另一个主要问题出来：是否有Node.js连接器连接到任何用于上传图像和内容的编辑器？

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?

谢谢

推荐答案

是的！

最后我使用了CKEditor并成功了！看看：

At last I used the CKEditor and it worked! Check it out:

• 在 http://ckeditor.com/download
中下载编辑器。

• 将其放入资产项目文件夹


• 添加 config.filebrowserUploadUrl ='/ uploader'; 到您的 ckeditor / config.js 文件


• 添加要上传的操作您的控制器：

• 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）{

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'
  }










• 建立文件夹（资产/文件对我来说）


• 最后，更改将ckeditor放入的格式：


• 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='Сохранить')




（在这里是玉石）

仅此而已！享受所见即所得：）

That's all! Enjoy WYSIWYG :)

这篇关于Node.js（sails.js）所见即所得编辑器-图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！