Django后台集成CKeditor富文本编辑器
博客网站都离不开编辑器。很多教程都是安装第三方库来将CKeditor编辑器集成到Django中。
分享一个不用三方库将CKeditor编辑器集成到Django后台中的方法。
假设这是我们的文章数据库模型。
class Article(models.Model):
title = models.CharField(verbose_name='标题',max_length=120)
content = models.TextField(verbose_name='正文')
class Meta:
verbose_name_plural = '文章'
def __str__(self):
return self.title
去admin.py文件中注册模型。
from django.contrib import admin
from app01 import models
# Register your models here.
admin.site.register(models.Article)
现在就可以去后台添加一篇文章了。
我们希望正文的输入框集成CKeditor编辑器。
CKeditor官网下载打包
官网地址 点击classic。
或者直接用我已经下载的。
链接:https://pan.baidu.com/s/1a3Aw-N4EKmM1p5xjLhMgfQ
提取码:1lcf
可以在这里添加功能,然后下一步。如果要有上传图片的功能,我记得好像要把CKFinder插件选上。
这里就是把自己选的功能拖下来,还可以按自己的喜好排序。
继续下一步,语言往上滑选中文。再然后就是打包下载了。
这是解压后的文件,主要要的是build目录下的文件。sample目录下还有个index.html的页面可以用编辑器。
看index.html页面的源代码,主要是这些js。document.querySelector( '.editor' )
找到输入框添加样式。
知道了怎么实现,现在主要问题是怎么把这些js文件导入到Django后台页面中。
在解压的build目录下新建一个config.js的文件,输入下面的内容。
$(document).ready(function () {
ClassicEditor
.create(document.querySelector('#id_content'), {
ckfinder: {
uploadUrl: '/uploads/'
},
licenseKey: '',
})
.then(editor => {
window.editor = editor;
})
.catch(error => {
console.error('Oops, something went wrong!');
console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
console.warn('Build id: 1mkmq5sj9fnb-yvaxadk5ookp');
console.error(error);
});
})
id_content 改成自己后台页面正文输入框的id,一般都是id_ + 字段名。
把build的全部文件放到static目录下去。
去admin.py重新注册模型
from django.contrib import admin
from app01 import models
# Register your models here.
class ArticleAdmin(admin.ModelAdmin):
class Media:
#相对于static目录。改成自己的路径
js = (
'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js', # 这个不用改
'plugins/ckeditor/ckeditor.js',
'plugins/ckeditor/translations/zh.js',
'plugins/ckeditor/config.js'
)
admin.site.register(models.Article,ArticleAdmin)
去后台就看到编辑器已经生效。
如果没有生效的话,去后台页面查看源代码,看看js文件有没有引入。检查
document.querySelector( '#' )
有没有改成自己输入框的id
再新建一个css文件,设定一个初始高度。
.ck-content{
height: 30em;
}
admin.py
class ArticleAdmin(admin.ModelAdmin):
class Media:
css = {
'all': ('plugins/ckeditor/cked.css',)
}
js = (
'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js',
'plugins/ckeditor/ckeditor.js',
'plugins/ckeditor/translations/zh.js',
'plugins/ckeditor/config.js'
)
admin.site.register(models.UserInfo)
admin.site.register(models.Article,ArticleAdmin)
有了初始高度后就好看很多了。
现在编辑器大多数功能都能用了,但是还没有图片上传功能。
配置图片上传功能
urls.py 配置路由
from django.contrib import admin
from django.urls import path,re_path,include
from app01 import views
from django.views.static import serve
from .settings import MEDIA_ROOT
urlpatterns = [
re_path(r'^media/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT}),
path('uploads/', views.upload_file), # 图片上传链接
]
settings.py 配置
import os
STATIC_URL = '/static/'
STATIC_ROOT = (os.path.join(BASE_DIR, 'static'))
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = "/media/"
view.py 视图
@csrf_exempt
def upload_file(request):
""" 编辑器上传文件处理 """
upload = request.FILES.get('upload') # 获取传的文件
uid = str(uuid.uuid4()).replace('-', '') # 生成uuid
file_name = uid + '.' + str(upload.name).split('.')[-1] # 文件名 + 文件格式
file_path = os.path.join(settings.MEDTA_ROOT, 'upload', file_name) # 拼接文件路径
with open(file_path, 'wb+') as f:
for chunk in upload.chunks(): # 写入
f.write(chunk)
# 按要求返回数据
result = {
"url": settings.MEDIA_URL + "upload/" + file_name,
"filename": file_name,
"uploaded": "1",
}
return JsonResponse(result)
配置完后,就可以上传图片了。
参考教程:点击查看
tttt
4 #
test
3 #
tttt
2 #
啊哈
1 #