在Flask窗体上生成降价预览

Question

我正在尝试做一个界面非常像这个文本框和预览下面的堆栈溢出问题形式。我使用hoep来处理flask后端的标记。下面是我的页面代码。在

烧瓶

@bp.route('/write', methods=['GET', 'POST'])
@login_required
def write():
    form = WritePostForm()
    if form.validate_on_submit():
        extensions = hoep.EXT_FENCED_CODE
        html = hoep.render(form.text.data, extensions)
        p = Post(
            title=form.title.data,
            body=html,
            author=current_user._get_current_object()
        )
        db.session.add(p)
        db.session.commit()
        return redirect(url_for('posts.post', post_id=p.id))
    return render_template("post/write.html", form=form)

然而，当我在写作时，我希望生成某种预览，因为hoep会将其渲染成。在

我想到的直接解决方案是在某种$('input').change事件上向服务器发出请求，并返回hoep编译的呈现结果。在

问题是，这将是太多的请求，这将是太慢，因为帖子可能会变得相当长，而且霍普每次都会查看它。一个_.debounce可能会有一点帮助，但似乎仍然不是一个优雅的解决方案

如何有效地实现这一点？在

Answer 1

出于性能原因，您应该有一个客户端降价渲染器来生成实时预览。一旦表单被提交，您就可以应用服务器端呈现程序来生成最终的HTML。在

StackOverflow使用名为PageDown的库作为客户端呈现器。我已经编写了与flaskwtf集成的Flask-PageDown扩展，并为您提供了一个带有预览的新字段类型。在