Blog·Tanky WooABOUTRSS

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

25 May 2012
这篇博客是从旧博客 WordPress 迁移过来,内容可能存在转换异常。

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](http://wutianqi-blog.b0.upaiyun.com/2012/05/tinymce1_thumb.png)](http://wutianqi-blog.b0.upaiyun.com/2012/05/tinymce1.png)


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

> > (r'^media/(?P.*)$', '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,不过我没有试,有时间也可以考虑去用下。

参考文章: