gpt4 book ai didi

javascript - 如何捕获在富文本编辑器 div 中输入的内容 - Quill rich editor

转载 作者:行者123 更新时间:2023-12-02 14:24:04 25 4
gpt4 key购买 nike

我正在尝试获取在 quill 编辑器 http://quilljs.com/examples/ 的编辑器 div 中输入的内容使用 jquery 代码,但它似乎不起作用。它适用于其他文本输入,但不适用于编辑器 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);
});

Here's a link to Quill's documentation for retrieval methods

关于javascript - 如何捕获在富文本编辑器 div 中输入的内容 - Quill rich editor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38426547/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com