Django后台整合TinyMCE富文本编辑器

TinyMCE是一个强大的WYSIWYG(所见即所得)编辑器。官方给出的介绍:

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB.

TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

 

 

首先到官网下载最近版的TinyMCE,解压后,取其中的放在mymedia/js下,然后新建一个textareas.js作为配置文件:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced"
});
具体的目录结构可以见截图:
tinymce1
 
 

然后,在urls.py中的urlpatterns,加一个url即可:

(r’^media/(?P<path>.*)$’, ‘django.views.static.serve’, {‘document_root’: ‘weblog/mymedia’, ‘show_indexes’: True}),

这样,就可以通过网址: http://127.0.0.1:8000/media/  看到。

 

最后,如果想让某个model类的TextField(即HTML中的textarea)变为TinyMCE,则可以如下:

比如我的models.py有一个Post类表示文章类容,然后在admin.py下有一个PostAdmin类用于传递一些admin的自定义(通过admin.site.register)

 

把一下代码作为嵌套类添加到PostAdmin中:

class Media:
    js = (
          ‘/media/js/tiny_mce/tiny_mce.js’,
          ‘/media/js/textareas.js’,
     )

这样,就可以看到后台Post的textarea区域有了变化,具体的一些配置信息,可以去TinyMCE官网看。

 

PS:我在整合TinyMCE上花了2,3个小时,原因就是官方trac上的介绍:Django AddWYSIWYGEditor TinyMCE 以及网上其他朋友的介绍,都是在Post类中,直接添加嵌套类:

class Admin:
    js = (
          ‘/media/js/tiny_mce/tiny_mce.js’,
          ‘/media/js/textareas.js’,
     )

 

但是我这边测试不成功,具体原因可能是trac上说的oldform和newform的问题。

 

网上还有现成的django-tinymce app,不过我没有试,有时间也可以考虑去用下。

 

参考文章:

发布者

Tanky Woo

Tanky Woo,[个人主页:https://tankywoo.com] / [新博客:https://blog.tankywoo.com]

《Django后台整合TinyMCE富文本编辑器》有5个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注