KindEditor簡介:
KindEditor是一套開源的在線HTML編輯器,主要用于讓用戶在網站上獲得所見即所得編輯效果,開發人員可以用KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。
KindEditor使用JavaScript編寫,可以無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。
在Django Admin當中加入KindEditor,這比干巴巴的textarea好多了。加入之后的效果如下:
1、設置static文件路徑
KindEditor是用JavaScript編寫的,這屬于static files,因此需要為Django設置static路徑。
首先在工程目錄下新建static文件夾,這里要注意的是千萬不要在my_app/下創建static文件夾作為static文件存放的目錄, 這會導致Django無法搜索到自己的static 文件。
創建后好,在settings中配置static文件目錄。添加以下代碼
1
2
3
4
|
STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static' ), ) |
2、下載KindEditor
下載KindEditor, 解壓后將那些沒用的asp, asp.NET, php, jsp, examples文件該刪掉后拷貝到static目錄下,由于KindEditor是js文件有事編輯器,所以就設置了js/editor目錄,并將KindEditor代碼拷貝到該目錄下。
就像這樣子static/js/editor/kindeditor-4.1.7
3、在admin后臺管理當中的html頁面加入JavaScript代碼
在kindeditor-4.1.7目錄下新建config.js文件,內容如下:
1
2
3
4
5
6
7
|
KindEditor.ready( function (K) { window.editor = K.create( '#id_content' ,{ // 指定大小 width: '800px' , height: '200px' , }); }); |
4、在admin.py中的的管理類中添加class Media,引入js文件
這里是一個完整的admin.py示例
備注:class 一定要在admin.site.register前面,不然程序會報錯,顯示沒有define
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
from django.contrib import admin from .models import category,tags,article # Register your models here. class articleAdmin(admin.ModelAdmin): list_display = ( 'id' , 'title' , 'create_time' , 'change_time' , 'type' ) #添加字段顯示 search_fields = ( 'title' ) #添加快速查詢欄 class Media: # 在管理后臺的HTML文件中加入js文件, 每一個路徑都會追加STATIC_URL/ js = ( '/static/js/editor/kindeditor-4.1.7/kindeditor-all.js' , '/static/js/editor/kindeditor-4.1.7/lang/zh_CN.js' , '/static/js/editor/kindeditor-4.1.7/config.js' , ) admin.site.register(category) admin.site.register(tags) admin.site.register(article,articleAdmin) |
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對服務器之家的支持。如果你想了解更多相關內容請查看下面相關鏈接
原文鏈接:https://blog.csdn.net/jueyings/article/details/70332429