快捷導(dǎo)航

Django添加KindEditor富文本編輯器的使用

更新時(shí)間：2018年10月24日 12:02:14 作者：JueYings

今天小編就為大家分享一篇關(guān)于Django添加KindEditor富文本編輯器的使用，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧

KindEditor簡(jiǎn)介：

KindEditor是一套開(kāi)源的在線HTML編輯器，主要用于讓用戶在網(wǎng)站上獲得所見(jiàn)即所得編輯效果，開(kāi)發(fā)人員可以用KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。

KindEditor使用JavaScript編寫(xiě)，可以無(wú)縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。

在Django Admin當(dāng)中加入KindEditor，這比干巴巴的textarea好多了。加入之后的效果如下：

1、設(shè)置static文件路徑

KindEditor是用JavaScript編寫(xiě)的，這屬于static files，因此需要為Django設(shè)置static路徑。

首先在工程目錄下新建static文件夾，這里要注意的是千萬(wàn)不要在my_app/下創(chuàng)建static文件夾作為static文件存放的目錄, 這會(huì)導(dǎo)致Django無(wú)法搜索到自己的static 文件。

創(chuàng)建后好，在settings中配置static文件目錄。添加以下代碼

STATIC_URL = '/static/'
STATICFILES_DIRS = (
 os.path.join(BASE_DIR, 'static'),
)

2、下載KindEditor

下載KindEditor, 解壓后將那些沒(méi)用的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頁(yè)面加入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ò)，顯示沒(méi)有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é)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

您可能感興趣的文章: