Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .

首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317

这篇文章中的做法就是一种较为通用的做法.

现在按照这种做法来把 KindEditor 集成到django项目中使用:

1. 代码的组织

在项目根目录下,使用manage.py startapp rte 新建一个文件夹,叫做rte,意思是RichTextEditor的缩写.然后在rte目录下新建kindeditor文件夹,如果你想用NicEditor就新建一个niceditor,可能还有xheditor等等.每个下面放一个__init__.py表明他们是可以被导入的模块.

目录结构就是这样:

[html] view plain copy print ?

1. rte/  
2.   
3. │  models.py  
4. │  tests.py  
5. │  views.py  
6. │  __init__.py  
7. │  __init__.pyc  
8. │  
9. ├─kindeditor  
10. │      widgets.py  
11. │      widgets.pyc  
12. │      __init__.py  
13. │      __init__.pyc  
14. │  
15. └─niceditor  
16.         widgets.py  
17.         widgets.pyc  
18.         __init__.py  
19.         __init__.pyc  

rte/ │ models.py │ tests.py │ views.py │ __init__.py │ __init__.pyc │ ├─kindeditor │ widgets.py │ widgets.pyc │ __init__.py │ __init__.pyc │ └─niceditor widgets.py widgets.pyc __init__.py __init__.pyc

还有就是模板的放置,我的做法是放在templates下

[html] view plain copy print ?

1. templates  
2. |-- editor  
3. |    kindeditor.html  
4. |    niceditor.html  
5. |    xheditor.html  

templates |-- editor | kindeditor.html | niceditor.html | xheditor.html

等等诸如此类

2.自定义widget

就是建立一个KindEditor类，继承于Textarea（forms.Textarea),代码如下：
文件名称:rte/kindeditor/widgets.py

内容:

[python] view plain copy print ?

1. from django import forms  
2. from django.conf import settings  
3. from django.utils.safestring import mark_safe  
4. from django.template.loader import render_to_string  
5. from django.template import RequestContext  
6. from django.utils.translation import ugettext_lazy as _  
7.   
8. class KindEditor(forms.Textarea):  
9.   
10.     class Media:  
11.         css = {  
12.               'all': (  settings.MEDIA_URL + 'editor/kindeditor-4.0.1/themes/default/default.css',  
13.                         settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js',),  
14.         }  
15.         js  = (  
16.                 "%seditor/kindeditor-4.0.1/kindeditor.js" % settings.MEDIA_URL,  
17.                 settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js',  
18.         )  
19.   
20.     def __init__(self, attrs = {}):  
21.         #attrs['style'] = "width:800px;height:400px;visibility:hidden;"   
22.         super(KindEditor, self).__init__(attrs)  
23.   
24.     def render(self, name, value, attrs=None):  
25.         rendered = super(KindEditor, self).render(name, value, attrs)  
26.         context = {  
27.             'name': name,  
28.             'MEDIA_URL':settings.MEDIA_URL,  
29.         }  
30.         return rendered  + mark_safe(render_to_string('editor/kindeditor.html', context))  

from django import forms from django.conf import settings from django.utils.safestring import mark_safe from django.template.loader import render_to_string from django.template import RequestContext from django.utils.translation import ugettext_lazy as _ class KindEditor(forms.Textarea): class Media: css = { 'all': ( settings.MEDIA_URL + 'editor/kindeditor-4.0.1/themes/default/default.css', settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js',), } js = ( "%seditor/kindeditor-4.0.1/kindeditor.js" % settings.MEDIA_URL, settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js', ) def __init__(self, attrs = {}): #attrs['style'] = "width:800px;height:400px;visibility:hidden;" super(KindEditor, self).__init__(attrs) def render(self, name, value, attrs=None): rendered = super(KindEditor, self).render(name, value, attrs) context = { 'name': name, 'MEDIA_URL':settings.MEDIA_URL, } return rendered + mark_safe(render_to_string('editor/kindeditor.html', context))

以上的KindEditor版本,我用的是当前最新的4.0.1的版本.

3.'editor/kindeditor.html'这个模板的内容:

主要内容还是像最上面介绍的那篇文章中一样,只是一点js代码,用来把textarea转成一个在线html编辑器.使用的就是KindEditor的功能,主要内容如下:

[javascript] view plain copy print ?

1. <script type="text/javascript">  
2. KindEditor.ready(function(K) {  
3.     var options = {  
4.         cssPath : ('{{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css',  
5.                     '{{MEDIA_URL}}editor/kindeditor-4.0.1//plugins/code/prettify.css')  
6.         width : '680px',  
7.         height : '400px',  
8.         filterMode : true  
9.     };  
10.     var editor = K.create('textarea[name="content"]', options);  
11. });                      
12. </script>  

<script type="text/javascript"> KindEditor.ready(function(K) { var options = { cssPath : ('{​{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css', '{​{MEDIA_URL}}editor/kindeditor-4.0.1//plugins/code/prettify.css') width : '680px', height : '400px', filterMode : true }; var editor = K.create('textarea[name="content"]', options); }); </script>

注意,一定要使用KindEditor这个变量来初始化富文本编辑器,Kindeditor官方网站上有的文档没有及时更新,如果使用什么KE.show的,或者大写K的,都不要用,chrome下调试就会提示KE未定义,K未定义等等.以上options中的内容请参考KindEditor的官方文档,这些东西也可以在widgets.py中预先定义好,但是我觉得不如在模板文件中定义方便.

4.在某个app的forms.py中定义一个form,不管前台后台都能用:

文件名示例:ddtcms\blog\forms.py

文件内容:

[python] view plain copy print ?

1. from django import forms  
2. from django.utils.translation import ugettext_lazy as _  
3.   
4. from ddtcms.blog.models import Blog  
5. from rte.kindeditor.widgets import KindEditor  
6.   
7. class MyBlogAdminForm(forms.ModelForm):  
8.     content   = forms.CharField(label=_(u"Content"), widget=KindEditor(attrs={'rows':15, 'cols':100}),required=True)            
9.     class Meta:  
10.         model = Blog  

from django import forms from django.utils.translation import ugettext_lazy as _ from ddtcms.blog.models import Blog from rte.kindeditor.widgets import KindEditor class MyBlogAdminForm(forms.ModelForm): content = forms.CharField(label=_(u"Content"), widget=KindEditor(attrs={'rows':15, 'cols':100}),required=True) class Meta: model = Blog

这个一定要使用forms.ModelForm,这样才能在admin中和view中使用,如果只是是在view中使用,这可以不用forms.ModelForm.

 

其他app的forms.py中要使用KindEditor的地方都是按照上面第4条说的弄.东西到这里基本上结束了,是不是很方便?

像xheditor,wymeditor等等都可以像这样弄,大家可以自己试试.方法就按本文介绍的来.

 

附:码农Ken写了一篇"Django轻松使用富文本编辑器-KindEditor": http://www.cnblogs.com/ken-zhang/archive/2010/12/16/django_widget_kindeditor.html

这篇文章的问题主要是:

1.kindeditor升级了,他的还没动,所以直接复制使用会发现KE未定义.

2.问题就出在js和模板继承上.

那个文章要修改的地方有:js部分,因为KE好像在4.0.1版本中未定义,需要这样用了:

[javascript] view plain copy print ?

1. <script type="text/javascript">  
2. KindEditor.ready(function(K) {  
3. var options = {  
4.     cssPath : ('{{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css',  
5.                 '{{MEDIA_URL}}editor/kindeditor-4.0.1/plugins/code/prettify.css')  
6.     width : '680px',  
7.     height : '400px',  
8.     filterMode : true  
9. };  
10. var editor = K.create('textarea[name="content"]', options);  
11. });                      
12. </script>  

<script type="text/javascript"> KindEditor.ready(function(K) { var options = { cssPath : ('{​{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css', '{​{MEDIA_URL}}editor/kindeditor-4.0.1/plugins/code/prettify.css') width : '680px', height : '400px', filterMode : true }; var editor = K.create('textarea[name="content"]', options); }); </script>

因为要使用code语法高亮,kindeditor使用的是prettyprint这个模块,所以这里加了prettify.css
-------------
还有那个模板,继承自admin/change_form.html
会导致一种错误,Caught KeyError while rendering: 'opts' in admin interface.
这个问题在StackOverflow也有人问起: http://stackoverflow.com/questions/7377324/caught-keyerror-while-rendering-opts-in-admin-interface
 但是解答不一定能让人满意,把那个模板放到{%block content%}中或许不报错,但是界面就乱了.

本来我是打算按照码农的文章中的方法来把KindEditor应用到我的django项目中的,不过调试了几个小时之后,没有成功.
我最后是按照上面写的老方法重新改写了widgets,还是像我以前封装niceditor那样,widget自己render.

正所谓,老方法造新篇,老经验解新难题!!!

各位看官,请多提意见!