Python全系列 教程
3567个小节阅读:5930.3k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
官网文档:https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html
创建项目
xxxxxxxxxx
django-admin startproject demo
增加子应用
xxxxxxxxxx
python manage.py startapp edit_app
添加子应用与ckeditor子应用
xxxxxxxxxx
# settings.py
INSTALLED_APPS = [
'ckeditor',
'edit_app',
'...'
]
设置模板目录
xxxxxxxxxx
# settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
增加逻辑视图
xxxxxxxxxx
# views.py
from django.shortcuts import render,HttpResponse
from .models import Article
# Create your views here.
def index(request):
if request.method == 'POST':
title = request.POST.get('title')
content = request.POST.get('content')
Article.objects.create(title=title,content=content)
return HttpResponse('ok')
elif request.method == 'GET':
return render(request, 'index.html')
def article(request,pk):
if request.method == 'GET':
info = Article.objects.get(id=pk)
return render(request, 'index.html', {'info':info})
增加路由
xxxxxxxxxx
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('edit/', views.index, name='index'),
path('edit/<int:pk>/', views.article, name='article'),
]
设置页面
加载静态文件与设置表单
xxxxxxxxxx
<script src="https://cdn.ckeditor.com/ckeditor5/35.3.2/classic/ckeditor.js"></script>
<form action="" method="post">
{% csrf_token %}
标题1:<input type="text" name="title" value="{{info.title}}"><br>
<textarea cols="20" rows="2" name="content" id="editor">{{info.content}}</textarea>
<input type="submit" value="Submit">
</form>
在页面增加JS控制即可
参考地址:https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html
xxxxxxxxxx
<script>
ClassicEditor.create(document.getElementById("editor"), {
toolbar: {
items: [
'heading', '|',
'fontfamily', 'fontsize', '|',
'alignment', '|',
'fontColor', 'fontBackgroundColor', '|',
'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
'link', '|',
'outdent', 'indent', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'code', 'codeBlock', '|',
'insertTable', '|',
'uploadImage', 'blockQuote', '|',
'undo', 'redo'
],
}
})
</script>
实时学习反馈
1. 关于自定义页面使用Django富文本编辑器功能说法正确的是?
A 自定义页面需要先下载静态文件
B 必须通过样式表ckeditor来加载富文本
C 需要模板加载ckeditor静态文件js
D 富文本必须需要使用textarea标签
答案
1=>C