环境
- Ubuntu 12.04(好像没太大关系)
- Django 1.6
- kindeditor 4.1.10
Steps
- 下载kind的压缩包,解压,我将其文件夹直接改名为 kindeditor
- 将刚解压的kindeditor目录放在你的static目录下,我的目录结构如下:
- 在你的模板目录下增加一个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的路径是否正确。
- 最后你会发现,html格式都被自动转意了,这是Django模板的安全机制,只消在你的模板里添加一个管道safe:{{content|safe}}
这里并没有解决上传图片和文件,再说再说……很晚了,该睡了……
参考: