CKEditor配置使用
涉及到网页文本编辑那就少不了一款好用的富文本编辑器。网上一搜可以找到很多富文本编辑器。这里我整理了一些:
UEditor http://ueditor.baidu.com/website/
KindEditor http://kindeditor.net/
TinyMCE https://www.tinymce.com/
Simditor http://simditor.tower.im/
Wangeditor  http://www.wangeditor.com/
xhEditor http://xheditor.com/
QuillEditor https://quilljs.com/ (实测需要梯子, 不过好东西用下梯子又何妨 :) )

上面以及给出的列表已经很齐全了,每个编辑器我都体验了一下DEMO【每个编辑器官网都有DEMO】,总体来说还是比较好用的。有些讲究大而全,有些讲究小而美。也就是说,功能齐全一般意味着大体积,功能简洁自然对应小体积。至于选择大而全还是小而美就得个人看喜好及需求了。不过上面说到的功能少并不是指缺少很多功能,总之常用的自然是有的。

那么讲了那么多还是回归今天的主角吧。CKEditor https://ckeditor.com/
我觉得还是比较好用的,配置也挺方便。之所以选择这个,并不是说上面推荐的不好,这个完全看个人喜好了。只是觉得这个用起来比较顺手,说到顺手你就应该明白了,这种东西真是因人而异。

要使用CKEditor,首先需要下载资源包,打开其官网,然后点击Download,之后会跳转到一个版本选择页面,上面会有几个选项,类似下图:
  文章正文图片
默认会推荐你下载标准版,但是经过我的测试,标准版默认是不集成文字颜色组件的,所以有文字颜色需求的慎下。基础版自然不必说。那么想要文字颜色之类的相对高级的东西该怎么办呢?这里有两条路:(1)选择下载完整版,(2)选择自己搭配。

如果你的服务器宽带足够快,或者你不在乎加载时间等等,那么你可以下载完整版(注意:完整版并不是指包含所有插件,你可以点击 Compare packages 查看三个版本的不同。如果有需求的话,许多插件还是需要自己下载的)。

接下来说说剩下的自由定制版,这个版本比较自由,想要啥功能完全在个人,这也是我比较推荐的方式。点击Online builder,然后会跳转到builder页面,主要有三步:
第一步:选择在哪个版本之上进行构建(Basic, Standard, Full)。我习惯选基础版。
第二步:选择所需的功能(插件)及皮肤。功能选择和删除只需选中后点击中间的箭头即可。
  文章正文图片
第三步:选择语言。这一步不必多解释(默认是英文,且英文必选)。

另外,自由定制也可根据已经存在的配置文件进行。我挑选了几个我认为比较常用的功能,这里分享一下我的配置文件:点击下载

当然,可以对我提供的配置列表进行定制,比如我没有将Markdown插件集成在内,需要的可以自行在官网搜索下载。

只需在第一步下面选择 “Upload build-config.js” 上传配置文件即可。如下:
文章正文图片

完成定制就可以下载了。下载完成后会得到一个压缩包,解压会得到如下目录:
文章正文图片

我们只需要关心config.js,我们进行配置都在里面完成。至于builder-config.js只是对当前定制信息的一个存储,方便再次下载,修改其并不会影响当前编辑器。

另外,我上面提供的配置文件其中包含了代码高亮的插件,其依赖于highlight.js。可以打开如下目录:ckeditor\plugins\codesnippet\lib\highlight。里面便是highlight相关的东西。之所以要提到这个东西,是因为其集成的highlight.js可能不是最新版,一些主题并不能在里面找到,所以我们可以去highlight.js官网下载相关资源(css主题资源)放入Style文件夹即可。

至于配置,我提供几点推荐配置的。如下:
//禁止大小调整
config.resize_enabled = false;

//宽高设置
config.width=900;
config.height=900;

//设置换行模式,不在此模式可能出现按一下空格多一个空行的情况
config.enterMode = CKEDITOR.ENTER_BR;

//代码高亮主题设置。 名称即为highlight/styles里面的主题名
config.codeSnippet_theme = 'gruvbox-dark';
将以上代码添加至config.js即可。

做完上面的工作,接下来就是实测了:
前端测试代码:
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
</head>
<body>
    <textarea class="ckeditor" id="ckeditor"></textarea>
</body>
</html>


值得注意的点
有时候需要动态地加载编辑器,比如AJAX刷新局部页面需要一个编辑器,那么此时就需要我们手动调用替换方法:在DOM元素加载完之后调用如下语句。“ckeditor”为要渲染的textarea的id。【替换有内容的textarea同样如此操作,即先把内容放入原生textarea, 然后调用如下方法即可】
CKEDITOR.replace("ckeditor");
在获取编辑器内容时,如果不采用传统的表单提交方式,而是用js提取的话,就需要如下操作;
CKEDITOR.instances.ckeditor.getData()
同样,这里的ckeditor是textarea的id。

以上只是简单的配置教程,一篇笔记是无法将清楚地讲解清楚的,并且很多东西我还没有探索到,不过好在官网有详尽的文档,相信你能在那找到你想要的。若您对以上内容有不同看法,欢迎给我留言,共同学习进步!
 
It's
欢迎访问本站,欢迎留言、分享、点赞。愿您阅读愉快!
*转载请注明出处,严禁非法转载。
https://www.devsong.org
QQ留言 邮箱留言
头像
引用:
取消回复
提交
涂鸦
涂鸦
热门