回到顶部

阅读目录

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

html    zhuoyuebiji    --   2019-12-9 18:08   其他

官方文档

下载 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 的内联样式。

  ckeditor
^_^
请喝咖啡 ×
文章部分资料可能来源于网络，如有侵权请告知删除。谢谢！
前一篇： Chrome 78 (谷歌浏览器 ) 进入暗黑模式
下一篇： HTML 笔记
多关键词用空格分隔