在烧瓶表单上生成降价预览

Question

我正在尝试制作一个非常类似于此文本框的界面，并在堆栈溢出问题表单上预览它。我使用hoep 来处理我的烧瓶后端的标记。以下是我的页面代码。

烧瓶

@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

出于性能原因，您应该有一个生成实时预览的客户端 Markdown 渲染器。提交表单后，您就可以应用服务器端渲染器来生成最终的 HTML。

StackOverflow 为客户端渲染器使用了一个名为 PageDown 的库。我编写了Flask-PageDown 扩展，它与 Flask-WTF 集成，并为您提供了一个带有预览的新字段类型。