概览 ckeditor 5构建版本是一些被准备好的富文本编辑器的集合。每一个“构建版本”提供一个包含一系列特性和一个默认配置的编辑器。 它适用于创建用于打印或者导出为PDF文件的文档。 ? 在线试用，请点击document编辑器示例。查看快速开始来使用它。 自定义构建 每一个构建版本都默认带有一些特性和他们默认的配置。 下面是一些公共用例： 在内容管理系统中： 写文章或者网站内容的表单 在线编辑页面前端样式 评论 在商场和自动销售应用中： 发送一个邮件活动 创建模板 在论坛应用中： 创建主题和回复 在团队合作应用中： 创建共享文档 ，你应该使用ckeditor4： :需要做旧浏览器适配的时候 如果ckeditor4包含你需要的特性，但是ckeditor5还没有的时候 如果ckeditor4已经在你的应用中使用，并且你还没有准备好去用 ckeditor5替换它的时候 下面的用例，你应该使用消息： 当你需要一个简单的方式在你的应用中实现创建满足以下特性的文章和文档： 实时共享书写 在线评论和讨论内容 高级书写特性 文章作者ianzhi,
编辑器构建版本（这里使用的CDN）： <script src="https://cdn.<em>ckeditor</em>.com/<em>ckeditor</em>5/11.1.1/classic/<em>ckeditor</em>.js"></script </title> <script src="https://cdn.<em>ckeditor</em>.com/<em>ckeditor</em>5/11.1.1/classic/<em>ckeditor</em>.js"></script> </ </title> <script src="https://cdn.<em>ckeditor</em>.com/<em>ckeditor</em>5/11.1.1/inline/<em>ckeditor</em>.js"></script> </head </title> <script src="https://cdn.<em>ckeditor</em>.com/<em>ckeditor</em>5/11.1.1/balloon/<em>ckeditor</em>.js"></script> </ </title> <script src="https://cdn.<em>ckeditor</em>.com/<em>ckeditor</em>5/11.1.1/decoupled-document/<em>ckeditor</em>.js"><
腾讯云精选爆款云服务器限时体验20元起，还有更多热门云产品满足您的上云需求
CDN 可以直接从CKEditor CDN在页面内加载构建，CKEditor CDN针对全球超快速内容交付进行了优化。 使用CDN时，实际上不需要下载。 npm 所有版本都在npm上发布。 npm install --save @ckeditor/ckeditor5-build-inline # Or: npm install --save @ckeditor/ckeditor5-build-balloon # Or: npm install --save @ckeditor/ckeditor5-build-decoupled-document 之后CKEditor就会被安装在node_modules/@ ckeditor/ckeditor5-build-[name]/build/ckeditor.js，你可以使用require( '@ckeditor/ckeditor5-build-[name]' )来引入 为此，加载API入口点脚本就可以了： <script src="[<em>ckeditor</em>-build-path]/<em>ckeditor</em>.js"></script> 当CKEditor脚本加载后，你可以使用API在你的页面中创建编辑器
不像CKEditor 4, CKEditor 5实现了自定义数据模型。这意味着加载到编辑器中的每个内容都需要转换为该模型，然后再渲染回视图。 每种内容都必须由某些功能处理。 一旦你这样做，CKEditor 5将不会过滤任何东西。 如何打开源代码模式？ 如何编写源代码模式插件？ 由于编辑器中使用的自定义数据模型，源代码模式在CKEditor 5中没有意义。 CKEditor 5提供了丰富的JavaScript API和随时可用的构建，使您可以在任何需要的框架中使用CKEditor 5。 随着时间推移，我们会逐渐提供更多的官方集成。 这就是为什么我们不提供类似于我们在CKEditor 4中提供的完整编辑器包的原因。 同时，我们建议您安装插件以启用其他功能，甚至创建自定义版本以确保您充分利用CKEditor 5。 了解更多信息请参考使用webpack构建CKEditor 5。
CKEditor 5是否与框架XYZ兼容？ 是。 CKEditor 5与我们目前所听到的每个JavaScript框架兼容。 如何在框架中使用CKEditor 5？ 虽然CKEditor 5与您的框架兼容并且初始化它需要单个方法调用，但将CKEditor 5与您的框架集成可能需要使用现有的或编写一个新的适配器（集成层）来与CKEditor 5通信您的框架。 在检查如何将CKEditor 5与您的框架集成时，您可以按照以下步骤操作： 官方WYSIWYG编辑器集成 到目前为止，有三个官方集成： Angular 2+ React Vue.js 请参阅他们的文档以了解如何使用它们 与Electron的兼容性 从版本11.0.0开始，CKEditor 5与Electron兼容。 在Electron应用程序中使用CKEditor 5不需要任何额外的步骤。
它们被定义为CKEditor的插件。 在某些情况下，您可能需要在应用程序中使用不同的编辑器设置，所有这些都基于相同的构建。 为此，您需要在运行时控制编辑器中可用的插件。 , 'blockQuote' ] } ) .catch( error => { console.log( error ); } ); 使用config.removePlugins从CKEditor 您可以轻松列出构建中可用的所有插件： ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ); 添加特性 由于CKEditor构建不包含所有可能的功能 每个编辑器可能有不同的工具栏配置方案，因此建议查阅其文档。 文章作者ianzhi,原文地址：https://www.dnote.cn/users/ianzhi/posts/ckeditor5-builds-integration-configuration 文章版权归作者所有
增强用户体验 ckeditor5努力打造无缝、专注的编辑体验让用户去专注于创作内容。 更好的图片展示 插入图片到内容中是非常直观的，在用户体验上隐藏了所有的技术方面（上传，重置大小）。 增强的经典编辑器 对于CKEditor 5，我们重新设计了“盒子”编辑器的概念。 全新的工具栏 当用户向下滚动页面时，工具栏现在总是可见。 高度可定制 CKEditor 5 构建版本基于CKEditor 5 框架，提供了强大的可定制性和可扩展性。 自定义数据模型 为CKEditor 5设计了一个更高效的数据模型。 协作编辑 自定义数据模型的另一个重要优点是，通过引入“操作”和“操作转换”的概念，为在CKEditor内实现实时协作编辑提供了一种可能。 Letters是使用CKEditor 5的强大协作功能的应用程序示例。 ? 更现代化 CKEditor 5使用了ECMAScript 2015（也称为ES6）提供的强大模块功能完全重写。
editor – Balloon编辑器 Document editor – Decoupled编辑器 文档中的大多数例子使用Classic编辑器，其他的构建版本使用方法与此一致。 请参阅每个编辑器的文档以了解详细信息。 编辑器类的接口也不是强制的。 由于编辑器的不同实现在功能方面可能有很大差异，因此编辑器类实现者可以完全自由地使用API。 监听修改 Document#change:data 当文档以编辑器数据中“可见”的方式更改时，将触发此事件。 do this. require( [ 'path/to/ckeditor5-build-classic/build/ckeditor' ], ClassicEditor => { ClassicEditor.create CKEditor 提供了丰富的API与剪辑器交互。获取更多信息请查阅API文档。
CKEditor 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。 假设你选择了@ckeditor/ckeditor5-build-classic: npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5 /node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script> 使用Vue.use（）方法在应用程序中启用组件： Vue.use( CKEditor \ @ckeditor/ckeditor5-basic-styles \ @ckeditor/ckeditor5-basic-styles \ @ckeditor/ckeditor5-link \ @ckeditor /ckeditor/ckeditor5-vue上找到。
from '@ckeditor/ckeditor5-essentials/src/essentials'; import UploadAdapter from '@ckeditor/ckeditor5 '; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; import Italic from '@ckeditor/ckeditor5 EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'; import Heading from '@ckeditor/ckeditor5 '@ckeditor/ckeditor5-image/src/imagecaption'; import ImageStyle from '@ckeditor/ckeditor5-image/src/ from '@ckeditor/ckeditor5-image/src/imageupload'; import Link from '@ckeditor/ckeditor5-link/src/link
CKEditor 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。 目前，Angular的CKEditor 5组件仅支持通过构建集成CKEditor 5。 快速开始 在现有的Angular项目中，为Angular 2+安装CKEditor 5 WYSIWYG编辑器组件： npm install --save @ckeditor/ckeditor5-angular 假设你选择了@ckeditor/ckeditor5-build-classic： npm install --save @ckeditor/ckeditor5-build-classic 现在，将CKEditorModule 注意：使用文档编辑器构建 如果要使用文档编辑器构建，则需要手动将工具栏添加到DOM。 ckeditor/ckeditor5-build-classic'; import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component
CKEditor 5允许您以各种方式从中检索数据并将其保存到服务器（或通常用于您的系统）。 在本指南中，您可以了解可用选项及其优缺点。 与HTML表单自动集成 这是集成编辑器的经典方式。 </title> <script src="https://cdn.<em>ckeditor</em>.com/<em>ckeditor</em>5/11.1.1/classic/<em>ckeditor</em>.js"></script> </ > 请注意，在提交之前，CKEditor会自动更新替换后的<textarea>元素。 如果您需要随时使用JavaScript从CKEditor获取实际数据，请使用editor.getData()方法，如下一节所述。 为此，您需要将引用存储到编辑器中，因为 - 与CKEditor 4不同 - 没有全局CKEDITOR.instances属性。
真心复杂 有一个 CKEDITOR 的全局空间， 有一个 CKEDITOR.instances的全局实例引用 有 Classic 编辑和 Inline 编辑两种模式 有 Plugin 也有 Widget 加载 <script src="js/<em>ckeditor</em>/<em>ckeditor</em>.js"></script> 生成编辑器 经典编辑（Classic Editing） <textarea id="editor"> ="true">
本文链接：https://blog.csdn.net/bbwangj/article/details/100025915 一、导入js文件 <script src="js/plugins/<em>ckeditor</em> " id="liasionContent"></textarea> 三、配置 js配置： CKEDITOR.replace( 'liasionContent' ); 配置文件config.js配置 [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单 [ CKEDITOR.CTRL + 90 /*Z [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], // [ CKEDITOR.CTRL + 76 / [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体 [ CKEDITOR.CTRL + 85 /*U*/, 'underline
背景 项目中需要用到富文本编辑器，朋友推荐用CKEditor。CKEditor可以和Spring mvc很好的集成。 CKEditor与CKFinder学习–整合SpringMVC介绍的不错，内容很详细，可是我们用的是Spring boot，这就蛋疼了，加上CKeditor不熟悉，走了一些弯路，搞了好久，参考一些前辈的文章 index.html中引入ckeditor.js。 <script th:src="@{/<em>ckeditor</em>/<em>ckeditor</em>.js}"></script> config.js是默认导入的，参考ckeditor.js。 ? 参考 基于spring-boot的web应用，ckeditor上传文件图片文件 代码示例
django-ckeditor 安装 $ pip install django-ckeditor 注册 # settings.py ... # Application definition INSTALLED_APPS \Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\ 目录中，名称是 codesinppet 配置 在 settings.py 中添加自己的 ckeditor 配置，如下 # settings.py ... # ckeditor CKEDITOR_CONFIGS = { # 将这份配置命名为 my_config 'my_config 没有自带的，只需要在网上把插件下载到 ckeditor\static\ckeditor\ckeditor\plugins\ 目录中，再进行配置即可。 highlight.pack.js 就是需要引用的 js 库(可在“…\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\codesnippet
for item in items: ${HTMLParser.HTMLParser().unescape(item.comment)} % endfor 坑2：老版本的的django和ckeditor 兼容性不好，导致后台在是使用富文本编辑器类似ckeditor保存数据时会自动添加html标签，用新版本1.11以上的django和ckeditor未发现此问题。 解决方法： 修改ckeditor的config.js文件 /** * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license */ CKEDITOR.editorConfig = function ; // config.shiftEnterMode = CKEDITOR.ENTER_BR; // // config.uiColor = '#AADC6E';
不过还好最终找到了ckeditor5，颜值和功能都很让我满意，比较恶心的就是文档只有英文的，而且整个api的文档，根本不知道该看哪。 在耗费了一天的功夫看文档以后，我决定还是自己来整理一份速查手册类似的文档，以方便大家如果有使用富文本编辑器的需要，也可以有一个参考。这里是ckeditor5系列文章的第一篇《基础使用》。 ckeditor5-基础使用 其实ckeditor是一个老项目了，但是相对于其他的编辑器，它是一直在保持更新的，目前最新的版本就是ckeditor 5，这里以经典编辑器样式（Classic Editor npm install --save @ckeditor/ckeditor5-build-classic # Or: npm install --save @ckeditor/ckeditor5-build-inline # Or: npm install --save @ckeditor/ckeditor5-build-balloon # Or: npm install --save @ckeditor/ckeditor5
'ckeditor', # 富文本编辑器 'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ] # 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS /django_1.11.16_py3/lib/python3.5/site-packages/ckeditor/static/ckeditor/ckeditor/ 在js路径前加上域名，否则服务器会在 /ckeditor/ckeditor.js"></script> 4、在vue变量的mounted方法中加入 let vm = new Vue({ ... }, }); 5、后端设置总路由，'ckeditor_uploader.urls'中会将接收到的请求进行csrf校验免除，并限制了只有登录用户才可以上传图片，ckeditor默认应用的是django-admin /', include('ckeditor_uploader.urls')), # 为富文本编辑器添加总路由 # url(r'^ckeditor/upload/', ImageUploadView.as_view
文档服务（DS）由腾讯云数据万象提供，支持多种类型的文件生成图片或 html 格式的预览，可以解决文档内容的页面展示问题，满足多端的文档在线浏览需求。同时，还提供文本隐私筛查能力，可以有效识别文本中的身份证号、手机号等敏感数据，满足数据可用性和隐私保护的各种要求。
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
命令行工具
SSL 证书