您现在的位置是:首页 > Javascript
当前栏目
前端输入框使用 ckeditor 富文本编辑器
2023-03-07 09:46:58 时间
官方文档
- 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
<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"><p>Initial editor content.</p></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 的内联样式。
相关文章
- js中JSON.parse()函数与JSON.stringify()函数详解
- react使用antd中Form内联组件与Form表单默认赋值
- js对象动态赋值---融会贯通
- js传递参数获取到的是object或object HTMLFormElement
- C# 调用js库的方法
- WEB中的敏感文件泄漏
- Frida Internal - Part 2: 核心组件 frida-core
- 如何在H5页面或者移动端Uniapp/vue中接入在线客服系统,h5客服系统的接入方法
- 网站在线客服系统实时语音视频聊天实战开发,最兼容的getUserMedia获取音视频流的函数方法
- 分享下关于JS 数组的 28 个方法
- 前端图片压缩方案及代码实现
- 构造http请求的几种方式(附源码)
- 从recat源码角度看setState流程_2023-02-13
- 从react源码看hooks的原理_2023-02-13
- react的useState源码分析_2023-02-13
- 如何用 JavaScript 编写你的第一个单元测试
- React报错之Element type is invalid
- 3xx HTTP状态码的终极指南
- JS对象到原始值的转换
- 2年过去了,谁还记得曾想取代Node.js的他?