If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

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):

    # 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()
                    Field('title', 'string'),
                    Field('uploaded_data', 'upload'),

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>

{{ if url != "": }}
<script type="text/javascript">
  window.opener.CKEDITOR.tools.callFunction({{=cknum}}, '{{=url}}');
{{ 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'}}


<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')}}",

We are ready!

Related slices

Comments (9)

  • Login to post

  • 0
    tim-richardson 7 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.

    db.page.body.widget = advanced_editor



  • 0
    rosspeoples 9 years ago
    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

  • 0
    chrismay77 10 years ago
    I can seem to get the test page working...

  • 0
    rth 10 years ago
    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?

  • 0
    jumi 11 years ago
    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 comments

Hosting graciously provided by:
Python Anywhere