django中富文本編輯器KindEditor的基本使用

1.簡介:

KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用

2.主要特點:

• 快速：體積小，加載速度快
• 開源：開放源代碼，高水平，高品質
• 底層：內置自定義 DOM 類庫，精確操作 DOM
• 擴展：基於插件的設計，所有功能都是插件，可根據需求增減功能
• 風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
• 兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera 

3.使用:

1)下載路徑: http://kindeditor.org/download

下載后根據需求刪除以下目錄。

• asp - ASP程序
• asp.net - ASP.NET程序
• php - PHP程序
• jsp - JSP程序
• examples - 演示文件

2)將文件夾拷貝到項目根目錄的/static/js文件夾中:

 

 3)在settings.py中配置static目錄:

STATIC_URL = '/static/'

#指定靜態文件夾所在的路徑
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

不加的后果(控制台輸出):

 

4)在kineeditor目錄下創建conifg.js配置文件

#config.js
KindEditor.ready(function(K) {
        // K.create('textarea[name=content]', {
        K.create('#id_content', {
            width: '800px',
            height: '200px',
        });
});

注釋: 這里的#id_content,或是name=content,是通過登錄admin后，右擊對應控件，選擇審查元素獲得的。

 

 5)在admin.py對應的管理類中添加class Media,引入js文件。

from .models import  Article
class ArticleAdmin(admin.ModelAdmin):
    list_display = ['title']
    class Media:
        js = ('/static/js/kindeditor-4.1.10/kindeditor-all-min.js',
              '/static/js/kindeditor-4.1.10/lang/zh-CN.js',
              '/static/js/kindeditor-4.1.10/config.js')

admin.site.register(Article,ArticleAdmin)

附 class Media的官方描述

 

6)效果圖: