由于项目以前用的是Simditor编辑器,顾客不满意,要求用Ckeditor编辑器,Ckeditor分为:Ckeditor4与Ckeditor5,经过全盘考虑+兼容,最终选择用Ckeditor4编辑器比较好。
Ckeditor4也是一款非常好的HTML编辑器。先给大家展示一下我最终实现的功能,自带的功能我就不多说了,我就说一些与众不同的功能。
1、表格。
2、插入代码段:语法高亮+编程语言选择。
3、可以直接在编辑器内调整插入的图像的大小,是正比缩略。
4、自动保存与字数统计。
一、Ckeditor4 下载
官方下载网址:https://ckeditor.com/ckeditor-4/download/
下载的时候,建议大家选择“Full Package”,如果你想私人定制,又不怕踩坑的话,就选择“Customize”。
由于我用的是私人定制,很多插件以及相应的配置我都设置好了,效果就如上面所说的那样,如果你也想拥有这些功能,下面我将分享给大家:
百度网盘下载链接: https://pan.baidu.com/s/1sO35EV7xMOIg_7dvzOjiQA
提取码: k8yg
解压密码:www.fujieace.com
如果网盘链接有失效,请评论区留言或Q上主动联系我!
二、Ckeditor4 安装
主要是把ckeditor4部署到我们的应用程序中去。
第一步:将ckeditor4解压,并将整个文件夹放到网站资源目录下。
例如:网站根目录/admin/ckeditor4
第二步:在要添加ckeditor的网页head头部引入ckeditor.js。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台管理系统 - 付杰博客</title>
<script src="/admin/ckeditor/ckeditor.js?x61917"></script>
</head>
第三步:创建经典编辑器。
重点看textarea与JS代码,那里很重要。
filebrowserBrowseUrl与filebrowserUploadUrl这是编辑器自带集成的CKFinder文件管理器+上传路径。
filebrowserWindowWidth与filebrowserWindowHeight是设置CKFinder文件管理器的宽与高。
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">正文内容</label>
<div class="layui-input-block">
<textarea name="contents" id="editor1" rows="10" cols="80"></textarea>
</div>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor 4
// instance, using default configuration.
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserWindowWidth: '80%',
filebrowserWindowHeight: '70%'
} );
editor.on( 'change', function( evt ) {
CKEDITOR.instances.editor1.updateElement();
//console.log(evt.editor.getData());
//console.log( document.getElementById( 'editor1' ).value ); // The current editor data.
});
</script>
三、Ckeditor4 使用
编辑器虽然显示出来了,但是想要好好的使用还不是那么的简单?请看下面的知识:
1、JS获取编辑器的内容,获取值
CKEDITOR.instances.editor1.getData();
或
document.getElementById( 'editor1' ).value
注意:如果想要时实更新获取编辑器的内容,必须要先更新,需要用以下代码:
CKEDITOR.instances.editor1.updateElement();
这也就是为什么,我最上面的代码需要用上change事件。
2、赋值
CKEDITOR.instances.editorid.setData();
友情提示:
很多新人在使用 CKEDITOR.instances.editor1.getData(); 的时候,有时候会出现获取不到值,那是因为你没有利用事件来触发获取值,不能直接获取的。
2024年01月30日 10:44:53 沙发
大哥,百度网盘下载的文件解压需要密码,可是密码在哪儿呢~~
2024年02月01日 14:58:15 1层
@熊熊 解压密码一般是以下这个网址:www.fujieace.com