Django使用CKeditor5.9详细方法（不在django自带的后台应用）
1、创建Django项目
如果是Django2版本修改如下代码：
按照下面两个方法进行解决(Django2版本需要按照A、B方法改，Django3版本只需要修改A方法)
A:找到控制台的base.py文件或找到以下目录：
/venv/lib/site-packages/django/db/backends/mysql/base.py
把一下代码进行注释：
if version < (1, 3, 13):
raise ImproperlyConfigured('mysqlclient 1.3.13 or newer is required; you have %s.' % Database.__version__)
B:找到控制台的operations.py文件，或找到以下目录：
venv\lib\site-packages\django\db\backends\mysql\operations.py
把query = query.decode(errors='replace')改成query = query.encode(errors='replace')
2、修改Settings.py
ALLOWED_HOSTS = ["*"]
#添加mysql基础配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
# 数据库引擎
'NAME': 'FCK',
# 数据库名字
'USER': 'root',
# 链接数据库用户名
'PASSWORD': 'Sloveb55555..',
# 链接数据库密码
'HOST': '127.0.0.1',
# 数据库链接地址
'POST': '3306',
# 数据库链接端口
}
}
#修改如下代码
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False
#添加如下代码
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
MEDIA_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = "static/"
STATIC_ROOT = os.path.join(BASE_DIR, 'static/media/')
CKEDITOR_UPLOAD_PATH = "editor_uploads"
CKEDITOR_JQUERY_URL = 'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'
#富文本配置
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono',
# 'skin': 'office2013',
'toolbar_Basic': [
['Source', '-', 'Bold', 'Italic']
],
'toolbar_YourCustomToolbarConfig': [
{'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},
{'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
{'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},
{'name': 'forms',
'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField']},
'/',
{'name': 'basicstyles',
'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
{'name': 'paragraph',
'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
'Language']},
{'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
{'name': 'insert',
'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
'/',
{'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
{'name': 'colors', 'items': ['TextColor', 'BGColor']},
{'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
{'name': 'about', 'items': ['About']},
'/', # put this to force next toolbar on new line
{'name': 'yourcustomtools', 'items': [
# put the name of your editor.ui.addButton here
'Preview',
'Maximize',
]},
],
'toolbar': 'YourCustomToolbarConfig', # put selected toolbar config here
# 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
# 'height': 291,
# 'width': '100%',
# 'filebrowserWindowHeight': 725,
# 'filebrowserWindowWidth': 940,
# 'toolbarCanCollapse': True,
# 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
'tabSpaces': 4,
'extraPlugins': ','.join(
[
# your extra plugins here
'div',
'autolink',
'autoembed',
'embedsemantic',
'autogrow',
# 'devtools',
'widget',
'lineutils',
'clipboard',
'dialog',
'dialogui',
'elementspath'
]),
}
}
3、修改主目录里找到__init__.py写入如下代码：
# 使用mysql数据库驱动
import pymysql
pymysql.install_as_MySQLdb()
#安装pymysql驱动
4、创建APP：python manage.py startapp FCKeditor
# 在models.py文件里创建表：
from ckeditor_uploader.fields import RichTextUploadingField
class Cont(models.Model):
booksid = models.AutoField(primary_key=True, unique=True, null=False)
booksname = models.CharField(max_length=16, null=False, unique=True)
#要想使用ckeditor就必须用RichTextUploadingField()
content = RichTextUploadingField()
class Meta:
db_table = 'Content'
#然后Settings.py文件里的INSTALLED_APPS里注册FCKeditor:'FCKeditor.apps.FckeditorConfig',
#然后在控制台进行生成
python manage.py makemigrations
python manage.py migrate
5、在Settings.py文件
INSTALLED_APPS = [
#加入如下代码
'ckeditor',
'ckeditor_uploader',
]
6、创建static文件夹，然后在static文件夹里创建editor_uploads文件夹
执行安装：
pip install Pillow
pip install django-ckeditor
python manage.py collectstatic
执行完之后会在目录的static文件夹里看到media文件夹，这里就是把ckeditor复制出来，而editor_uploads文件夹是用于插件上传的目录。
7、在主目录找到urls.py文件里添加如下代码：
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
#这个是导入ckeditor的路径
path('ckeditor', include('ckeditor_uploader.urls')),
#这个是自己创建的APP路径
path('editor/', include(('FCKeditor.urls', 'editor'), namespace='editor')),
]
# 下面的代码是用于图片上传的
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
8、在FCKeditor文件夹里创建urls.py文件之后添加如下代码
from django.urls import path
from FCKeditor import views
urlpatterns = [
path('editblog/', views.edit_blog, name='edit_blog'),
]
9、在views.py文件里添加如下代码，或者直接在urls.py文件里用鼠标放在views.edit_blog上直接Create也可以
from django.shortcuts import render
# Create your views here.
def edit_blog(request):
if request.method == "GET":
return render(request, 'a.html')
elif request.method == "POST":
return None
10、在FCKeditor文件夹里创建templates模板文件夹然后接着创建a.html复制一下代码：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
</head>
<body>
<form method="post">
<p>
My Editor:<br/>
<textarea name="content" id="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor1');
</script>
</p>
<p><input type="submit"/></p>
</form>
</body>
</html>
11、在控制台执行：python manage.py runserver
在浏览器直接访问：http://127.0.0.1:8000/editor/editblog/ ，就可以看到ckdeitor的插件了，如果想更改ckdeitor里的插件或者更改宽度和高度可以在Settings.py文件下面的CKEDITOR_CONFIGS 里修改。