如何捕获在富文本编辑器div中键入的内容 - 富有丰富的编辑器 [英] How to capture content typed in a rich text editor div - Quill rich editor
问题描述
我正试图抓取已在编辑器div中输入的内容,该编辑器的div由编辑器 http://quilljs.com/例子/ 使用jQuery代码,但它似乎并没有工作。它适用于其他文本输入,但不适用于编辑器div。
I am trying to fetch content that has been typed in the editor div of quill editor http://quilljs.com/examples/ using jquery codes but it does not seem to work. It works for other text inputs but not for the editor div. I have a running illustration below .
$(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中键入的内容并提醒值类型。
I want when i click the submit button, It captures also the content typed in the text editor div and alerts the values types.
任何帮助都将被赞赏
推荐答案
Quill拥有自己的API用于内容检索。使用以下代码替换click方法应该允许您从Quill实例获取纯文本值。
Quill has it's own API for content retrieval. Replacing your click method with following code should allow you to get the plain text value from your Quill instance.
$(document).on("click", "#SubmitButton", function(e) {
e.preventDefault();
var question = advancedEditor.getText();
var title = $("#title").val();
console.log(title, question);
});
这篇关于如何捕获在富文本编辑器div中键入的内容 - 富有丰富的编辑器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!