精品推荐:【CKEditor】全球最优秀的网页在线文字编辑器之一

bigdata 2018-12-21 14:00:42 ⋅ 100 阅读

CKEditor简介

CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。

可配合使用的扩展有 文件管理器KCFinder

KCFinder 文件管理器

KCFinder 跟 CKFinder 类似,是 CKEditor 的一个开源文件管理器插件,通过该插件可上传和对包括图片、Flash动画以及其他文件进行你个浏览和管理。

KCFinder文件管理器

CKEditor 的使用

1. CKEditor 官网下载js插件

进入官网https://ckeditor.com/ckeditor-5/download/


由上图所示,官方提供了3中下载方式:

  • nam 下载:

npm install --save @ckeditor/ckeditor5-build-classic
  • Zip打包下载
    直接点击 Download 难下载

  • CDN在线引用

<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>

备注:目前最新版本v11.2.0

2. CKEditor 安装使用

引入CKEditor的js文件

<!--引用自己相对应的地址-->
<script src="ckeditor.js"></script>

页面中使用CKEditor

<!--在需要使用编辑器的地方插入textarea标签 -->描述:
<div id="editor"> </div>
<!--将相应的控件替换成编辑器代码 -->
<script type="text/javascript">   ClassicEditor        .create( document.querySelector( '#editor' ), {            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]        } )        .then( editor => {                      window.editor = editor;        } )        .catch( err => {                        console.error( err.stack );        } );
</script>

HTML具体示例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link type="text/css" href="sample/css/sample.css" rel="stylesheet" media="screen" />
    <title>CKEditor 5 – classic editor build sample</title></head><body><main>
    <div class="centered">
        <div id="editor">
            <h2>The three greatest things you learn from traveling</h2>

            <p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>

            <h3>Appreciation of diversity</h3>

            <p>Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing <a href="https://en.wikipedia.org/wiki/Cultural_diversity">cultural diversity</a> in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>

            <figure class="image image-style-side"><img src="sample/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
                <figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
            </figure>

            <h3>Confidence</h3>

            <p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>
        </div>
    </div>
</main>
<script src="ckeditor.js"></script>
<script>    ClassicEditor        .create( document.querySelector( '#editor' ), {            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]        } )        .then( editor => {            window.editor = editor;        } )        .catch( err => {            console.error( err.stack );        } );
</script>
</body>
</html>

展示效果


CKEditor 特点

  • 高扩展性和可用性

  • 新的数据模型

  • ES6支持


---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    文本编辑器CKEditor 4.14.1 发布,优化编辑器和表格大小

    CKEditor是新一代FCKeditor,是一个重新开发版本,CKEditor全球优秀网页在线文字编辑器之一

    「开源资讯」Atom 1.52.0 和1.53.0-beta0发布,跨平台文本编辑器

    Atom 同时发布了 1.52.0 和 1.53.0-beta0 版本。Atom 是 GitHub 专门为程序员推出一个跨平台文本编辑器。具有简洁和直观图形用户界面,并有很多有趣特点:支持

    CKEditor 5 v23.1.0 发布,支持嵌入 Raw HTML

    CKEditor 5 v23.1.0 稳定版已发布,主要更新内容包括:支持在编辑器嵌入原生 HTML 代码并进行渲染、改进 reconversion API 以及支持将表格内容粘贴到另一个表格

    推荐一款功能强大,开源免费H5可视化编辑器

    H5-Dooring 是一款功能强大,开源免费H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发. 预览

    连续三年蝉联第一,Flink 荣膺全球活跃 Apache 开源项目(附课程)

    2020年,一个注定会被历史铭记一年。在全球化合作受到挑战大环境下,作为全球开源软件基金会,Apache 软件基金所引领开源社区,依然汇聚了全球顶尖开发人员,交出了一份鼓舞人心成绩单

    精品推荐:一览GitHub上受程序欢迎5大Java开源项目

    列举了GitHub上一些流行Java项目。从Mockitos到Guava,以及 java-design-patterns等供大家学习。

    精品推荐:Tomcat优化总结(实战版)

    Tomcat是我们经常使用 servlet容器之一,甚至很多线上产品都使用 Tomcat充当服务器。

    10个优秀代码注释

    致终于来到这里勇敢人。神奇。勿动。

    VUE 开源库收藏版(一):史上全面学习资源 ,附GitHub源码地址

    VUE 开源库收藏版(一):史上全面学习资源 ,附GitHub源码地址

    Web 富文本编辑器 Neditor 2.1.9 ,支持 vue 和 angular

    简介Neditor 是基于 ueditor 更现代化文本编辑器,支持HTTPS。

    CKEditor 5 v26.0.0 发布:具有可扩展构建、内联部件样式和注释指南

    CKEditor 5 v26.0.0 已经发布,本次更新包括支持创建一个定制编辑器构建、Mac上按键管理、设计内联部件、编辑器占位符和一组关于使用协作特性注释新指南等内容。 通过 DLL

    Atom 1.56.0 发布,GitHub 官方文本编辑器

    Atom 是由 GitHub 开发自由及开放源代码文字与代码编辑器,支持 macOS、Windows 和 Linux 操作系统,支持 Node.js 所写插件,并内置由 Github 提供

    【开源推荐】基于 Go 语言轻量级高性能日志库 logit使用及测评

    logit 是一个简单易用并且是基于级别控制日志库,可以应用于所有 GoLang 应用程序中。

    精品推荐:历时7天,精心整理了16个各领域全网盘搜索工具

    1.鸠摩搜书https://www.jiumodiary.com/一个强大搜书神站,无论是什么类型书籍,

    精品推荐优秀跨平台Redis可视化客户端工具—RedisViewer

    自荐RedisViewer一个有情怀跨平台Redis可视化客户端工具

    精品推荐:微信平台反编译找回丢失小程序源码

    这篇文章是总结了一下公司后台开发经验,之前电脑系统突然就坏掉了,电脑里小陈需源码也丢失了,怎么找回呢?

    Textadept 11.0 发布,极简主义跨平台文本编辑器

    Textadept 是一个快速、极简主义和可扩展跨平台文本编辑器。使用 C 编写非常轻量级代码库,依赖于 Lua 可扩展性。编辑器可以在图形环境(GTK2)和 CLI 环境