最近在找一个富文本编辑器,找来找去,不是太丑,就是太过于陈旧,不利于在vue或者其他js前端框架中移植。不过还好最终找到了ckeditor5,颜值和功能都很让我满意,比较恶心的就是文档只有英文的,而且整个api的文档,根本不知道该看哪。在耗费了一天的功夫看文档以后,我决定还是自己来整理一份速查手册类似的文档,以方便大家如果有使用富文本编辑器的需要,也可以有一个参考。这里是ckeditor5系列文章的第一篇《基础使用》。
其实ckeditor是一个老项目了,但是相对于其他的编辑器,它是一直在保持更新的,目前最新的版本就是ckeditor 5,这里以经典编辑器样式(Classic Editor)来做介绍,其他(Inline, Ballon,Document)与此相同。
官方提供三种方式安装:
CDN结构:<script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/ckeditor.js"></script>
其中的version.number,distribution需要替换成你要使用的版本号和编辑器类型,版本号请到官网查询,编辑器类型可以参照下面:
这个没有什么好说,直接执行npm命令即可。
npm install --save @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-build-inline
npm install --save @ckeditor/ckeditor5-build-balloon
npm install --save @ckeditor/ckeditor5-build-decoupled-document
快速在自己的网页里放入编辑器还是比较简单的,只需要以下一个步骤:
<textarea name="content" id="editor"></textarea>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => { console.error( error ); } );
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<textarea name="content" id="editor">
<p>This is some sample content.</p>
</textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => { console.error( error ); } ); </script>
</body>
</html>
这样,ckeditor5就出现在我们的页面中了~~~
文章作者ianzhi,原文地址:https://cloud.tencent.com/developer/article/1476862
文章版权归作者所有,转载请保留此声明。