在Web项目开发中，Quill.js是常用的富文本编辑器，而Flask是轻量级的Python后端框架，将两者结合实现富文本内容的表单提交是常见需求，但很容易出现数据无法正确传递的问题。
Quill.js编辑器基础配置
首先需要在前端页面引入Quill.js的相关资源，初始化编辑器实例，同时准备一个隐藏的<input>标签用于承载编辑器内容，方便和Flask表单联动。
<!-- 引入Quill资源 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- 表单结构 -->
<form method="post" action="/submit">
<!-- 富文本编辑器容器 -->
<div id="editor-container" style="height: 200px;"></div>
<!-- 隐藏输入框，用于存放编辑器内容 -->
<input type="hidden" name="content" id="content-input">
<button type="submit">提交</button>
</form>
<script>
// 初始化Quill编辑器
var quill = new Quill('#editor-container', {
theme: 'snow',
placeholder: '请输入内容...'
});
</script>
编辑器内容与表单的绑定逻辑
Quill.js编辑器的内容需要通过getContents或者root.innerHTML获取，然后在表单提交前将内容赋值给隐藏的<input>标签，才能保证数据随表单一起提交。
可以通过监听表单的提交事件，在提交前同步编辑器内容到隐藏输入框：
// 监听表单提交事件
document.querySelector('form').addEventListener('submit', function(e) {
// 获取Quill编辑器的HTML内容
var content = quill.root.innerHTML;
// 将内容赋值给隐藏输入框
document.getElementById('content-input').value = content;
});
如果需要提交Quill的Delta格式数据，也可以使用JSON.stringify(quill.getContents())获取内容后赋值，后端再根据格式解析即可。
Flask后端接收数据处理
Flask后端通过request.form获取表单提交的数据，需要注意对接收的内容做安全处理，避免XSS攻击。
from flask import Flask, request, render_template
import html
app = Flask(__name__)
@app.route('/submit', methods=['POST'])
def submit():
# 获取表单提交的content字段
raw_content = request.form.get('content', '')
# 对内容进行转义处理，避免XSS风险
safe_content = html.escape(raw_content)
# 这里可以将safe_content存储到数据库
print("接收到的内容：", safe_content)
return "提交成功"
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
常见提交问题及解决方案
- 提交后后端接收不到内容：检查是否遗漏了隐藏<input>标签的绑定逻辑，或者<input>的name属性是否与后端获取时的字段名一致。
- 内容中的HTML标签丢失：确认获取编辑器内容时使用的是
quill.root.innerHTML，而不是quill.getText()，后者只会获取纯文本。 - 提交后页面报错：如果是Flask的CSRF保护导致的，可以在表单中添加
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">，或者在测试阶段临时关闭CSRF保护。
注意事项
如果需要在后端还原Quill的富文本格式，不要对内容做过度转义，只需要过滤危险的脚本标签即可。另外，Quill编辑器的内容如果包含图片，默认是base64格式存储，提交时注意数据大小不要超过Flask默认的上传限制，必要时可以修改MAX_CONTENT_LENGTH配置。
提示：如果项目中使用了Flask-WTF表单，可以将隐藏输入框定义为HiddenField，在表单验证通过后直接获取字段值即可，流程和普通表单类似。