带文本编辑器的html文本框,前端输入框使用 ckeditor 富文本编辑器

官方文档

下载 ckeditor 自定义功能包

打开 https://ckeditor.com/cke4/builder 选择自己的样式后，下载后解压到 static 目录 (解压后有很多文件，全部都要；部署到正式环境要先 collectstatic)

HTML 引入 解压路径的 ckeditor.js

HTML 引入 ckeditor 富文本编辑器

Classic Editing(经典)

样式风格：

<p>Initial editor content.</p>

window.onload = function() {

CKEDITOR.replace( 'editor1' );

};

Inline Editing(内联)

Inline Editing in Action!

The "div" element that contains this text is now editable.

// Turn off automatic editor creation first.

CKEDITOR.disableAutoInline = true;

CKEDITOR.inline( 'comment-content' );

// ckeditor 获取富文本输入的内容

let comment_content = CKEDITOR.instances["comment-content"].getData();

说明：本博客评论模块的评论内容的输入框使用 CKEditor 的内联样式。