概览 ckeditor 5构建版本是一些被准备好的富文本编辑器的集合。每一个“构建版本”提供一个包含一系列特性和一个默认配置的编辑器。...它适用于创建用于打印或者导出为PDF文件的文档。 ? 在线试用,请点击document编辑器示例。查看快速开始来使用它。 自定义构建 每一个构建版本都默认带有一些特性和他们默认的配置。...下面是一些公共用例: 在内容管理系统中: 写文章或者网站内容的表单 在线编辑页面前端样式 评论 在商场和自动销售应用中: 发送一个邮件活动 创建模板 在论坛应用中: 创建主题和回复 在团队合作应用中: 创建共享文档...,你应该使用ckeditor4: :需要做旧浏览器适配的时候 如果ckeditor4包含你需要的特性,但是ckeditor5还没有的时候 如果ckeditor4已经在你的应用中使用,并且你还没有准备好去用...ckeditor5替换它的时候 下面的用例,你应该使用消息: 当你需要一个简单的方式在你的应用中实现创建满足以下特性的文章和文档: 实时共享书写 在线评论和讨论内容 高级书写特性 文章作者ianzhi,
编辑器构建版本(这里使用的CDN): <
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入口点脚本就可以了: 当CKEditor脚本加载后,你可以使用API在你的页面中创建编辑器
不像CKEditor 4, CKEditor 5实现了自定义数据模型。这意味着加载到编辑器中的每个内容都需要转换为该模型,然后再渲染回视图。 每种内容都必须由某些功能处理。...一旦你这样做,CKEditor 5将不会过滤任何东西。 如何打开源代码模式? 如何编写源代码模式插件? 由于编辑器中使用的自定义数据模型,源代码模式在CKEditor 5中没有意义。...CKEditor 5提供了丰富的JavaScript API和随时可用的构建,使您可以在任何需要的框架中使用CKEditor 5。 随着时间推移,我们会逐渐提供更多的官方集成。...这就是为什么我们不提供类似于我们在CKEditor 4中提供的完整编辑器包的原因。 同时,我们建议您安装插件以启用其他功能,甚至创建自定义版本以确保您充分利用CKEditor 5。...了解更多信息请参考使用webpack构建CKEditor 5。
增强用户体验 ckeditor5努力打造无缝、专注的编辑体验让用户去专注于创作内容。 更好的图片展示 插入图片到内容中是非常直观的,在用户体验上隐藏了所有的技术方面(上传,重置大小)。...增强的经典编辑器 对于CKEditor 5,我们重新设计了“盒子”编辑器的概念。 全新的工具栏 当用户向下滚动页面时,工具栏现在总是可见。...高度可定制 CKEditor 5 构建版本基于CKEditor 5 框架,提供了强大的可定制性和可扩展性。 自定义数据模型 为CKEditor 5设计了一个更高效的数据模型。...协作编辑 自定义数据模型的另一个重要优点是,通过引入“操作”和“操作转换”的概念,为在CKEditor内实现实时协作编辑提供了一种可能。...Letters是使用CKEditor 5的强大协作功能的应用程序示例。 ? 更现代化 CKEditor 5使用了ECMAScript 2015(也称为ES6)提供的强大模块功能完全重写。
它们被定义为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 文章版权归作者所有
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 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。...假设你选择了@ckeditor/ckeditor5-build-classic: npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5.../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"> 使用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
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组成。 目前,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表单自动集成 这是集成编辑器的经典方式。... 请注意,在提交之前,CKEditor会自动更新替换后的元素。...如果您需要随时使用JavaScript从CKEditor获取实际数据,请使用editor.getData()方法,如下一节所述。...为此,您需要将引用存储到编辑器中,因为 - 与CKEditor 4不同 - 没有全局CKEDITOR.instances属性。
前言 本文主要使用CKEditor4版本 CKEditor4 下载地址 https://ckeditor.com/ckeditor-4/download/ 官方文档 https://ckeditor.com.../docs/ckeditor4/latest/guide/dev_installation.html CKEditor5 下载地址 https://ckeditor.com/ckeditor-5/download.../ 官方文档 https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html 该编辑器有以下几种模式.../ckeditor/ckeditor.js"> 页面中 <textarea id="editor" rows="10" cols...'ckeditor4-vue'; Vue.use(CKEditor); 页面中 <ckeditor class="warp_editor
CKEditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。...CKEditor编辑器界面中的字体选项里暂时没有中文字体。...可按如下方法添加: 打开CKEditor目录里的config.js,找到下面这段代码: CKEDITOR.editorConfig = function( config ) { … }; 在其中,...= ‘宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;’ + config.font_names; 保存后,字体选项里就可以用中文字体了
Install Sanic:python3 -m pip install sanic example
bind_port = 6000 通过 ssh 访问内网机器,假设用户名为 test: ssh -oPort=6000 test@127.0.0.1 功能说明 配置文件 由于 frp 目前支持的功能和配置项较多,未在文档中列出的功能可以从完整的示例配置文件中发现...欢迎对说明文档做出改善,帮助更多的人使用 frp,特别是英文文档。 贡献代码请提交 PR 至 dev 分支,master 分支仅用于发布稳定可用版本。
下面是被支持后端使用的注册URI和它们的特性文档。
ROS (Robot Operating System, 机器人操作系统) 提供一系列程序库和工具以帮助软件开发者创建机器人应用软件。它提供了硬件抽象、设备驱动...
地址:https://github.com/taishan1994/DGL_Chinese_Manual
TKVERN 翻译 | 源文档链接FlowRouter (如果你发现翻译中存在谬误的地方, 请留言, 我会继续造福社会....建议结合源文档查看翻译) 为Meteor精心设计的客户端Router FlowRouter 是 Meteor 一个非常简单的路由器.它为客户端程序routing,不处理渲染本身....更多关于 check 信息的文档, 查看 docs. Server Side Routing FlowRouter 是客户端 router 它不支持服务的路由.
领取专属 10元无门槛券
手把手带您无忧上云