Flask窗体与丰富的文本就地编辑 [英] Flask form with rich text in-place editing

问题描述

这个 Flask Biography '页面最接近我相信但看起来很复杂; TinyCME也有一个内联编辑示例，但是需要div元素，而不是一个传统的表单，所以我不知道如何从中获取数据。

I want to let approved users edit their own Rich Text form posts. I know about TinyMCE, CKEditor, X-editable, wtf_tinymce etc. but I cannot find a single consistent example of being able to post form data from an inline editable rich text field.

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

This 'Flask Biography' page comes closest I believe but it looks complex; TinyCME also has an inline editing example but that requires a div element rather than a conventional form one, so I don't see how to get the data from that.

推荐答案

Python Python聊天室有一个网站， https://sopython.com/ 与wiki和其他工具。我们使用 Ace 作为文本字段的增强功能。其他的文本编辑器大概是一样的。

The SO Python chat room has a website, https://sopython.com/ with a wiki and some other tools. We use Ace as a text field enhancement. Other text editors presumably work similarly.

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

Create a basic text area as normal, and mark it in some way to indicate that the editor should replace it. Use the editor's JavaScript API to create an editor, link it to the text area, and replace the text area. Submitting the form still submits the text field, which is updated by the editor.

以下是我们如何整合Ace： b
$ b

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>

这篇关于Flask窗体与丰富的文本就地编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！