温馨提示×

Django项目后台admin富文本KindEditor教程0基础

小云
121
2023-09-19 06:32:42
栏目: 编程语言

要在Django项目的后台admin中使用富文本编辑器KindEditor,你需要按照以下步骤进行设置。

步骤1:安装KindEditor

首先,你需要下载KindEditor的安装包,并将其解压到你的Django项目的static目录中。

步骤2:配置settings.py

在你的Django项目的settings.py文件中,找到STATIC_URL设置项,并添加以下内容:

STATICFILES_DIRS = [

os.path.join(BASE_DIR, ‘static’),

]

步骤3:创建一个富文本字段

在你的models.py文件中,创建一个富文本字段,例如:

from django.db import models

class MyModel(models.Model):

content = models.TextField()

步骤4:创建一个自定义的admin表单

在你的admin.py文件中,创建一个自定义的admin表单,例如:

from django import forms

from django.contrib import admin

from django.forms import ModelForm

from django.utils.html import format_html

from myapp.models import MyModel

class MyModelForm(ModelForm):

content = forms.CharField(widget=forms.Textarea(attrs={‘class’: ‘kindeditor’}))

class Meta:

model = MyModel

fields = ‘all

class MyModelAdmin(admin.ModelAdmin):

form = MyModelForm

list_display = (‘id’, ‘content_preview’)

def content_preview(self, obj):

return format_html(obj.content[:50] + ‘…’)

content_preview.short_description = ‘Content Preview’

admin.site.register(MyModel, MyModelAdmin)

步骤5:创建一个JavaScript文件

在你的static目录下创建一个名为kindeditor_init.js的JavaScript文件,内容如下:

$(document).ready(function() {

$(‘.kindeditor’).each(function() {

KindEditor.create(this);

});

});

步骤6:在admin模板中加载JavaScript文件

在你的admin模板(例如admin/base_site.html)中,添加以下内容:

{% extends “admin/base.html” %}

{% block extrahead %}

{{ block.super }}

{% endblock %}

步骤7:运行你的Django项目

现在,你可以运行你的Django项目,并在admin中使用KindEditor富文本编辑器来编辑content字段了。

希望这个教程对你有帮助!

0