Flask form with rich text in-place editing

Question

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.

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.

How do I use a rich text editor on a Flask form field?

Answer 1

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.

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.

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>