First, install ckeditor (put the ckeditor inside a js/ckeditor file in your static folder and include it) :
<script type="text/javascript" src="{{=URL(request.application,'static','js/ckeditor/ckeditor.js')}}"></script>
After that, we define a ‘body’ text field (or whatever name you like):
db.define_table('page',
# more Fields …
Field('body', 'text'))
Then, inside your db.py (or to another file in your models directory) put the widget:
def advanced_editor(field, value):
return TEXTAREA(_id = str(field).replace('.','_'), _name=field.name, _class='text ckeditor', value=value, _cols=80, _rows=10)
and use the widget
db.page.body.widget = advanced_editor
From now, SQLFORM will use ckeditor to show/edit/save data!
Update: After a lot of request, I am updating this slice so you can also upload files via ckeditor! Also, I a quotes bug (due to a copy-paste from my blog) was fixed. What it needs to be done in order to have ckeditor uploading works. First, it needs a "file browser" url. That's just a form with an upload field where we can use to find and upload files. The think is that we must return the path of the uploaded file BACK to the parent form. The most difficult part is activating the Upload button. That is done by specifying the "filebrowserBrowseUrl". So, here it goes!
Let's add a new table that will hold our files:
import datetime;
timestamp = datetime.datetime.today()
db.define_table('files',
Field('title', 'string'),
Field('uploaded_data', 'upload'),
Field('created_on','datetime',default=timestamp))
db.files.title.requires = IS_NOT_EMPTY()
db.files.uploaded_data.requires = IS_NOT_EMPTY()
Now, lets add an action the our controller
def upload_file():
url = ""
form = SQLFORM(db.files, showid=False)
if form.accepts(request.vars, session):
response.flash = T('File uploaded successfully!')
url = URL(r=request, f="download", args = db(db.files.title == request.vars.title).select(orderby=~db.files.created_on)[0].uploaded_data)
return dict(form=form, cknum=request.vars.CKEditorFuncNum, url=url)
and a view upload_file.html:
{{extend 'layout.html'}}
<h2>Upload file</h2>
{{=form}}
{{ if url != "": }}
<script type="text/javascript">
window.opener.CKEDITOR.tools.callFunction({{=cknum}}, '{{=url}}');
</script>
{{ pass }}
Then, lets add the javascript files to our layout AFTER web2py_ajax.html:
<script type="text/javascript" src="{{=URL(request.application,'static','js/ckeditor/ckeditor.js')}}"></script>
Finally, lets create a test page:
{{extend 'layout.html'}}
{{=form}}
<script type="text/javascript">
var ckeditor = CKEDITOR.replace('page_body', {
filebrowserBrowseUrl : "{{=URL(request.application, c='default', f='upload_file')}}",
//filebrowserUploadUrl : "{{=URL(request.application, c='default', f='upload_file')}}",
});
</script>
We are ready!
Comments (9)
- Login to post
order by: newest oldest upvoted downvoted
Once I switched out the single quotes and reverse quotes the example works great.
Jon - would be great to also how to handled file/image upload with CKEditor - cheers!
Jon- many thanks for this
Many thanks Jon, this is a really helpful and easy to implement slice.
Note: I think, there is already an internal File Table in web2py (for all uploaded files) which maybe you could use to not implement the table yourself...
First part of this slice works for me. Afterwards, I tried to use tinymce instead of ckeditor. TinyMce editor is displayed instead of the textarea, but the text typed is not saved into the database, just empty value. What could be the reason for that?
show more comments0
villas 15 years ago
0
darcy 15 years ago
0
darcy 15 years ago
0
aleksdj 15 years ago
0
jumi 14 years ago