Spiga

Django轻松使用富文本编辑器-KindEditor

2010-12-16 10:44 by 码农.KEN, 2330 visits, 收藏, 编辑

由于需要在django admin中使用到富文本编辑器,由于我比较喜欢KindEditor,于是写了个自定义widget

 

1、首先从KindEditor主页下载,并解压至你的static文件存放目录(略...)

 

2、编写自定义widget: 

 

from django import forms

from django.conf import settings 

class KindEditor(forms.Textarea):

class Media:

js = (settings.MEDIA_URL + 'js/widgets/kindeditor.js',)

css = (settings.MEDIA_URL + 'js/widgets/kindeditor.css',)

def __init__(self, attrs = {}):

attrs['rel'] = 'kind'

super(KindEditor, self).__init__(attrs) 

 

 

3、在form中使用上面的widget:

from customwidget.editor import KindEditor
from django import forms
from app.models import MyModel
from django.contrib import admin

class MyModelAdminForm(forms.ModelForm):
        
pass
        
        
class Meta:
              model 
= MyModel
 
     widgets = {

  'fieldname':KindEditor()

              }

class MyModelAdmin(admin.ModelAdmin):

         form = MyModelAdminForm

admin.site.register(MyModel, MyModelAdmin) 

 

 

4、需要在模板中使用JS来初始化KindEditor(请确保你的模板中已加载jQuery, django admin中已自带,不过namespace换到了django之下):

{%extends "admin/change_form.html"%}
{%block extrahead%}
    {{block.super}}
     
<script type="text/javascript">
           django.jQuery(document).ready(
function(){
                django.jQuery(
"textarea[rel='kind']").each(function(n){
                          KE.show({
                               id : django.jQuery(
this).attr("id"),
                          });
                });
           });
      
</script>
{%endblock%}

  4、需要注意的地方:

  a) 所下载的kindeditor文件包存放的位置及settings里的MEDIA_URL地址(其实就是保证最终生成的JS和CSS访问路径是正确的)

  b) 若非django admin的模板,请自行加载jQuery

Add your comment

5 条回复

  1. #1楼 大气象      2010-12-16 11:08
    谢谢,很有用。
     回复 引用 查看   
  2. #2楼 小狼壮壮      2010-12-16 12:47
    这个有汉化文件么。

    我现在django中 用的是咱们国产的xheditor 挺不错的。 UI看着要比这个顺眼一些。
     回复 引用 查看   
  3. #3楼 zqonline      2010-12-16 13:56
    有没有winform下的?我用webbrower弄的,不好用。
     回复 引用 查看   
  4. #4楼 zjianjun/Andy      2010-12-16 15:59
    大哥刚接手一个项目二次开发,有你的JS代码啊
     回复 引用 查看   
  5. #5楼[楼主] 码农.KEN      2010-12-16 16:14
    @zjianjun/Andy
    这么巧,神马项目啊。。。
     回复 引用 查看