将Quill表单中的内容存储在数据库中

时间:2018-12-07 10:21:33

标签: javascript quill

我一直在尝试几个富文本编辑器,而Quill似乎是在我的项目中实现的最佳工具。我正在使用Node / Express和MongoDB / Mongoose。在“ newPost路线”中,我有一个仅包含标题和主要内容的表格。由于我只是对其进行测试,因此title字段位于Quill编辑器之外。这是我得到的错误:

Quill_test

这是在我点击“提交”之后。控制台不仅显示标题,而且还显示主要内容,该内容具有带有语法突出显示的代码块,这正是我想要的。但是它没有被添加到数据库中。

还有此消息Use of Mutation Events is deprecated. Use MutationObserver instead.,看来我需要自己更改Quill的源代码以解决此问题。

在控制台上获得帖子的主要内容给我一种感觉,我正在将其付诸实践。

是否有一种不太困难的方法可以使它起作用?谢谢!



js

var quill;
var metaData = [];
hljs.configure({   // optionally configure hljs
  languages: ['javascript', 'ruby', 'python']
});
hljs.initHighlighting();

$(document).ready(function() {
  var toolbarOptions = [['blockquote', 'code-block'],
    ["bold", "italic", "underline", "strike"], // toggled buttons
    //['blockquote'],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ script: "sub" }, { script: "super" }], // superscript/subscript
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ direction: "rtl" }], // text direction

    [{ size: ["small", false, "large", "huge"] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],

    ["clean"] // remove formatting button
  ];
 quill = new Quill("#snow-container", {
    placeholder: "Compose an epic...",
    modules: {
      syntax: true,
      toolbar: toolbarOptions
    },
    theme: "snow"
  });
var oldDelta = {"ops":[{"attributes":{"color":"#000000"},"insert":"This is sample text."}]};
quill.setContents(oldDelta);
});

var form = document.querySelector('form');
form.onsubmit = function() {
  // Populate hidden form on submit
  var formContent = document.querySelector('input[name=content]');
  formContent.value = JSON.stringify(quill.getContents());

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

  // No back end to actually submit to!
  //alert('Open the console to see the submit data!')
  return false;
};

0 个答案:

没有答案