web2py 编辑器改造

论坛 期权论坛 脚本     
匿名技术用户   2020-12-29 14:53   34   0

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>


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







分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP