軟件環(huán)境:Python 3.4.3+Django 1.8.4+KindEditor 4.1.7
1. kindeditor簡介:
KindEditor 是一套開源的在線HTML編輯器炕檩,主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果斗蒋,開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫,可以無縫地與 Java泉沾、.NET骤星、PHP、ASP 等程序集成爆哑,比較適合在 CMS、商城舆吮、論壇揭朝、博客、Wiki色冀、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用潭袱。
2.在Django Admin當(dāng)中加入KindEditor
加入之后的效果如下,這比干巴巴的textarea好多了锋恬。
2.1. 設(shè)置static文件路徑
KindEditor是用JavaScript編寫的屯换,這屬于static files,因此需要為Django設(shè)置static路徑与学。 首先在工程目錄下新建static文件夾彤悔,這里要注意的是千萬不要在my_app/下創(chuàng)建static文件夾作為static文件存放的目錄, 這會導(dǎo)致Django無法搜索到自己的static 文件。創(chuàng)建后好索守,在settings中配置static文件目錄晕窑。添加以下代碼
# 指定在模板中添加static文件的猴子
STATIC_URL = '/static/'
# 指定靜態(tài)文件夾所在的路徑
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
2.2. 下載KindEditor
下載KindEditor, 解壓后將那些沒用的asp, asp.net, php, jsp, examples文件該刪掉后拷貝到static目錄下,由于KindEditor是js文件有事編輯器卵佛,所以就設(shè)置了js/editor目錄杨赤,并將KindEditor代碼拷貝到該目錄下。就像這樣子static/js/editor/kindeditor-4.1.7截汪。
2.3. 在文本輸入域的html中添加運行KindEditor 相對應(yīng)的JavarScript
在官網(wǎng)的使用說明上可以看到
現(xiàn)在的問題是怎么在admin后臺管理當(dāng)中的html頁面加入JavaScript代碼疾牲,答案就是在admin.py中的的管理類中添加class Media,引入js文件衙解。創(chuàng)建kindeditor的阳柔,在kindeditor-4.1.7目錄下創(chuàng)建出config.js文件。textarea的id登陸admin后蚓峦,查看元素即可獲取盔沫。
//config.js
KindEditor.ready(function(K) {
window.editor = K.create('#id_content',{
// 指定大小
width:'800px',
height:'200px',
});
});
#admin.py
from django.contrib import admin
from kindeditor.models import Article
# Register your models here.
@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
list_display = ('title',)
class Media:
# 在管理后臺的HTML文件中加入js文件, 每一個路徑都會追加STATIC_URL/
js = (
'js/editor/kindeditor-4.1.7/kindeditor-all.js',
'js/editor/kindeditor-4.1.7/lang.zh_CN.js',
'js/editor/kindeditor-4.1.7/config.js',
)