2014-01-27 3 views
5

Есть ли способ использовать любой редактор WYSIWYG/html в приложении для парусов? I не может найти руководства для этого. Похоже, Mercury хорошо поддерживается в узле, но я не могу найти способ адаптировать паруса для него . :(Пожалуйста, наставит меняNode.js (sails.js) wysiwyg editor - images

OK Теперь, оказалось, чтобы быть легко подключить TinyMCE (так же легко, как описано на http://www.tinymce.com/wiki.php/Installation) Итак, теперь еще один важный вопрос выходит:. Есть ли разъем Node.js к любому редактор для загрузки изображений и прочего?

Или просто, как я могу позволить пользователю загрузить изображение и вставить его в почтовом тело?

Благодаря

ответ

11

Ура! Наконец сделали это!

Наконец-то я использовал 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 в:
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='Сохранить') 

(в нефритом здесь)

Это все! Наслаждайтесь WYSIWYG :)

+0

Большое спасибо за то, что вы предлагаете эту полную запись, даже не торопитесь ответить на свой вопрос Q с ответом, который вы нашли :-) Где и у вас может быть ваш последний и полный рабочий код, например, Github или https: //gist.github.com? -I, и, конечно же, другим хотелось бы, чтобы этот пример загружался, играл и расширялся. –

+0

Спасибо! Конечно, здесь вы находитесь: https://github.com/sca-/sails-ckeditor-sample –

+0

Загрузка файлов происходит. но как просматривать изображения с сервера. Это не работает. –

3

Вышеупомянутый ответ будет работать (я дал ему голосование), но если у вас включен токен csrf на сайте, вам нужно сделать несколько дополнительных вещей (я бы оставил комментарий, но мой представитель не достаточно высок еще):

Добавить стандартный CSRF скрытый вход в форме, CKEditor используется в:

<input type="hidden" name="_csrf" value="<%= _csrf %>" id="csrf" /> 

Далее, добавьте следующие строки в CKEditor/CKEditor.JS вокруг линии 498.

var csrf = document.getElementsByName("_csrf"); 
var token = csrfitems[0].defaultValue; 

Затем нужно добавить скрытый вход в форме, что загрузчик использует на линии 499 ckeditor.js

<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"), 

Надеюсь, это избавит некоторых людей от головных болей, которые мне пришлось пройти. Это может быть не самое элегантное решение, но это позволит загрузчику работать на вашем сайте парусов.

Смежные вопросы