我正在尝试使用 jquery 代码获取在 quill 编辑器 http://quilljs.com/examples/ 的编辑器 div 中输入的内容,但它似乎不起作用。它适用于其他文本输入,但不适用于编辑器 div。我下面有一个运行图。
$(function(){
$(document).on("click", "#SubmitButton", function(e) {
e.preventDefault();
{
var question = $("#question").val();
var title = $("#title").val();
alert (question);
alert (title);
e.preventDefault();
}
});
});
advancedEditor = new Quill('#question', {
modules: {
'toolbar':
{
container: '#toolbar'
},
'link-tooltip': true,
'image-tooltip': true,
'multi-cursor': true
},
styles: false,
theme: 'snow'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.quilljs.com/0.20.1/quill.js"></script>
<link href="http://cdn.quilljs.com/0.20.1/quill.snow.css" rel="stylesheet"/>
<form id="postform" name="postform" action="">
Title
<input type="text" name="title" id="title">
<br>
<div class="advanced-wrapper" id="qs" style="width:95%; padding:0px; margin:0px;">
<div class="toolbar-container" id="toolbar"><span class="ql-format-group">
<select title="Font" class="ql-font">
<option value="sans-serif" selected>Sans Serif</option>
<option value="Georgia, serif">Serif</option>
<option value="Monaco, 'Courier New', monospace">Monospace</option>
</select>
<select title="Size" class="ql-size">
<option value="10px">Small</option>
<option value="13px" selected>Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select></span><span class="ql-format-group"><span title="Bold" class="ql-format-button ql-bold"></span><span class="ql-format-separator"></span><span title="Italic" class="ql-format-button ql-italic"></span><span class="ql-format-separator"></span><span title="Underline" class="ql-format-button ql-underline"></span></span><span class="ql-format-group">
<select title="Text Color" class="ql-color">
<option value="rgb(187, 187, 187)"></option>
<option value="rgb(161, 0, 0)"></option>
</select><span class="ql-format-separator"></span>
<select title="Background Color" class="ql-background">
<option value="rgb(0, 0, 0)"></option>
<option value="rgb(230, 0, 0)"></option>
</select><span class="ql-format-separator"></span>
<select title="Text Alignment" class="ql-align">
<option value="left" selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select></span><span class="ql-format-group"><span title="Link" class="ql-format-button ql-link"></span><span class="ql-format-separator"></span><span title="Image" class="ql-format-button ql-image"></span><span class="ql-format-separator"></span><span title="List" class="ql-format-button ql-list"></span></span></div>
<div id="question" class="editor-container"></div>
</div>
<input type="submit" class="btn btn-info" id="SubmitButton" value="Post Your Question" />
</form>
我希望当我单击提交按钮时,它还捕获在文本编辑器 div 中键入的内容并提醒值类型。
任何帮助将不胜感激
Quill 有自己的内容检索 API。用以下代码替换您的 click 方法应该允许您从 Quill 实例中获取纯文本值。
$(document).on("click", "#SubmitButton", function(e) {
e.preventDefault();
var question = advancedEditor.getText();
var title = $("#title").val();
console.log(title, question);
});
首先添加quilljs的所有库,并使用getText方法获取内容。
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.0/quill.bubble.css" rel="stylesheet">
<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.0/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.0/quill.core.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.0/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.0/quill.js"></script>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
var text =quill.getText( 0, 50);
alert(text);
});
</script>
我看到问题是面向 jQuery 的,但 JavaScript 概念是相当并行的。以下是我为《Express》的朋友们所做的。它与快速消毒剂结合起来似乎效果很好。
app.js
import expressSanitizer from 'express-sanitizer'
app.use(expressSanitizer())
app.post('/route', async (req, res) => {
const title = req.body.article.title
const content = req.sanitize(req.body.article.content)
// Do stuff with content
})
new.ejs
<head>
<link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
</head>
...
<form action="/route" method="POST">
<input type="text" name="article[title]" placeholder="Enter Title">
<div id="editor"></div>
<input type="submit" onclick="return quillContents()" />
</form>
...
<script src="https://cdn.quilljs.com/1.3.2/quill.js"></script>
<script>
const quill = new Quill('#editor', {
theme: 'snow'
})
const quillContents = () => {
const form = document.forms[0]
const editor = document.createElement('input')
editor.type = 'hidden'
editor.name = 'article[content]'
editor.value = document.querySelector('.ql-editor').innerHTML
form.appendChild(editor)
return form.submit()
}
</script>
express-sanitizer
(https://www.npmjs.com/package/express-sanitizer)
document.forms
(https://developer.mozilla.org/en-US/docs/Web/API/Document/forms)
我的视图只有一种形式,所以我使用了
document.forms[0]
,但如果您有多个或将来可能扩展您的视图以具有多种形式,请查看 MDN 参考。
我们在这里做的是创建一个隐藏的表单输入,我们分配 Quill Div 的内容,然后我们引导表单提交并将其传递给我们的函数以完成它。
现在,要测试它,请发一个带有
<script>alert()</script>
的帖子,这样您就不必担心注入漏洞。
仅此而已。
在我看来,您想要关注的是
将其输入您的document.querySelector('.ql-editor').innerHTML
,您将看到 HTML。console.log()
我的1.2.2版本的解决方案是:
首先在HEAD中导入css和js
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>
在 HTML 正文中声明一个带有 id 的 div
<div id="content_email" name="content_email"></div>
在脚本部分声明编辑器
<script>
var quill = new Quill('#content_email', {
theme: 'snow'
});
</script>
最后要获取带有 HTML 标签的内容,请将其放入 onclick 函数中:
var content = document.querySelector('.ql-editor').innerHTML;
console.log("content: ", content);
我的解决方案:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
const quill = new Quill('#editor', {theme: 'snow'});
//GET
var html = quill.getSemanticHTML();
//SET
quill.clipboard.dangerouslyPasteHTML(0, html);