**app.py**


 import os
# flask imports
from flask import Flask, flash, redirect, render_template, url_for
from flask_sqlalchemy import SQLAlchemy
from flask_ckeditor import CKEditor
from flask_wtf import FlaskForm

from wtforms import  SubmitField, TextAreaField
from wtforms.validators import DataRequired






basedir = os.path.abspath(os.path.dirname(__file__))

# 1. Initialize Extensions (No longer importing SQLAlchemy twice)
db = SQLAlchemy()
# create the app
app = Flask(__name__, static_folder='static')
ckeditor = CKEditor(app)

# 2. Configuration
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///project.db"
app.config['SECRET_KEY']= 'secret_key'

# initialize the app with the extension
db.init_app(app)






class CreateTiptapform(FlaskForm):
    # CKEditorField is correct for rich text input
    tiptap = TextAreaField('tiptap', validators=[DataRequired('Content is required')])
    submit = SubmitField('Submit')

# 6. Routes



@app.route('/testing_tiptap', methods = ['GET', 'POST'])
def testing_tiptap():
    if request.method == 'POST':
        return redirect(url_for('home')) # Redirect to the check page
    return render_template('testing_tiptap.html', title='testing tiptap')


# 7. Database Creation and App Run
if __name__ == '__main__':
    with app.app_context():
        # Ensure tables are created before running the app
        db.create_all()

    app.run(debug=True)


**main.js**

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  // bind Tiptap to the `.element`
  element: document.querySelector('.element'),
  // register extensions
  extensions: [Document, Paragraph, Text],
  // set the initial content
  content: '<p>Example Text</p>',
  // place the cursor in the editor after initialization
  autofocus: true,
  // make the text editable (default is true)
  editable: true,
  // prevent loading the default ProseMirror CSS that comes with Tiptap
  // should be kept as `true` for most cases as it includes styles
  // important for Tiptap to work correctly
  injectCSS: false,
})


testing_tipap.html

        <form action="" method="post" novalidate>
            <div class='element'></div>
            <script type="module" src="/static/src/main.js"></script>
        </form>