Question

我想让经过批准的用户编辑自己的Rich Text表单帖子。我知道TinyMCE，CKEditor，X-editable，wtf_tinymce等等，但我找不到能够从内联可编辑富文本字段发布表单数据的单一一致示例。

我认为此“Flask Biography”页面最接近，但看起来很复杂; TinyCME也有一个inline editing example但是需要一个div元素而不是一个传统的形式，所以我不知道如何从中获取数据。

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

Answer 1

SO Python聊天室有一个网站，https://sopython.com/带有wiki和其他一些工具。我们使用Ace作为文本字段增强功能。其他文本编辑可能也是类似的。

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

<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>

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

1 个答案: