Как отправить формы с помощью QuillJs и body-parser?

1

Я новичок в Nodejs (и кодировании, в общем). Я пытаюсь создать небольшую систему управления контентом. Я хочу, чтобы мои потенциальные конечные пользователи могли стирать их содержимое (жирный, курсив, гиперссылка и т.д.), Прежде чем отправлять сообщение в свой блог одним нажатием кнопки. Вид вида панели инструментов, которую я вижу в Stackoverflow, когда я печатаю это

Вот что я получил до сих пор после чтения руководства Quill:

form.ejs

<style>
#editor {
  height: 300px;
}

</style>

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

 <form action = '/blog' method = 'POST'>
  <!-- Create the editor container -->
  <input type = 'text' name = 'title' placeholder = 'title'>
  <label for="body">About me</label>
  <input name="body" type="hidden">
  <div id="editor">
     <p>I am at my wit end. Stackoverflow is my last hope</p>
  </div>
    <button type="submit">Submit</button>

 </form>


<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });

  var form = document.querySelector('form');
  form.onsubmit = function() {
    console.log("hey")
    // Populate hidden form on submit
    var body = document.querySelector('input[name=body]');
    body.value = JSON.stringify(quill.getContents());

    console.log("Submitted", $(form).serialize(), $(form).serializeArray());

  };

</script> 

Файл app.js

var app             = require('express')(),
    mongoose        = require('mongoose'),
    Blog            = require('./model/blog'),
    bodyParser      = require('body-parser');

mongoose.connect("mongodb://localhost/quill_demo", {useMongoClient:true});    
app.set('view engine','ejs'); //EJS WILL BE THE DEFAULT FILE THAT DISPLAYS THE FRONT-END DATA
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true})); // retrieve text from submitted forms from the EJS files. 

//Add new blog to the database
app.post('/blog', function(req, res){
    var myPost = {
        title:req.body.title,
        body: req.body.body
    };
    Blog.create(myPost, function(err, newBlog){
        if(err){
            console.log(err);
        } else {
            console.log("New Blog has been added");
            newBlog.save(function(err, savedBlog){
                if(err){
                    console.log(err);
                }else {
                    console.log(savedBlog);
                    res.redirect('/blog');
                }

            });
        }
    });

});

Я проверяю базу данных после нажатия на submit. Поле "title" работает нормально. Но ничего не добавляется в поле "тело".

Итак, похоже, что мне не хватает нескольких частей. Буду признателен за любую помощь. Я бы не прочь, если кто-то просто добавит недостающие части в мой код, и я узнаю их шаги позже.

PS У меня нет степени CS. Обучение самостоятельно. Итак, держите свои ответы в непрофессиональных условиях как можно больше

Теги:
forms
quill
body-parser

1 ответ

0
Лучший ответ

Nevermind, я понял это!

Я сменил сценарий на это, и он помогло. Функция вызывается при отправке формы

<script>
  var editor = new Quill('#editor', {
      modules: { toolbar: "#toolbar" },
      theme: 'snow'
  });


  function formatField(){
    var editor = document.querySelector(".ql-editor").contentEditable = false;
    var clipboard = document.querySelector(".ql-clipboard").contentEditable = false;
    var bar = document.querySelector("input[type=text]").type="hidden"
    var p = document.querySelector("#editor");
    var myInput = document.querySelector("input[name=about]");
    myInput.value = p.innerHTML;
  }


</script> 

Ещё вопросы

Сообщество Overcoder
Наверх
Меню