Node.js (sails.js) 所见即所得编辑器 - 图片

标签 node.js editor wysiwyg sails.js

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 连接器可以连接到任何编辑器以上传图像和东西?

或者我怎样才能允许用户上传图片并将其插入到帖子正文中?

谢谢

最佳答案

耶!终于成功了!

最后我使用了 CKEditor,它成功了!检查一下:

  • http://ckeditor.com/download 下载编辑器
  • 放入你项目的assets文件夹
  • config.filebrowserUploadUrl = '/uploader'; 添加到您的 ckeditor/config.js 文件
  • 在您的 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);
  });

});

}

  • 为此操作添加路由:
'/uploader' : {
    controller : 'post',
    action : 'upload_file'
  }
  • 为我创建一个文件夹(assets/files)用于上传
  • 最后,更改将 ckeditor 放入的表单:
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='Сохранить')

(这里是 Jade )

就是这样!享受所见即所得:)

关于Node.js (sails.js) 所见即所得编辑器 - 图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21378630/

相关文章:

javascript - 从 HTML 创建的 DraftJS 编辑器不起作用

netbeans - 如何在netbeans IDE 8.3中使用快捷键添加多行注释/* */

php - 如何在 WebStorm/PHPStorm 中激活函数引用?

javascript - 禁用 CKEditor 中的命令

javascript - tinymce 自定义按钮替换内容

javascript - 如何在线获取在本地主机上运行的node.js应用程序?

javascript - 如何使用 sinon.stub() 仅对某个调用进行 stub

javascript - 使用 Node.js 的 Winston 模块正确记录到文件

Javascript 回调和堆栈溢出

javascript - 使用 window.getSelection 在所见即所得编辑器中查找 <br> 位置