Comments (65)
I just updated the newer example for image upload and release 0.4.0.
from flask-ckeditor.
How do you know the CKEditor <textarea>
's name is ckeditor
?
IMO, the name seems to be text
, so you need to call:
{{ ckeditor.config(name='text') }}
from flask-ckeditor.
CKEditor only accepts name
or id
, it's not what I can implement. Maybe you can create an issue in ckeditor-dev.
As for responsive images, just use CSS.
Since the problem was solved, I just close this issue for now.
from flask-ckeditor.
Here are some basic examples. However, image upload behavior changed since CKEditor 4.5, I will release a new version to support it today.
from flask-ckeditor.
I need it to use with flask admin, upload image or better is to browse directory too and if you can help me that would be great
from flask-ckeditor.
@greyli
where are you telling ckeditor to override image field ? I need it to use with flask-admin and maybe it has to be without WTF..
from flask-ckeditor.
I don't understand your question. What's the image field?
When you set CKEDITOR_FILE_UPOLOADER
with proper value, you can just drag and drop the image file into the editor or upload with image widget.
These resources may be helpful:
- This SO answer demonstrates how to integrate with Flask-Admin.
- This example show how to use Flask-CKEditor without Flask-WTF.
from flask-ckeditor.
@greyli
Are you planning adding directory browser ? I think it is CKfinder
from flask-ckeditor.
I did think about it, but currently, I don't have time to investigate and implement it. Happy to accept PR addressing this.
from flask-ckeditor.
Can I use it without FlaskForm class ?
from flask-ckeditor.
Sure, check out this example.
from flask-ckeditor.
In Flask Admin Standard way is to override StringField but for your extension I can not understand for images how to get worked it..
from flask-ckeditor.
- Override StringField with
flask_ckeditor.CKEditorField
- Implement a view function which handles upload files
- Set
CKEDITOR_FILE_UPLOADER
to the upload handler view's endpoint
from flask-ckeditor.
So.. tried several things and not working, may Flask-Admin needs different details to upload images within ckeditor
from flask-ckeditor.
Provide the error traceback and a minimal application will be helpful.
from flask-ckeditor.
class CKTextAreaWidget(widgets.TextArea):
def __call__(self, field, **kwargs):
# add WYSIWYG class to existing classes
existing_classes = kwargs.pop('class', '') or kwargs.pop('class_', '')
kwargs['class'] = u'%s %s' % (existing_classes, "ckeditor")
return super(CKTextAreaWidget, self).__call__(field, **kwargs)
class CKTextAreaField(TextAreaField):
widget = CKTextAreaWidget()
class OffersView(ModelView):
column_list = ["title_ka", "title_en", "title_ru", "is_main", "is_enabled", "position"]
form_overrides = dict(desc_ka=CKTextAreaField,desc_en=CKTextAreaField,desc_ru=CKTextAreaField)
create_template = 'edit.html'
edit_template = 'edit.html'
def is_accessible(self):
if flask_login.current_user.is_authenticated:
user = CustomUser.objects.get(email=flask_login.current_user.id)
return user.is_superuser
def inaccessible_callback(self, name, **kwargs):
# redirect to login page if user doesn't have access
return redirect(url_for('login', next=request.url))
from flask-ckeditor.
{% extends 'admin/model/edit.html' %}
{% block tail %}
{{ super() }}
<script src="//cdn.ckeditor.com/4.9.2/full/ckeditor.js"></script>
<script type="text/javascript">
$('.control-group a').click( function(e) {e.preventDefault();
for(var instanceName in CKEDITOR.instances)
CKEDITOR.remove(CKEDITOR.instances[instanceName]);
CKEDITOR.replaceAll('ckeditor');
return false; } );
</script>
{% endblock %}
from flask-ckeditor.
form override does not work for your extension, you may test it for flask-admin
from flask-ckeditor.
I never used Flask-Admin before, so I can't help you too much. IMO, you should replace your code like this:
from flask_ckeditor import CKEditorField
class OffersView(ModelView):
column_list = ["title_ka", "title_en", "title_ru", "is_main", "is_enabled", "position"]
form_overrides = dict(desc_ka=CKEditorField, desc_en=CKEditorField, desc_ru=CKEditorField)
create_template = 'edit.html'
edit_template = 'edit.html'
def is_accessible(self):
if flask_login.current_user.is_authenticated:
user = CustomUser.objects.get(email=flask_login.current_user.id)
return user.is_superuser
def inaccessible_callback(self, name, **kwargs):
# redirect to login page if user doesn't have access
return redirect(url_for('login', next=request.url))
You should provide the error traceback or I can't know what's the actual problem. Besides, Expected behavior and Actual behavior also helpful.
from flask-ckeditor.
I will see further in future thanks.
https://stackoverflow.com/questions/50675748/can-not-catch-ckeditor-id-and-reload-instance-on-it
this is other issue if you can help me ?
from flask-ckeditor.
So,
I have done some tests with flask admin and I got upload option but when I am attempting to upload image it has 404 error (there is extra parameters in form action='/upload?some_params_of_ckeditor may this is the issue ? )
from flask-ckeditor.
As I have seen it needs csrf token or I am doing something wrong with flask admin
from flask-ckeditor.
SO I avoid csrf but now I am getting {"filename":"","uploaded":1,"url":"/files/GeoAdsCover_1.png"} this response when uploading image in ckeditor, so it is not parsing name
from flask-ckeditor.
4.9.2 it is working on this version, I will test fully for flask admin and bring you full example :)
from flask-ckeditor.
from flask_ckeditor import *
csrf = CSRFProtect(app)
csrf.init_app(app)
ckeditor = CKEditor(app)
app.config['CKEDITOR_SERVE_LOCAL'] = False
app.config['CKEDITOR_HEIGHT'] = 400
app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'
app.config['UPLOADED_PATH'] = os.path.join(basedir, 'uploads')
@app.route('/files/<filename>')
@csrf.exempt
def uploaded_files(filename):
path = app.config['UPLOADED_PATH']
return send_from_directory(path, filename)
import uuid
@app.route('/upload', methods=['POST'])
@csrf.exempt
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!')
unique_filename = str(uuid.uuid4())
f.filename = unique_filename + '.' + extension
f.save(os.path.join(app.config['UPLOADED_PATH'], f.filename))
url = url_for('uploaded_files', filename=f.filename)
return upload_success(url=url)
f.filename = unique_filename + '.' + extension
in flask admin edit.html
CKEDITOR.plugins.addExternal( 'filebrowser', '/static/ckeditor/filebrowser/', 'plugin.js' );
CKEDITOR.config.extraPlugins = 'filebrowser';
CKEDITOR.config.filebrowserBrowseUrl = '/upload';
from flask-ckeditor.
If I will use {{ ckeditor.load() }} it will load CKEDITOR but it will not add plugin to ckeditor window and that is a issue left
app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'
does not have any impact
from flask-ckeditor.
How do you create the textarea? Did you call {{ ckeditor.config() }}
in the template?
from flask-ckeditor.
@greyli Yes I have Called But did not work, I will test it again with some details and tell you
from flask-ckeditor.
Currently, I do not know too much about Flask-Admin, I will try to learn how to integrate Flask-Admin with Flask-CKEditor when I have free time.
from flask-ckeditor.
@greyli integration is not problem, I have to add additional JS to get work image uploads
CKEDITOR.plugins.addExternal( 'filebrowser', '/static/ckeditor/filebrowser/', 'plugin.js' ); CKEDITOR.config.extraPlugins = 'filebrowser'; CKEDITOR.config.filebrowserBrowseUrl = '/upload';
from flask-ckeditor.
When calling {{ ckeditor.config() }}
, Flask-CKEditor initialize a CKEditor for a <textarea>
named ckeditor
. You may need to find out what is the name used when Flask-Admin create the <textarea>
, and pass it to config()
(e.g. {{ ckeditor.config(name='the_name_attr') }}
).
from flask-ckeditor.
@greyli that is not a problem. ckeditor is working, only image upload window is not working without adding extra plugin, I will test it again.
from flask-ckeditor.
In addition can you write documentation about adding extra plugins ? for example adding responsive table plugin.
from flask-ckeditor.
I confirm without this
<script>
CKEDITOR.config.filebrowserUploadUrl = '/upload';
</script>
Image Upload is not showing up in ckeditor in flask admin
from flask-ckeditor.
The filebrowserUploadUrl
config will be added after calling ckedtior.config()
(flask_ckeditor/init.py#L101), so it's important to pass correct name attribute.
You can pass extra plugins name as a list in CKEDITOR_EXTRA_PLUGINS
, such as ['responsive_table']
, it also needs to call ckedtior.config()
to make it work.
from flask-ckeditor.
Show me ckedtior.config() example please
from flask-ckeditor.
https://github.com/greyli/flask-ckeditor/blob/master/examples/basic/templates/index.html#L21
from flask-ckeditor.
name=body is that for to load ckeditor on body ? I need to know how to tell ckeditor cobfig that image upload url is /upload
from flask-ckeditor.
ckeditor.config()
is the way to tell CKEditor what is the upload URL. The name should be the name
value of CKEditor <textarea>
, you need to render the page, click F12 and find the textarea element, then you will get the correct name value.
from flask-ckeditor.
it is not required for me to tell which is the textarea ckeditor already loads without telling that. i need to tell config that to use url for upload.
from flask-ckeditor.
You set app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'
, then Flask-CKEditor will turn it into url, and when you call ckeditor.config()
, it will generate JavaScript code to set the url (i.e. filebrowserUploadUrl: "/upload"
).
from flask-ckeditor.
So I only was loading ckeditor without
ckeditor.config()
and do I have to call ckeditor.config()
too ??
from flask-ckeditor.
If you want to write config code yourself, for example:
CKEDITOR.plugins.addExternal( 'filebrowser', '/static/ckeditor/filebrowser/', 'plugin.js' );
CKEDITOR.config.extraPlugins = 'filebrowser';
CKEDITOR.config.filebrowserBrowseUrl = '/upload';
then you can skip cdeditor.config()
from flask-ckeditor.
only calling cdeditor.config()
is not working
app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'
does not have any impact that is problem
from flask-ckeditor.
https://github.com/zrq495/flask-ckfinder
Can you also fork this ?
from flask-ckeditor.
As I said, you need to find out the name of CKEditor <textarea>
and pass it as cdeditor.config(name='the_name')
.
I'll try to integrate a file browser when I have free time.
from flask-ckeditor.
@greyli So
cdeditor.config(name='the_name') does not needed, ckeditor is loading without it, but
app.config['CKEDITOR_FILE_UPLOADER'] = 'upload' this does not work when pressing image icon in ckeditor, it is not loading upload tab
to load upload tag it needs
CKEDITOR.plugins.addExternal( 'filebrowser', '/static/ckeditor/filebrowser/', 'plugin.js' );
CKEDITOR.config.extraPlugins = 'filebrowser';
CKEDITOR.config.filebrowserBrowseUrl = '/upload';
and how to tell ckeditor upload url without extra JS above ?
from flask-ckeditor.
If you want to tell CKEditor the upload URL without extra JS, set this in Python:
app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'
And call it in Jinja:
ckeditor.config(name='the_name')
from flask-ckeditor.
So that I was talking about that this:
app.config['CKEDITOR_FILE_UPLOADER'] = 'upload'
is not working without extra JS
that is bug
from flask-ckeditor.
Do you notice the "And" in my last comment? As I said, ckeditor.config(name='the_name')
will generate the JS code, so you have to call it to make the configuration work.
from flask-ckeditor.
Nope, I have tried that too and other combinations too.. but not working without extra JS
from flask-ckeditor.
You have to pass the correct name value.
from flask-ckeditor.
all my textareas has ckeditor class
from flask-ckeditor.
Could you please provide the complete code of your template file?
from flask-ckeditor.
csrf = CSRFProtect(app)
csrf.init_app(app)
ckeditor = CKEditor(app)
app.config['CKEDITOR_SERVE_LOCAL'] = False
app.config['CKEDITOR_HEIGHT'] = 400
app.config['CKEDITOR_PKG_TYPE'] = 'full'
app.config['CKEDITOR_EXTRA_PLUGINS'] = ['filebrowser']
app.config['CKEDITOR_FILE_UPLOADER'] = '/upload'
app.config['UPLOADED_PATH'] = os.path.join(basedir, 'uploads')
@app.route('/files/<filename>')
@csrf.exempt
def uploaded_files(filename):
path = app.config['UPLOADED_PATH']
return send_from_directory(path, filename)
import uuid
@app.route('/upload', methods=['POST'])
@csrf.exempt
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!')
unique_filename = str(uuid.uuid4())
f.filename = unique_filename + '.' + extension
f.save(os.path.join(app.config['UPLOADED_PATH'], f.filename))
url = url_for('uploaded_files', filename=f.filename)
return upload_success(url=url)
{% block tail %}
{{ super() }}
{{ ckeditor.load() }}
{{ ckeditor.config(name='ckeditor') }}
<script>
CKEDITOR.config.filebrowserUploadUrl = '/st/upload';
CKEDITOR.config.filebrowserBrowseUrl = '/static/filemanager/index.html';
</script>
{% endblock %}
from flask-ckeditor.
Where are the codes that create <textarea>
element for CKEditor?
from flask-ckeditor.
@greyli
even only {{ ckeditor.load() }} creates the editor for textarea.
from flask-ckeditor.
ckeditor.load()
will output <script src="https://cdn.ckeditor.com/ckeditor.min.js"></script>
in template, it will not create CKEditor <textarea>
.
from flask-ckeditor.
class TestAdminView(ModelView):
form_overrides = dict(text=CKEditorField)
can_view_details = True
create_template = 'edit.html'
edit_template = 'edit.html'
In flask admin I am overriding textarea field
without this
{{ ckeditor.config(name='ckeditor') }}
has error
from flask-ckeditor.
@greyli OK! you are right but it was field name and I was always using ckeditor with class name (other flask documentations and tutorials are creating ckeditor for textarea with class name). so now it is working but can you also implement it with class name ?
In addition is there any other plugin to for responsive images ?
So in conclusion
In flask admin everything is almost same
from flask-ckeditor.
So Without class I can not always tell to config what is the name of field because my field names will be different.
from flask-ckeditor.
What do you mean? Do you have multiple CKEditor texterea fields?
from flask-ckeditor.
Yes, I have many models and with textareas and their names are different always, for example I may have list of textareas with names title_ka title_en title_ru so telling config these names is not convenient way
from flask-ckeditor.
Call ckeditor.config()
for every fields, for example:
{{ ckeditor.config(name='title_ka') }}
{{ ckeditor.config(name='title_ru') }}
{{ ckeditor.config(name='title_en') }}
from flask-ckeditor.
Yes that is right but it is not generic I may ask ckeditor dev to create ckeditor with class
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.