CKEditor 5 富文本编辑器的官方例子
CKEditor 5 可以提供任何所见即所得的编辑器类型。从类似于 Google Docs 和 Medium 的在线编辑器,到类似于 Slack 或 Twitter 的应用程序,CKEditor 5 编辑框架为每个用户提供了定制的和开箱即用的解决方案。这个具有 MVC 架构、自定义数据模型和虚拟 DOM 的现代 JavaScript 富文本编辑器是在 ES6 中从头开始编写的,具有出色的 webpack 支持。
cdn位置:
# 经典编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
# 内联编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/inline/ckeditor.js"></script>
# 气球编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon/ckeditor.js"></script>
# 气球块编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon-block/ckeditor.js"></script>
# 文档编辑器
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/decoupled-document/ckeditor.js"></script>
1、经典编辑器
经典编辑器是大多数用户传统上学习与富文本编辑器相关联的东西 - 一个工具栏,其编辑区域放置在页面上的特定位置,通常作为表单的一部分,用于向服务器提交一些内容。
在其初始化期间,编辑器隐藏页面上使用的可编辑元素并呈现“代替”它。这就是为什么它通常用于替换<textarea>
元素的原因。
在 CKEditor 5 中,“盒装”编辑器的概念被彻底改造:
- 现在,当用户向下滚动页面时,工具栏始终可见。
- 编辑器内容现在被内嵌在页面中(没有周围的
<iframe>
元素)——现在更容易设置它的样式。 - 默认情况下,编辑器现在会随着内容自动增长。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CKEditor 5 – Classic editor</title><script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
</head>
<body><h1>Classic editor</h1><div id="editor"><p>This is some sample content.</p></div><script>ClassicEditor.create( document.querySelector( '#editor' ) ).catch( error => {console.error( error );} );</script>
</body>
</html>
2、内联编辑器
内联编辑器带有一个浮动工具栏,当编辑器获得焦点时(例如通过单击它),该工具栏变得可见。与经典编辑器不同,内联编辑器不会呈现给定元素,它只是使其可编辑。因此,编辑内容的样式在创建编辑器之前和之后将完全相同。
使用内联编辑器的一个常见场景是为用户提供在网页上实际位置编辑内容的可能性,而不是在单独的管理部分中进行。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CKEditor 5 - Inline editor</title><script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/inline/ckeditor.js"></script>
</head>
<body><h1>Inline editor</h1><div id="editor"><p>This is some sample content.</p></div><script>InlineEditor.create( document.querySelector( '#editor' ) ).catch( error => {console.error( error );} );</script>
</body>
</html>
3、气球编辑器
气球编辑器与内联编辑器非常相似。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CKEditor 5 – Balloon editor</title><script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon/ckeditor.js"></script>
</head>
<body><h1>Balloon editor</h1><div id="editor"><p>This is some sample content.</p></div><script>BalloonEditor.create( document.querySelector( '#editor' ) ).catch( error => {console.error( error );} );</script>
</body>
</html>
4、气球块编辑器
气球块本质上是 气球编辑器 带有一个额外的块工具栏,可以使用附加到可编辑内容区域的按钮并按照文档中的选择进行访问。工具栏提供对其他块级编辑功能的访问。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CKEditor 5 – Balloon block editor</title><script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/balloon-block/ckeditor.js"></script>
</head>
<body><h1>Balloon editor</h1><div id="editor"><p>This is some sample content.</p></div><script>BalloonEditor.create( document.querySelector( '#editor' ) ).catch( error => {console.error( error );} );</script>
</body>
</html>
5、文档编辑器
文档编辑器专注于类似于原生文字处理器的富文本编辑体验。它最适合创建通常稍后打印或导出为 PDF 文件的文档。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CKEditor 5 – Document editor</title><script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/decoupled-document/ckeditor.js"></script>
</head>
<body><h1>Document editor</h1><!-- The toolbar will be rendered in this container. --><div id="toolbar-container"></div><!-- This container will become the editable. --><div id="editor"><p>This is the initial editor content.</p></div><script>DecoupledEditor.create( document.querySelector( '#editor' ) ).then( editor => {const toolbarContainer = document.querySelector( '#toolbar-container' );toolbarContainer.appendChild( editor.ui.view.toolbar.element );} ).catch( error => {console.error( error );} );</script>
</body>
</html>
注:这里的表格只能居中显示。
默认情况下,表格样式工具不包含在即用型编辑器构建中,必须单独安装。
CKEditor 5 富文本编辑器的官方例子相关推荐
- 富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...
- JavaWeb 富文本编辑器(Ckeditor)文件上传
目录 一.什么是富文本编辑器? 二.CKEditor介绍 三.CKEditor下载 四.使用富文本编辑器 五.文件上传 一.什么是富文本编辑器? 富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑 ...
- 【JavaWeb】之富文本编辑器
[JavaWeb]富文本编辑器 前言 一.富文本编辑器介绍 二.富文本编辑器使用 1.引入编辑器(多种引入方式) 2.使用编辑器 三.主流富文本编辑器推荐 1.TinyMCE 2.CKEditor 3 ...
- 富文本编辑器 java_HtmlBox富文本编辑器的使用
我们下面需要做的是在项目里面提供给用户一个富文本编辑区域. 一.什么是富文本编辑 富文本编辑器,Multi-function Text Editor, 简称 MTE, 它提供类似于 Microsoft ...
- 几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
富文本编辑器 富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文 ...
- JavaWeb富文本编辑器与文件上传
目录 一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用 二.文件上传 文件上传必须要注意的规则: 文件上传案例 文件夹的访问 一.富文本编辑器 富文本编辑器在项目中很常见,它可以将文本, ...
- 富文本编辑器-Ueditor
富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱.它的应用也 ...
- Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .
首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317 这篇文章中的做法 ...
- 富文本编辑器 CKeditor 配置使用 (带附件)
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
最新文章
- 8. 修改matlab GUI中fig和m文件名修改流程及注意事项
- Java开发者 IntelliJ IDEA 转换 VScode 时的优缺点
- 做一个”合格“的程序员(二)——学习管理
- 先天性异常或智力残疾儿童患者的外显子组和基因组测序:美国医学遗传学与基因组学学院循证临床指南...
- python 列表 remove()函数使用详解
- Android LitePal
- 事件发生位置的相对性——思想实验推导狭义相对论(二)
- 角度逼近圆弧插补法插补与仿真
- 创建jira sprint_如何在Excel中创建高级sprint燃尽图
- 014. 找树左下角的值
- [Darktable]dt源码分析(未完)
- androidP Surface到SurfaceFlinger -->surface -> BufferQueue(一)
- rabbitMq实现延迟队列
- 【论文精读】Natural Image Stitching Using Depth Maps
- 网站调整为黑白的方法
- 精算与金融建模行业解决方案白皮书,不要错过!
- html里div水平居中,html+css div水平居中的几种方法
- 思科firepower数据流处理流程
- touch、touchevent-事件总结
- 职场英语--邮件自动回复模板
热门文章
- c语言学生成绩管理系统框架
- 二分法 matlab应用,MATLAB算法の二分法
- Numpy常用API
- VMware Workstation 与 Device/Credential Guard 不兼容。解决办法。
- Java基本数据类型详细介绍一览
- 数据结构疑难算法参考资料
- 换城市为什么需要换号
- signature=8fe0c6ffeeec1d2ea9caea1e3bd24d0a,[求助]高手来一个解密回题。
- 软件测试基础理论体系学习6-黑盒测试方法白盒测试方法简述
- 干货 | 台大“一天搞懂深度学习”课程PPT(下载方式见文末!!)