Django框架下使用富文本编辑器CKEditor5实例

最新推荐文章于 2025-04-28 09:40:04 发布

原创

最新推荐文章于 2025-04-28 09:40:04 发布 · 置顶 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#django #ckeditor

首先，网上有很多关于CKEditor的博客教程等，但多数为CKEditor4，如果是用CKEditor5一定要去看第五版的官方文档，有很多改变。

1. 安装配置CKEditor5

此类教程有很多，这里推荐在官网下载，选择创建自己的编辑器ckeditor.com/ckeditor-5/download/.
在这里插入图片描述
选择经典，然后就可以轻松的选择插件、工具栏排版、语言，最后下载压缩包。

解压后放在项目目录下（sample文件夹可删可不删，但其他目录一定不要修改）

引用ckeditor.js，注意路径

<script type="text/javascript" src="../static/ckeditor/build/ckeditor.js"></script>

<div class="editor" ></div>

在此处，仍可修改你的编辑器

<script>
    let theEditor;
    ClassicEditor
			.create( document.querySelector( '.editor' ), {
   
   
				toolbar: {
   
   
					items: [
						'heading',
						'|',