javascript - 具有富文本就地编辑功能的 Flask 表单

Question

我想让批准的用户编辑他们自己的富文本表单帖子。我了解 TinyMCE、CKEditor、X-editable , wtf_tinymce等等，但我找不到一个能够从内联可编辑富文本字段发布表单数据的一致示例。

这个'Flask Biography我相信页面最接近，但看起来很复杂； TinyCME 还有一个 inline editing example但这需要一个 div 元素而不是传统的表单元素，所以我不知道如何从中获取数据。

如何在 Flask 表单字段上使用富文本编辑器？

Answer 1

SO Python 聊天室有一个网站，https://sopython.com/与维基和一些其他工具。我们使用Ace作为文本字段增强。其他文本编辑器的工作原理大概类似。

像平常一样创建一个基本文本区域，并以某种方式标记它以指示编辑器应该替换它。使用编辑器的 JavaScript API 创建编辑器，将其链接到文本区域，然后替换文本区域。提交表单仍然会提交文本字段，该文本字段由编辑器更新。

Here's how we integrate Ace:

<textarea data-editor="markdown"></textarea>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script type="text/javascript">
    // https://gist.github.com/duncansmart/5267653
    // find each text area marked to have an editor
    $('textarea[data-editor]').each(function() {
        var textarea = $(this);
        var mode = textarea.data('editor');
        // create the editor div
        var div = $('<div>', {
            'width': textarea.outerWidth(),
            'height': textarea.outerHeight(),
            'class': textarea.attr('class')
        }).insertBefore(textarea);
        // hide the original text area
        textarea.hide();
        // configure the editor
        var editor = ace.edit(div[0]);
        var session = editor.getSession();
        editor.setTheme("ace/theme/github");
        session.setValue(textarea.val());
        session.setMode('ace/mode/' + mode);
        session.setNewLineMode('unix');
        session.setTabSize(4);
        session.setUseSoftTabs(true);
        session.setUseWrapMode(true);
        // update the text area before submitting the form
        textarea.closest('form').submit(function() {
            textarea.val(editor.getSession().getValue());
        });
    });
</script>