Comments (3)
Hi, thanks for reporting on this. I'm not familiar with Flask-Admin, please add an minimal, complete, and verifiable example, then I can run and test with it.
from flask-ckeditor.
Oh, it was your comment in the Flask-Admin docs that got me here in the first place! And there are two Flask-Admin examples in the examples directory here.
In any case: I have an MCVE that is a small modification of the "flask-admin" example in this repo. This example takes the "Post" class and adds a one-to-many "Comment" to it, and then adds Comment as an inline model to the Post class. The goal is for the text field in the Comment to have a CKEditor instance.
To run this, use the "flask-admin" example, replacing app.py
with the code below, and add the template below as test_create.html
. When you run app.py
, go to "Post" and then select "create". You will get a form with "Title", "Text", and "Comments", this last one having an "Add Comments" button. This will inject a "New Comment" form onto the page, with a "Text" field; hitting "Add Comments" will continue to inject these forms onto the page. (This is automatic--this is just how Flask-Admin's inline_models functionality works. When you save the page, all the comments are created as relations to the post.) The question is how to get this "Text" field to be a CKEditor instance.
Thank you so much for looking this over.
app.py:
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_ckeditor import CKEditor, CKEditorField
from flask_admin import Admin
from flask_admin.contrib.sqla import ModelView
app = Flask(__name__)
app.config['SECRET_KEY'] = 'dev'
# Create in-memory database
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
ckeditor = CKEditor(app)
class Post(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(120))
text = db.Column(db.Text)
comments = db.relationship('Comment', backref='post')
class Comment(db.Model):
id = db.Column(db.Integer, primary_key=True)
text = db.Column(db.Text)
post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=False)
# Flask views
@app.route('/')
def index():
return '<a href="/admin/">Go to Admin!</a>'
# Customized Post model admin
class PostAdmin(ModelView):
create_template = 'test_create.html'
inline_models = [(Comment, dict(form_overrides=dict(text=CKEditorField)))]
admin = Admin(app, name='Flask-CKEditor demo')
admin.add_view(PostAdmin(Post, db.session))
def init_db():
"""
Populate a small db with some example entries.
"""
db.drop_all()
db.create_all()
# Create sample Post
title = "de Finibus Bonorum et Malorum - Part I"
text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor \
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud \
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure \
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt \
mollit anim id est laborum."
post = Post(title=title, text=text)
db.session.add(post)
db.session.commit()
if __name__ == '__main__':
init_db()
app.run(debug=True)
new test_create.html template:
{% extends 'admin/model/create.html' %}
{% block tail %}
{{ super() }}
{{ ckeditor.load() }}
{#
if you have set the configuration variables more than CKEDITOR_SERVE_LOCAL and CKEDITOR_PKG_TYPE,
or you need to config the CKEditor textarea, use the line below to register the configuration.
The name value should be the name of the CKEditor form field, it defaults to "text" in Flask-Admin.
#}
{{ ckeditor.config(name='comment') }}
{% endblock %}
from flask-ckeditor.
Since the textarea
is dynamically created when using inline model, I can't find a proper way to make it work with this extension. Please report this issue to Flask-Admin, maybe they can add a hook to support this feature.
from flask-ckeditor.
Related Issues (20)
- Image Upload Issue HOT 1
- AttributeError: 'NoneType' object has no attribute 'filename' HOT 5
- Add configuration CKEDITOR_CONTENTS_CSS
- is there a way to add babel/babelex support to translate the editor labels? HOT 8
- Documentation not available HOT 3
- Add example for external file browser integration
- Drop Python 2 support
- Move CI to GitHub Actions
- CKEditor fillEmptyBlocks Configuration
- Flask-CKEditor 1.0 Plan
- Markup removed in Flask 3.0.0 HOT 2
- Add readthedocs config file
- Format keys not working
- cleanify is missing HOT 1
- Code Snippet plugin not working in rendered HTML
- Where does the CKEditor Bundle go? HOT 2
- there is no static folder in pypi package 0.5.1
- there is no static folder in pypi package 0.5.1 HOT 1
- Warning CKEditor 4.14.0 version is not secure HOT 13
- Update bundled resources to 4.22.1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flask-ckeditor.