Django添加KindEditor富文本編輯器的使用
KindEditor簡介：
KindEditor是一套開源的在線HTML編輯器，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果，開發(fā)人員可以用KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。
KindEditor使用JavaScript編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。
在Django Admin當(dāng)中加入KindEditor，這比干巴巴的textarea好多了。加入之后的效果如下：
1、設(shè)置static文件路徑
KindEditor是用JavaScript編寫的，這屬于static files，因此需要為Django設(shè)置static路徑。
首先在工程目錄下新建static文件夾，這里要注意的是千萬不要在my_app/下創(chuàng)建static文件夾作為static文件存放的目錄, 這會(huì)導(dǎo)致Django無法搜索到自己的static 文件。
創(chuàng)建后好，在settings中配置static文件目錄。添加以下代碼
STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )
2、下載KindEditor
下載KindEditor, 解壓后將那些沒用的asp, asp.NET, php, jsp, examples文件該刪掉后拷貝到static目錄下，由于KindEditor是js文件有事編輯器，所以就設(shè)置了js/editor目錄，并將KindEditor代碼拷貝到該目錄下。
就像這樣子static/js/editor/kindeditor-4.1.7
3、在admin后臺(tái)管理當(dāng)中的html頁面加入JavaScript代碼
在kindeditor-4.1.7目錄下新建config.js文件，內(nèi)容如下：
KindEditor.ready(function(K) {
window.editor = K.create('#id_content',{
// 指定大小
width:'800px',
height:'200px',
});
});
4、在admin.py中的的管理類中添加class Media，引入js文件
這里是一個(gè)完整的admin.py示例
備注：class 一定要在admin.site.register前面，不然程序會(huì)報(bào)錯(cuò)，顯示沒有define
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:
# 在管理后臺(tái)的HTML文件中加入js文件, 每一個(gè)路徑都會(huì)追加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)
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
基于Keras中Conv1D和Conv2D的區(qū)別說明
這篇文章主要介紹了基于Keras中Conv1D和Conv2D的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-06-06
這篇文章主要介紹了Python?避免字典和元組的多重嵌套,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
這篇文章主要給大家分享的是利用Python 寫小游戲吃金幣、打乒乓、滑雪并附上源碼，具有一的知識(shí)性參考價(jià)值，需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了用Python簡陋模擬n階魔方,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)python的小伙伴呢有一定的幫助,需要的朋友可以參考下2021-04-04
這篇文章主要介紹了Python操作rabbitMQ的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
如何使用python對(duì)圖片進(jìn)行批量壓縮詳解
對(duì)于圖片強(qiáng)行被定義高和寬會(huì)變形,我們希望圖片被改變大小后,比例保持不變,完成對(duì)圖片的壓縮,下面這篇文章主要給大家介紹了關(guān)于如何使用python對(duì)圖片進(jìn)行批量壓縮的相關(guān)資料,需要的朋友可以參考下2022-07-07
使用SQLAlchemy操作數(shù)據(jù)庫表過程解析
這篇文章主要介紹了使用SQLAlchemy操作數(shù)據(jù)庫表過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
python3 deque 雙向隊(duì)列創(chuàng)建與使用方法分析
這篇文章主要介紹了python3 deque 雙向隊(duì)列創(chuàng)建與使用方法,結(jié)合實(shí)例形式分析了python3 deque 雙向隊(duì)列創(chuàng)建、添加、清空、拷貝等相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03
今天小編就為大家分享一篇基于python的列表list和集合set操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Python文件操作和數(shù)據(jù)格式詳解(簡單簡潔)
文本處理是腳本語言的強(qiáng)項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Python文件操作和數(shù)據(jù)格式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05