All Articles

Django1.8后台+kindeditor

环境

  • Ubuntu 12.04(好像没太大关系)
  • Django 1.6
  • kindeditor 4.1.10

Steps

  • 下载kind的压缩包,解压,我将其文件夹直接改名为 kindeditor
  • 将刚解压的kindeditor目录放在你的static目录下,我的目录结构如下:

kindtree

  • 在你的模板目录下增加一个kindeditor.html文件,用来被其他页面调用:
  • kindeditor.html:(内容其实就是sample/default.html)
var editor;

KindEditor.ready(function(K) {
    editor = K.create('textarea[name="content"]', {
        allowFileManager : true
    });
    K('input[name=getHtml]').click(function(e) {
        alert(editor.html());
    });
    K('input[name=isEmpty]').click(function(e) {
        alert(editor.isEmpty());
    });
    K('input[name=getText]').click(function(e) {
        alert(editor.text());
    });
    K('input[name=selectedHtml]').click(function(e) {
        alert(editor.selectedHtml());
    });
    K('input[name=setHtml]').click(function(e) {
        editor.html('<h3>Hello KindEditor</h3>');
    });
    K('input[name=setText]').click(function(e) {
        editor.text('<h3>Hello KindEditor</h3>');
    });
    K('input[name=insertHtml]').click(function(e) {
        editor.insertHtml('<strong>插入HTML</strong>');
    });
    K('input[name=appendHtml]').click(function(e) {
        editor.appendHtml('<strong>添加HTML</strong>');
    });
    K('input[name=clear]').click(function(e) {
        editor.html('');
    });
});
  • 在你的主项目目录(就是settings的同级目录)下增加一个widgets.py,主要处理用kindeditor.html的内容替换其他模板的textarea,并加载js和css,其中的STATIC_URL是在settings.py中设置的静态文件目录路径,我这里是/static/,如果这个还不清楚只能去继续学习Django先~。
  • 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

class KindEditor(forms.Textarea):

    class Media:

        js  = (

                settings.STATIC_URL + 'kindeditor/kindeditor.js' ,

                settings.STATIC_URL + '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)

        return rendered  + mark_safe(render_to_string('kindeditor.html'))
  • 最后一步,也是关键一步。上面已经有了用来替换textarea的模板和函数。接下来就是怎么应用到系统中了。在APP中通过注册模型就可以实现(也就是说只能针对某个模型为它绑定kindeditor,如果要所有的textarea都能替换怕是得修改admin的模板了)。修改APP中负责注册模型的admin.py如下,这里我只在Blog模型绑定kind:
  • admin.py:
from django.contrib import admin

from weblog.models import * #这是我的模型文件,里面有个Blog

from django import forms  

from django.utils.translation import ugettext_lazy

from MyWebsite.widgets import KindEditor #引用widgets中的方法

class BlogAdminForm(forms.ModelForm):  

    content   = forms.CharField(label=ugettext_lazy(u"content"),
     widget=KindEditor(attrs={'rows':15, 'cols':100}),required=True)            

    class Meta:  

        model = Blog  
        fields = "__all__" 

class BlogAdmin(admin.ModelAdmin):

    #这可以添加你的其他设置

    form = BlogAdminForm

admin.site.register(Blog,BlogAdmin)
  • 其实到这里就完成了,你会看到后台Blog的编辑界面如下,如果不是那就得检查一下你的路径是否和代码中的一致,引用import的路径是否正确。

kind1

  • 最后你会发现,html格式都被自动转意了,这是Django模板的安全机制,只消在你的模板里添加一个管道safe:{{content|safe}}

kind2

这里并没有解决上传图片和文件,再说再说……很晚了,该睡了……

参考: