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

2023-02-18 13:32:59 浏览数 (1)

官方文档

  • https://ckeditor.com/docs/ckeditor4/latest/guide/dev_ckeditor_js_load.html （配置文档）
  • https://ckeditor.com/cke4/builder （自定义功能包）

下载 ckeditor 自定义功能包

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

HTML 引入 解压路径的 ckeditor.js

代码语言：javascript复制
<script src="{% static 'ckeditor_4.13.0/ckeditor.js' %}"></script>

HTML 引入 ckeditor 富文本编辑器

Classic Editing（经典）

样式风格：

  • https://ckeditor.com/ckeditor-4/demo/#article
  • https://ckeditor.com/ckeditor-4/demo/#document

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

代码语言：javascript复制
<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

代码语言：javascript复制
<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 的内联样式。

https 网络安全 html c++

0 人点赞