django 整合 kindeditor

1 修改：


Django settings.py


STATICFILES_DIRS = (
    ("css", os.path.join(PROJECT_PATH, 'static/css')),
    ("img", os.path.join(PROJECT_PATH, 'static/img')),
    ("js", os.path.join(PROJECT_PATH, 'static/js')),
    ("editor", os.path.join(PROJECT_PATH, 'static/editor')),
)

2 下载kindeditor ,然后把文件放进 /static/里。如下：


ubuntu@yee:~/ndis/static$ tree -L 2
.
├── css
│   └── style.css
├── editor
│   └── kindeditor #把下载的kindeditor放进去。
├── img
└── jsubuntu@yee:~/ndis/static/editor/kindeditor$ ls
kindeditor-all.js      kindeditor.js      lang       themes
kindeditor-all-min.js  kindeditor-min.js  plugins3 在项目目录下创建  rte


ubuntu@yee:~/ndis/rte$ tree
.
├── __init__.py
├── __init__.pyc
├── kindeditor
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── widgets.py 
│   └── widgets.pyc
├── models.py
├── tests.py
└── views.py4 编写 rte/kindeditor/widgets.py


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.STATIC_URL + 'editor/kindeditor/themes/default/default.css', 
                        settings.STATIC_URL + 'editor/kindeditor/plugins/code/prettify.js',), 
        } 
        js  = ( 
                "%seditor/kindeditor/kindeditor.js" % settings.STATIC_URL, 
                settings.STATIC_URL + 'editor/kindeditor/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, 
            'STATIC_URL':settings.STATIC_URL, 
        }
        return rendered  + mark_safe(render_to_string('editor/kindeditor.html', context))5  editor/kindeditor.html


<script type="text/javascript">
    var editor ; //定义为全局变量，这点很重要
    KindEditor.ready(function(K) { 
        var options = { 
            cssPath : ('{{STATIC_URL}}editor/kindeditor/themes/default/default.css', 
                       '{{STATIC_URL}}editor/kindeditor/plugins/code/prettify.css'),
            width : '680px', 
            height : '400px', 
            filterMode : true 
       }; 
        editor = K.create('textarea[name="content"]', options); 
    });                     
</script>  

6 forms.py

from rte.kindeditor.widgets import KindEditor

content = forms.CharField( widget=KindEditor(attrs={'rows':15, 'cols':100}))7 引入 js 文件

<script charset="utf-8" src="{{ STATIC_URL }}editor/kindeditor/kindeditor.js"></script> 如果你用的是ajax来提交数据，要如下 ：

$("#post_answer_form").submit(function(){
            editor.sync(); //仔细看kindeditor文档 ，上面说明了默认在遇到 onsubmit事件时，会将iframe中的数据传输到你的textarea中，所以我们想要获取数据之前，最好是手工同步一下。我就遇到这个问题，需要提交两次才能拿到数据 。
            var data = $(this).serialize();