web2py 编辑器改造

Web2Py 是一个Python的Web框架。在默认情况下，Web2Py提供的编辑器只支持文本编辑。如下图：

在Essay Content编辑框中是不可以插入图片的，所有HTML标签都以文本方式显示。

我们可以通过指定编辑框的Widget，来让它成为一个所见即所得的富文本编辑框(WYSIWYG)。这里，我们选择CKEditor作为编辑器。

第一步：下载CKEditor编辑器：

http://ckeditor.com/

第二步：拷贝

将解压后的CKEditor编辑器拷贝到static/js目录下，如下图：

第三步：修改db.py文件：

加入以下方法:

def advanced_editor(field, value):
    return TEXTAREA(_id = str(field).replace('.','_'), 
                    _name=field.name, _class='text ckeditor', 
                    value=value, _cols=80, _rows=10)

指定编辑器：

db.define_table('essay',
                Field('title',type='string',length=40,requires=IS_NOT_EMPTY()),
                Field('essay_content',type='text',widget=advanced_editor),
                #Field('essay_owner',type='reference auth_user'),
                Field('commit_time',type='datetime',
                      default=datetime.datetime.now,
                      readable=False,writable=False),
                Field('essay_sort',type='reference essay_sort',writable=False))

修改default.py文件，加入：

def publish():
    """
    发布文章
    """
    if len(request.args) != 0:
        id = request.args[0]
        if id.isdigit():
            rows = db(db.essay_sort.id == id).select(db.essay_sort.name)
            if len(rows) == 0:
                redirect(URL('index'))
            else:
                db.essay.essay_sort.default = id
                edit_form = crud.create(db.essay,next=URL('index',args=id))
                    
        else:
            redirect(URL('index'))    
    
    return dict(edit_form=edit_form)

这个时候访问publish页面，默认的文档编辑器被替换成CKEditor:

但是，有点美中不足，在编辑器中插入图片等文件比较麻烦。

第四步：

修改default.py文件，加入如下方法：

def upload_file():
    url = ""

    form = SQLFORM(db.upload_file, showid=False)
    if form.accepts(request.vars, session):
        
        response.flash = T('File uploaded successfully!')
        url = URL(r=request, f="download", 
                  args = db(db.upload_file.title == request.vars.title).select(orderby=~db.upload_file.commit_time)[0].upload_file)
    return dict(form=form, cknum=request.vars.CKEditorFuncNum, url=url)

增加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 }}

修改publish.html文件：

<script type="text/javascript" src="{{=URL(request.application,'static','js/ckeditor/ckeditor.js')}}"></script> 
{{left_sidebar_enabled,right_sidebar_enabled=False,('message' in globals())}}
{{extend 'layout.html'}}

{{=edit_form}}


<script type="text/javascript">
  var ckeditor = CKEDITOR.replace('essay_essay_content', {
  filebrowserBrowseUrl : "{{=URL(request.application, c='default', f='upload_file')}}",
  //filebrowserUploadUrl : "{{=URL(request.application, c='default', f='upload_file')}}",
});
</script>

这时，点击图像按键，可以看到如下结果：