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
I have used this slice, along with other information to create plugin_ckeditor which can be used as a FORM widget, and also supports edit in place. Feel free to check it out: https://bitbucket.org/PhreeStyle/web2py_ckeditor
I can seem to get the test page working...
Works great, thanks. However I had to replace 'page_body' by 'content' to make it work. Well, now that I think about it, maybe it's obvious that this parameter has to be personalised... isn't it possible to remove a comment once it is posted on web2pyslices.com?
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
tim-richardson 10 years ago
You may also want to do this in db.py to get web2py to minify the static files. The ckeditor js is large:
response.optimize_css = 'concat,minify,inline'
response.optimize_js = 'concat,minify,inline'
Also note that when you add the widget to the table, you will reference the table.
If you have lazy_tables (and you should), then the line below should not go in a model because it will reference the table at every request, destroying the lazy_table advantage. Instead, put this is the controller function.
0
rosspeoples 13 years ago
0
chrismay77 13 years ago
0
rth 14 years ago
0
jumi 14 years ago