Using WTForms, Flask, CKEditor

I have a field in my form that has a dynamic number of entries; they can be both added and removed. Setting this up in WTForms was tricky and I utilized the solution discussed at this link. I am not well acquainted with JS so I’m finding it hard to adapt this function to produce a CKEditorField instead of a regular StringField/<textarea>.

The code below works, nothing is “broken” but the RTE doesn’t show up, only a regular textarea. This led me to believe that the problem is in the HTML rather than the Flask files, but I have included both just in case.

What I have tried so far is:

(1) Replaced Entry form’s bullet StringField with a CKEditorField (Forms.py, below)

(2) Adding “class=ckeditor” to the textarea return and manually calling CKEditor’s replace functions (even though the docs say that this is automatically included) (app.js)

(3) Creating and returning CKEditor.config calls to the HTML for each newly generated field (the docs suggest having this for each CKE on a page, and the other places that I use CKE ((the non-dynamically-created ones)) are working with this in place) (app.js)

(4) Replacing the <textarea> return with a call to CKEditor.create (this one is where I believe the answer probably lies but it hasn’t worked and I can’t figure out what else to try) (app.js/webpage.html)

Also just to note, the other form field, plans, is working with the editor successfully.

Forms.py

class Entry(FlaskForm):
    # (1)
    # bullet = StringField(validators=[validators.DataRequired()])
    bullet = CKEditorField(validators=[validators.DataRequired(), validators.Length(max=1000)])

class MyForm(FlaskForm):
    entries = FieldList(FormField(Entry), min_entries=0)
    plans = CKEditorField('Plans', [validators.InputRequired(), validators.Length(max=1000)])

app.js

$(document).ready(function() {   
    // (2) 
    // These are redundant but not working
    CKEDITOR.replaceClass = 'ckeditor';
    CKEDITOR.replaceAll( 'ckeditor' ); 


    var addCount = 1;            
    $("#addNewField").click(function() {
        var newInput = $("#entries");
        newInput.append(GetDynamicTextBox("", addCount));
        $("#entries").append(newInput);
        addCount += 1;
        listCKE();        
    });

    // (3)
    // CKE Documentation says to include a config instruction
    // (in the form of) {{ ckeditor.config(name="misc_risks") }}
    // This fn is my attempt at returning one of those for each added entry to the HTML
    // This doesn't work, just returns raw text printed on the page
    function listCKE() {
        var items = ``;
        for (var i=0; i<addCount; i++) {
            items += `{{ckeditor.config(name="subdir`+i.toString()+`")}}`;
        }
        console.log(items)
        document.getElementById("listcke").innerHTML = items;
    }
        
});


function GetDynamicTextBox(value, addCount) {
    return '<div>' + 'Entry&nbsp' + addCount + ':&nbsp' +
    // (4)
    // Tried replacing <textarea> with ckeditor create func; didn't work
    // '{{ckeditor.create(name="subdir' + addCount + '")}}' +
    // (2)
    '<textarea class="ckeditor" name = "subdir' + addCount + '"type="text" value = "' + value + '"> </textarea> ' +
    '<input type="button" value="Remove" class="remove" />' + '</div>' ;
}

$(function () {
    $("#addNewField").click(function() {
        $("#entries").append(GetDynamicTextBox("", addCount));                
            
    });
    
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
        addCount -= 1;
    });
}); 

webpage.html

<form method="POST" enctype="multipart/form-data">
    {{form.csrf_token}}

            <button type="button" id="addNewField">Add Entry</button>
            {% for subdir in form.subdirs %}
            {{ forms.render_field(subdir.name) }}
            {% endfor %}
            {{ form.entries() }}

            {{ form.plans.label }} {{ form.plans() }}

    <p><input type="submit" value="Submit"></p>
</form>
{{ ckeditor.load(pkg_type="basic") }}
{{ ckeditor.config(name="plans") }}
<!-- (4) This was used with the listCKE function in app.js. Didn't work, only returned raw text in {{}} to page -->
<!-- <div id="listcke"></div> -->