Django配置富文本編輯器kindeditor

時間 2019-11-18

標籤 django 配置文本編輯器 kindeditor 欄目 Python 简体版

原文原文鏈接

一.簡介 php

django是一個容易快速上手的web框架，用它來建立內容驅動型的網站（好比獨立博客）十分方便。遺憾的是，django並無提供官方的富文本編輯器，然後者剛好是內容型網站後臺管理中不可或缺的控件。常見的富文本編輯器有ckeditor,ueditor,kindeditor,tinmce...html

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

二. django-admin中添加富文本編輯器的幾種方式

使用第三方庫，如django-ckeditor
在admin中定義富文本編輯器的widget
經過定義ModelAdmin的媒體文件

本文采用第三方庫的方法。python

三.具體步驟web

1.下載kindeditordjango

解壓後，將文件夾放在 yourproject/static/js 目錄下：D:\blog_project\static\js\kindeditor-4.1.10框架

kindeditor-4.1.10中提供了許多關於asp,jsp,php的demo，由於使用python，這些文件用不到能夠刪掉。jsp

2.定義ModelAdmin的媒體文件編輯器

admin.py:

class ArticleAdmin(admin.ModelAdmin):
    list_display = ('title', 'desc', 'date_publish', 'category')
    search_fields = ('click_count', 'tag')
class Media:
        js = (
            '/static/js/kindeditor-4.1.10/kindeditor-min.js',
            '/static/js/kindeditor-4.1.10/lang/zh_CN.js',
            '/static/js/kindeditor-4.1.10/config.js', # 配置文件，這個須要本身實現
        )

admin.site.register(content)  # 註冊models.py中定義的模型
admin.site.register(Article, ArticleAdmin)

目前尚未實現富文本，由於沒法獲知在何處實現此功能。需配置config.jsconfig.js文件，在須要顯示編輯器的位置添加textarea輸入框。網站

3.修改kindeditor的配置文件spa

在D:\blog_project\static\js\kindeditor-4.1.10下建立config.js文件，寫入如下js代碼：

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

注意 textarea[name=content] 沒有這一句也沒法顯示，由於，解析網頁源代碼：指定文章內容對應的html代碼爲 id = "id_content",和name = "content"。因此用代碼 textarea[name=content]來肯定我i們須要利用富文本編輯的區域。