ckeditor使用----跳坑之旅

Ckeditor

基本介绍

CKEditor 5 Builds是一组即用型富文本编辑器。
本次使用背景是基于对现有富文本编辑器产品换基础上进行替换（项目之前使用的是weboffice商用收费的）鉴于本项目产品话成本考虑进行替换。

基本使用介绍

在大多数接触新功能之前，我们常常要做的就是写Demo，看一下现有的效果能否满足现有的产品功能。
ckeditor5官网
入手的方式建议先引入cnd的方式进行功能里了解，第二是利用在生成的方式，如果在此期间需要什么功能在进行npm相关插件，然后build为成压缩包在进行引用，建议从CKEditor5官方Github下载。CKEditor5有多个版本，我使用的是从github下载的ckeditor5-build-classic版本。

使用案例

官网文档要了解一下，官方教程有CDN，npm， Zip download三种获取方式，

1. 首先使用cnd初步了解

<html lang="en">
<head><meta charset="utf-8"><title>CKEditor 5 – Classic editor</title>// cdn 引入<script src="https://cdn.ckeditor.com/ckeditor5/23.1.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. 使用在线生成的方式
按着官网上面的操作步骤，依着经典版为例子：

选择经典模式

在这可以选择你想要的功能项

添加调整位置

记得语言选择成中文简体

最后进行在线生成打包：

打开文件之后，文件引入的ckeditor.js是打包之后的

如项目需要一些其他功能，要进行组件安装

npm --save–dev @ckeditor.xxxx
检查相关组件在package.json安装成功之后在非压缩状态的ckeditor.js中进行引入，使用。
对配置之后的状态记得进行npm run build 打包使用即可

也可以在github库里面进行克隆应用

ckeditor使用----跳坑之旅相关推荐

能量视角下的GAN模型：GAN＝“挖坑”＋“跳坑”
作者丨苏剑林单位丨广州火焰信息科技有限公司研究方向丨NLP,神经网络个人主页丨kexue.fm 在这个系列中,我们尝试从能量的视角理解 GAN.我们会发现这个视角如此美妙和直观,甚至让人拍案叫绝 ...
React Native微信支付开发爬坑之旅
早闻微信支付一直为移动开发者所诟病,这次公司项目新增微信支付需求,一试果然是一把辛酸泪,从配置到与后台调试真是一波三折,整整花了一天的时间才从坑里爬出来,效率也是低.所以有必要做下总结,日后再有微信支 ...
WebBrowser，挖坑，跳坑，填坑
最近在 C# Asp.net 平台上的一个项目中用到了 WebBrowser 控件.自然而然就进入了一连串的坑了.用网络上一同行的话"用WebBrowse,就是在给自己挖坑". ...
react-native-webrtc之采坑之旅
目标 1.实现APP与WEB端安全帽功能通过摄像头的实时通信,再web端可以查看手机摄像头获取的图像,手机上也可实时显示画面: 2.连接.下线 3.切换分辨率.前后摄像头使用的相关工具(没有一个不踩 ...
Jenkins项目实战之-MacOS High Sierra自动化打包方案的填坑之旅
前面我介绍了如何在android和iOS实现公司内部app的自动化打包构建的过程.这里写一个关于这个app自动化打包平台从想法到实践再到放机房平稳运行的一个回忆录.总的来说,在jenkins上实现an ...
重装win10系统+Ubuntu16.04的踩坑之旅（联想拯救者r720）
重装win10系统+Ubuntu16.04的踩坑之旅(联想拯救者r720) 碎碎念:原本双系统用得很开心的,在手贱删了Ubuntu系统的某些隐藏文件之后导致Ubuntu系统不能正常使用,在某种程度强迫 ...
【填坑之旅】手把手教你如何用AndroidStudio上传自己的library到Jcenter库
[填坑之旅]手把手教你如何用AndroidStudio上传自己的library到Jcenter库前言:我们在使用AndroidStudio的时候,会经常用到第三方的代码库.引入第三方库的方式无非就是 ...
Vue 爬坑之旅 -- 微信网页授权
现在的 H5 开发,微信授权和微信分享基本是必备功能,昨天将微信分享的相关功能和踩坑过程做了一个总结,今天就来说下微信授权的功能具体到 vue 项目中该要怎么做. Vue 爬坑之旅 – history ...
Android爬坑之旅：软键盘挡住输入框问题的终极解决方式
本文由BarryZhang原创,同一时候首发于diycode.cc.barryzhang.com .github.com/barryhappy.非商业转载请注明作者和原文链接. 前言开发做得久了.总 ...
React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...

ckeditor使用----跳坑之旅

Ckeditor

基本介绍

基本使用介绍

使用案例

1. 首先使用cnd初步了解

ckeditor使用----跳坑之旅相关推荐

最新文章

热门文章