安装模块
pip install django-ckeditor
pip install pillow
urls.py 配置
from django.urls import path,include,re_path
from django.views.static import serve
from .settings import MEDIA_ROOT
urlpatterns = [
path('xadmin/', xadmin.site.urls),
#上传media的文件可以被查看，这个很重要，更后边的一个bug有关
re_path(r'^media/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT}),
#ckckeditor图片上传
path('ckeditor/', include('ckeditor_uploader.urls')),
]
settings.py 配置
INSTALLED_APPS = [
......
'ckeditor',#富文本编辑器
'ckeditor_uploader'#富文本编辑器上传图片模块
]
#使用ck的工具栏并修改，宽度自适应
CKEDITOR_CONFIGS = {
# django-ckeditor默认使用default配置
'default': {
# 编辑器宽度自适应
'width':'auto',
'height':'300px',
# tab键转换空格数
'tabSpaces': 4,
# 工具栏风格
'toolbar': 'Custom',
# 工具栏按钮
'toolbar_Custom': [
# 预览、表情
['Preview','Smiley'],
# 字体风格
['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
# 字体颜色
['TextColor', 'BGColor'],
#格式、字体、大小
['Format','Font','FontSize'],
# 链接
['Link', 'Unlink'],
# 列表
['Image', 'NumberedList', 'BulletedList'],
#居左，居中，居右
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
# 最大化
['Maximize']
],
# 加入代码块插件
'extraPlugins': ','.join(['codesnippet','image2','filebrowser','widget', 'lineutils']),
},
#评论
'comment': {
# 编辑器宽度自适应
'width': 'auto',
'height': '140px',
# tab键转换空格数
'tabSpaces': 4,
# 工具栏风格
'toolbar': 'Custom',
# 工具栏按钮
'toolbar_Custom': [
# 表情 代码块
['Smiley', 'CodeSnippet'],
# 字体风格
['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
# 字体颜色
['TextColor', 'BGColor'],
# 链接
['Link', 'Unlink'],
# 列表
['NumberedList', 'BulletedList'],
],
# 加入代码块插件
'extraPlugins': ','.join(['codesnippet']),
}
}
CKEDITOR_UPLOAD_PATH = '' # 上传图片保存路径，如果没有图片存储或者使用自定义存储位置，那么则直接写 ' ' ,如果是使用django本身的存储方式，那么你就指名一个目录用来存储即可。
CHEDITOR_UPLOAD_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。需要注意的是，如果使用django自带的存储，那么路径是一个相对路径，它相对与你设置的的MEDIA_ROOT。
models.py 引用配置
from ckeditor.fields import RichTextField
# 带图片
from ckeditor_uploader.fields import RichTextUploadingFormField
class QAmodel(models.Model):
content = RichTextField(verbose_name='正文内容'，config_name='default')#config_name指定ckeditor配置文件，不指定就使用default
# 带图片
content = RichTextUploadingFormField(verbose_name='正文内容'，config_name='default')#config_name指定ckeditor配置文件，不指定就使用default
forms.py 引用配置
from django import forms
from ckeditor.fields import RichTextFormField
# 带图片
from ckeditor_uploader.fields import RichTextUploadingFormField
from .models import QAmodel
class Add_questionsForm(forms.ModelForm):
content = RichTextFormField(label='内容'，config_name='default')
# 带图片
content = RichTextUploadingFormField(label='内容'，config_name='default')
class Meta:
model = QAmodel
fields = ['content',]
admin.py
from django.contrib import admin
from .models import QAmodel,Tags_QA
from django import forms
class QAmodeladmin(forms.ModelForm):
content = RichTextUploadingFormField(label='内容')
list_display = ['start_time','content','conclusion','delete_state']
class Meta:
model = LinkInfo
fields = '__all__'
admin.site.register(QAmodel,QAmodeladmin)
前端应用
urls.py
from django.urls import path,include
from .views import Add_questions,
urlpatterns = [
path('', home,name='home'),
#添加问题
path('add_questions/', Add_questions.as_view(), name='add_questions'),
]
views.py
from django.contrib.auth.decorators import login_required
from django.utils.decorators import method_decorator
from django.views.generic.base import View
from .forms import Add_questionsForm
class Add_questions(View):
@method_decorator(login_required(login_url='/users/login'))
def get(self,request):
add_questionsForm = Add_questionsForm()
content = {}
content['add_questionsForm'] = add_questionsForm
return render(request, 'qatemplates/add_questions.html',content)
html
<div class="form-group">
<label for="content">内容</label>
<div>
{{ add_questionsForm.media }}
{{ add_questionsForm.content }}
</div>
</div>
post 后台处理
from django.contrib.auth.decorators import login_required
from django.utils.decorators import method_decorator
from django.views.generic.base import View
from django.shortcuts import render,HttpResponse,HttpResponseRedirect
from .forms import Add_questionsForm
#提问页
class Add_questions(View):
@method_decorator(login_required(login_url='/users/login'))
def get(self,request):
add_questionsForm = Add_questionsForm()
content = {}
content['add_questionsForm'] = add_questionsForm
return render(request, 'qatemplates/add_questions.html',content)
def post(self,request):
add_questionsForm = Add_questionsForm(request.POST)
if add_questionsForm.is_valid():
add_question = add_questionsForm.save(commit=False)
add_question.author = request.user
add_question.save()
# 新增代码，保存 tags 的多对多关系
add_questionsForm.save_m2m()
return HttpResponseRedirect(reverse("home"))#home是首页
# redirect(request.GET.get('from',reversed('home')))
content = {}
content['add_questionsForm'] = add_questionsForm
return render(request, 'qatemplates/add_questions.html',content)
