CKEditor integration for Flask, including image upload, code syntax highlight, and more.
Home Page: https://flask-ckeditor.readthedocs.io
License: MIT License
CKEditor integration for Flask, including image upload, code syntax highlighting, and more.
If you find Flask-CKEditor useful, please consider donating today. Your donation keeps Flask-CKEditor maintained and updated with CKEditor.
This project is licensed under the MIT License (see the LICENSE file for details).
I'm trying to use CKEditor in a Flask-Admin app, but where the field I need is in an inline model. In these cases, the Admin interface can generate any number of "add" forms, which will have id values like tablename-0-fieldname, tablename-1-fieldname, etc.
If I follow the general instructions for flask-admin integration, but set up my inline models in my ModelView subclass like:
inline_models = [(Quotation, dict(form_overrides=dict(bibliography=CKEditorField)))]
and then in my template:
{{ ckeditor.load() }}
{{ ckeditor.config(name='bibliography') }}
I end up with with a textarea that looks like:
<textarea class="ckeditor form-control" id="quotations-0-bibliography" name="quotations-0-bibliography"></textarea>
However, this does not cause a CKEditor instance to exist. I note that there is no <div id="cke_text"... that I see in the sample Flask-Admin app.
Is there a simple way to get this to work? Is there a not-simple way to get this to work?
Hi,
Thank you for this plugin. It helped me a lot with the project that i am working on.
I am able to upload images but can't make the file browser work.
I'll be really glad if you can at least show me where to look to solve the problem.
Or a sample would be great if you got time.
Thanks.
Would it be possible to have something like :
app.config['CKEDITOR_CONTENTS_CSS'] = ['/static/bootstrap/css/bootstrap.css','/static/bootstrap/css/theme.css','/static/styles.css']
instead of having to do something like
{{ ckeditor.config(name='text', custom_config="contentsCss: ['/static/bootstrap/css/bootstrap.css','/static/bootstrap/css/theme.css','/static/styles.css']") }}
in every forms ?
we have an option to build the ckeditor as we like it. but how would we be able to use that version with this?
Q1：
我编写完了博客，然后保存到了数据库中，但是过了几天我想修改博客的内容，怎么能将数据库中的数据回显到CKEditor的编辑区域呢？
Q2：
图片好像不支持响应式？怎么在img标签上默认添加上**class="img-fuild"**标签呢？
{{ ckeditor.create() }} returns an editor. Is it possible to return an editor with some data in it ?
Something like, ckeditor.create(value="This text is prewritten") should open up the editor with that text already written into it.
im developing a software that will be used with a non english language, so it would be great to translate the labels of the editor
想实现对数据库中文章的编辑功能，需要实时提取文章后，渲染到Flask-CKEditor编辑框修改，普通的表单能通过能通过jinja2变量实现，如{{ s }}，(s为数据库提取的文章)
Hi, I download my Customs CKEditor build resource ,and Use "Custom_url" to import , but only "/static/ckeditor/ckeditor.js"
"http://127.0.0.1:5000/static/ckeditor/config.js?t=I3I8"
can be rendered in the index.html.
Here is my Template:
<title>Flask-CKEditor Demo</title> {{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}body:
{{ ckeditor.config(name='body', custom_config="uiColor: '#9AB8F3'") }}
I am trying to implement html5video
but I find some diffculty in custom its button
ref : bahriddin/ckeditor-html5-video#4
How can I code such as :
editor.ui.addButton && editor.ui.addButton( 'html5video', {
label : 'Video',
command : 'html5video'
});
Thanks
I have set up everything as per documentation and example but i am getting this error.
below is my route that handles the image upload the jinja error is on the f.filename.split. Kindly assist
@port.route('/admin/add', methods=['GET', 'POST'])
@login_required
def add_post():
categories = Category.query.all()
blog = Blog()
f = request.files.get('upload')
extension = f.filename.split('.')[-1].lower()
if extension not in ['jpg', 'gif', 'png', 'jpeg']:
return upload_fail(message='Image only!')
f.save(os.path.join(app.config['UPLOADED_PATH'], f.filename))
url = url_for('uploaded_files', filename=f.filename)
return upload_success(url=url)
# form
form = ArticleForm()
if form.validate_on_submit():
image_url = photos.url(photos.save(form.picture.data))
new_blog = Blog(title=form.title.data, category_id=int(request.form['category_id']),
picture=image_url, user_id=current_user.id, text=form.text.data)
db.session.add(new_blog)
db.session.commit()
flash("Blog Posted", 'success')
return redirect(url_for('port.admin'))
return render_template('admin/add_post.html', form=form, categories=categories, blog=blog)
Great work
Do you have a demo about how to save/upload the edited content
In my app, I needed to load CKEditor in the readonly mode (like an HTML <textarea> tag) just to render the HTML content, while disallowing the user to make any changes. Unfortunately, though the hyperlinks get correctly rendered, those can't be clicked anymore. If the mouse hovers over the linked word, the link is displayed in the browser's status bar, as expected. But, neither clicking the word triggers the link, nor right-clicking the word brings up the context menu. Any idea how to get around this issue?
I tried to add following toolbar configuration in config.js(in ckeditor folder):
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'document', items: [ 'Save', 'NewPage', 'Templates' ,'-','Preview'] },
{ name: 'clipboard', items: [ 'Undo', 'Redo','-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', '-', 'Scayt' ] },
'/',
{ name: 'basicstyles', items: [ 'CopyFormatting', 'RemoveFormat' ,'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'] },
{ name: 'paragraph', items: [ 'HorizontalRule','PageBreak', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
'/',
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Table', 'Image', 'Flash', 'Smiley', 'SpecialChar' ] },
{ name: 'element', items: ['Blockquote', 'CreateDiv', 'Iframe', '-'] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'styles', items: [ 'Source', 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'about', items: [ 'Language' , 'About'] }
];
};
but seems no effect the actual interface, is there a way I can make it?
or should I change something in {{ ckeditor.config() }}, and how?
thanks.
If CSRF protection is enabled in Flask via CSRFProtect(app), clicking "Send it to the server" in the image upload tab will return an error an error - HTTP 400 "CSRF token missing"
with
CKEDITOR_SERVE_LOCAL = False
CKEDITOR_ENABLE_CODESNIPPET = True
CKEDITOR_PKG_TYPE = 'full'
It can't get codesnippet default.
Request URL: https://cdn.ckeditor.com/4.14.0/full/plugins/codesnippet/plugin.js?t=K24B
Request Method: GET
Status Code: 404
Remote Address: 204.93.150.153:443
Referrer Policy: strict-origin-when-cross-origin
hi,
I installed ckeditor with plugin 'wordcount'. As far as I understand the documentation, it should be possible to pass a variable 'maxCharCount' . Any chance on support to get that working? I tried all kinds of combinations like in this syntax {{ ckeditor.config( ... ) }}. I cannot get it to work.
It does work however, if I hardcode the maxCharCount in the plugin.js file, but that would mean I have to give all textarea fields the same value.
kind regards
Is possible remove the source plugin from your example ?
https://github.com/greyli/flask-ckeditor/tree/master/examples/basic
如果文章没写完，欲保存草稿，使用FLASK-Ckeditor怎么实现呢
[CKEDITOR] Error code: editor-element-conflict. {editorName: "body"}
(anonymous) @ ckeditor.js:21
l @ ckeditor.js:10
(anonymous) @ ckeditor.js:12
CKEDITOR.error @ ckeditor.js:20
CKEDITOR.editor._getEditorElement @ ckeditor.js:299
a @ ckeditor.js:368
CKEDITOR.replace @ ckeditor.js:372
CKEDITOR.replaceAll @ ckeditor.js:373
(anonymous) @ ckeditor.js:376
b @ ckeditor.js:7
a @ ckeditor.js:7
ckeditor.js:21 [CKEDITOR] For more information about this error go to https://ckeditor.com/docs/ckeditor4/latest/guide/dev_errors.html#editor-element-conflict
虽然不影响使用， 但请指出问题所在并加以更改。 （强迫症很可怕。。）
examples/image-upload/目录下中的app.py中的代码
对于这句代码app.config['UPLOADED_PATH'] = os.path.join(basedir, 'uploads')，不太理解，请问哪里有资料可以查阅
I have the impression from here https://ckeditor.com/pricing/ that CKEditor is not completely free. So, using this extention is also not completely free. Should we include that somewhere in the README as the project currently holds an MIT license
Hello I was having problems with image upload to my website and ran into some HTTP errors am I ran the example code of image upload youve provided and am still running into the same error. Let me upload screenshots of what i am seeing
This is when i click okay
this is wen i click the send to server. Kindly assist
Hi, i need plugins in the text editor but i don't now how add them...
Plugins i need, font color, font family, etc...
I m a beginner, i need clear examples... step by step.
Thank you !
I am trying to add a CKEditorField() in a model, but when creating/instantiate it, error eccured:
mongoengine.errors.FieldDoesNotExist: The fields "{'key'}" do not exist on the document "doc"
https://flask-ckeditor.readthedocs.io/ only shows an error.
500 Internal Server Error
nginx
Please fix this
@greyli. I noticed that as of version 0.4.2, the package description (in setup.py) changed. Before version 0.4.2, it was pretty descriptive, but since then, it is not.
Was that change made on purpose?
Probably needless to say is that the description is used on PyPi, so people looking at the package on PyPi might not understand the function (and coolness!) of it.
你好！
If I install a theme and add a plugin for the code:
class Config(object):
CKEDITOR_PKG_TYPE = 'basic'
CKEDITOR_ENABLE_CODESNIPPET = True
then in this case I get this error:
With CKEDITOR_PKG_TYPE = 'standart' and 'full' all right.
Can not upload image everything is as in example
this example is Missing
I use the app.config['CKEDITOR_EXTRA_PLUGINS'] = ['markdown'] and app.config['CKEDITOR_ENABLE_MARKDOWN'] = True will lead the CKEditor shows the "Markdown" button. But when I click it ,the input text will be clear. And then can't input anything. Please help. Thanks.
can't display like this:
Hi, I've met some problems using self-host ckeditor.js file with ckeditor.load().
Usually, FE engineers usually uses "defer" for js script loading. I've tried to load ckeditor.js with <script defer src="..."> and ckeditor.load("..."), there will be error in the console. I guess there's inline scripts run before the loading of ckeditor.js. So is there any solution to load ckeditor.config() scripts asynchronously after ckeditor.js has already been loaded?
Hi, I use this a lot in one of my major projects (thankyou!), both for custom Flask-WTF forms and in flask-admin with no huge problems, except one - I need the SCAYT spell checker turned on by default. I can do this for my custom forms in the flask app using the custom config option:
{{ ckeditor.config(custom_config : "scayt_autoStartup = true'") }}
But that doesn't work with flask-admin forms, so I've had to do some ugly hacking about to make it work.
Anything in the main config options do work with flask-admin forms though, so if there was another option available (CKEDITOR_CUSTOM_CONFIG ?) then little tweaks like this could be done easily. Is this something that could be added or would this open a 'can of worms'?
One last important thing: Thanks for all your hard work with flask-ckeditor, I love how easy it makes using a WYSIWYG editor in Flask.
when i enable code snippets with (app.config['CKEDITOR_ENABLE_CODESNIPPET'] = True)
ckeditor disappear.
I must have to install any plugin or lib ?
添加图片选择左对齐或者右对齐会影响html布局
【影响“显示内容”下方的内容】
Hello!
I'm using flask-ckeditor==0.4.3, and when I enabled CKEDITOR_ENABLE_CODESNIPPET = True , the editor disappears. But when not enable that, the editor can show up normally.
I also checked the console in the browser, and I got the following error:
Error: [CKEDITOR.resourceManager.load] Resource name "codesnippet" was not found at "http://cdn.ckeditor.com/4.9.2/standard/plugins/codesnippet/plugin.js?t=I3I8".
How can I solve this? Thank you!
运行示例程序中，发现引用块提交后样式会变成普通p标签的样式，不知道是不是CKEditor的bug。
Upload tab does not appear in flask admin and please add full example with upload in flask admin
Checklist:
Deadline: The end of this week.
如果我想实现文字居右，应该如何操作呢？
文章落款，想要文字居右，我看了一下没有这个选项。
或者自己加一个class，然后前端css再定义这个class。
<p class='float-right'>居右</p>
或者直接
<p style='text-align:right'>居右</p>
Hi,
I don't understand anymore how to fix this and I'm probably doing something wrong here.
I'm trying to add flask-ckeditor with a custom basic ckeditor with extras (image upload and file manager). I downloaded the zip file and extracted all ckeditor files to /static/ckeditor/.
Now in my config.py I have the following:
CKEDITOR_PKG_TYPE = 'basic'
CKEDITOR_SERVE_LOCAL = True
that doesn't work. I added this to the template:
{{ ckeditor.load(custom_url=url_for('static', filename='ckeditor/ckeditor.js')) }}
still it doesn't show my custom editor. What is the solution?
many thanks!
Hi,
I have tried everything but I can't seem to get the file upload tab to appear in the CKeditor (in Image Properties).
It is strange because it was working for me a few months ago with the same code and I successfully uploaded images. I don't know if anything has changed since then. The code below is what I used and it is pretty much the same as the one in the documentation. My Flask CKEditor version is 4.9.2
Would you know if there is any known issue? Thanks.
In config.py
CKEDITOR_HEIGHT=250
CKEDITOR_WIDTH='100%'
CKEDITOR_PKG_TYPE='standard'
CKEDITOR_SERVE_LOCAL=True
CKEDITOR_FILE_UPLOADER='upload'
basedir = os.path.abspath(os.path.dirname(__file__))
UPLOADED_PATH=os.path.join(basedir, 'uploads')
CKEDITOR_UPLOAD_ERROR_MESSAGE='Upload failed'
In __init__.py
from flask_ckeditor import CKEditor
ckeditor = CKEditor(app)
In route.py
@app.route('/files/<filename>')
def uploaded_files(filename):
path = app.config['UPLOADED_PATH']
return send_from_directory(path, filename)
@app.route('/upload', methods=['POST'])
def upload():
f = request.files.get('upload')
extension = f.filename.split('.')[1].lower()
if extension not in ['jpg', 'gif', 'png', 'jpeg']:
return upload_fail(message='Image only!')
f.save(os.path.join(app.config['UPLOADED_PATH'], f.filename))
url = url_for('uploaded_files', filename=f.filename)
return upload_success(url=url)
I am using Flask-Admin and have already integrated ckeditor and works with only texts but I need to upload images with text too and I need more examples if it is possible
Without WTF
This is a great approach for implementing ckeditor. Thanks for the effort. Have you looked at integrating CKFinder into CKEditor? I'm looking at this now but not quite sure how to go about it.
Since CKEditor 5 is released. Is there any plan to it be implemented on Flask CKEditor?
Hi Li,
Pretty enjoyed the extension you made. Thank you very much!
Here`s one issue that inside the image property window, only Image Information and Link button are showed up, however, the Upload button is mis-rendered.
In rendered html source code page, inside the CKEditor script :
/tech is my blueprint prefix.
<script type="text/javascript">
CKEDITOR.replace( "Content", {
language: "",
height: 0,
width: 0,
//toolbarCanCollapse: true,
codeSnippet_theme: "monokai_sublime",
imageUploadUrl: "/tech/upload",
filebrowserUploadUrl: "/tech/upload",
filebrowserBrowseUrl: "",
extraPlugins: "filebrowser,filebrowser",
});
</script>
Noticed that the filebrowser string has been generated twice comparing with the project standard example I ran early, is this the problem? Any possible reason?
For whole application I have config.py, the CKEditor related :
class Config(object):
CKEDITOR_FILE_UPLOADER = 'Technical.upload'
CKEDITOR_SERVE_LOCAL = True
For blueprint Technical/routes.py, I basically follow instruction:
@mod.route('/files/<path:filename>')
def uploaded_files(filename):
path = '/var/www/FlaskApp/FlaskApp/static/post_pics'
return send_from_directory(path, filename)
@mod.route('/upload', methods=['POST'])
def upload():
f = request.files.get('Technical.upload')
extension = f.filename.split('.')[1].lower()
if extension not in ['jpg', 'gif', 'png', 'jpeg']:
return upload_fail(message='Image Only')
f.save(os.path.join('/var/www/FlaskApp/FlaskApp/static/post_pics', f.filename))
url = url_for('Technical.uploaded_files', filename=f.filename)
return upload_success(url=url)
BTW, Is this correct?
f = request.files.get('Technical.upload')
or should I remove blueprint prefix 'Technical.'?
Thanks in advance.
示例代码basic项目中有XSS漏洞,对于示例代码本身肯定是没有实际影响,但是如果有小朋友也没搞明白就直接拿去用到生产环境的代码就很危险了。
Hi,
I'm using Flask-CKeditor currently with Flask-Admin in standard view and trying to set configuration in config.py to get it to basic. Why isn't this working? simplified code is as follows. This code works fine but continues to show only the standard ckeditor. I would like it to be the basic view, as is set in the config.py file.
init.py:
cdeditor = CKEditor()
def create_app(config_class = Config):
app = Flask(__name__)
app.config.from_object(config_class)
ckeditor = CKEditor(app)
config.py:
class Config(object):
CKEDITOR_PKG_TYE = 'basic'
Flask-Admin view:
form_overrides = { 'fieldname': CKEditorField }
my_create.html:
{% extends 'admin/model/create.html' %}
{% block tail %}
{{ super() }}
{{ ckeditor.load() }}
{% endblock %}>
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.