回到顶部

Contents

前端输入框使用 ckeditor 富文本编辑器

官方文档

下载 ckeditor 自定义功能包

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

HTML 引入 解压路径的 ckeditor.js

<script src="{% static 'ckeditor_4.13.0/ckeditor.js' %}"></script>

HTML 引入 ckeditor 富文本编辑器

Classic Editing(经典)

样式风格:

官方指导文档:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_framed.html

<textarea name="editor1" id="editor1">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>

<script>
    window.onload = function() {
        CKEDITOR.replace( 'editor1' );
    };
</script>

Inline Editing(内联)

样式风格:https://ckeditor.com/ckeditor-4/demo/#inline

官方指导文档:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_inline.html

<div id="comment-content" contenteditable="true">
    <h1>Inline Editing in Action!</h1>
    <p>The "div" element that contains this text is now editable.</p>
</div>

<script>
    // Turn off automatic editor creation first.
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline( 'comment-content' );
</script>

<script>
// ckeditor 获取富文本输入的内容
let comment_content = CKEDITOR.instances["comment-content"].getData();
</script>

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

^_^
请喝咖啡 ×

前一篇: Chrome 78 (谷歌浏览器 ) 进入暗黑模式
下一篇: HTML 笔记
captcha