CKEditor4+CKFinder3(php版本)安装及配置方法

10/18 07:57
阅读数 20

目录

介绍CKEdiotr4+CKFinder3

安装

使用

配置 

 


  • 介绍CKEdiotr4+CKFinder3

CKEditor4是一个强大的富文本编辑器,这是国外开源,功能非常齐全,大部分基本满足需求,插件扩展功能强大。 但是访问官方速度有点慢,因为它是国外嘛!!!全都是英文,看不懂英文的话浏览器应该有自带翻译即可。

CKFinder3主要用于一个文件上传器功能的插件,上传图片、视频、文档等都支持的,非常有好处就是它拥有自带Ajax文件管理器,不需编写关于ajax的代码,能提供文件夹树形结构,选择好图片后只要一点击上传服务器即可,相当于把你的图片已经放在Ajax文件管理器里。它的功能非常强大,比如可以删除、上传、下载等一些功能,用起来非常方便!

  • 安装

1.CKEditor4官方下载链接:

https://ckeditor.com/ckeditor-4/download/

我选择是全包的共有72个插件并下载:

2.CKFinder3官方下载链接:

https://ckeditor.com/ckfinder/download/#php

这个CKFinder3支持三种编程语言分别是php、.net及java,我一般写后端都是php,因此选择php版本,然后选择下载ZIP。

 

  • 使用

1.CKEditor4

 下载好之后,如何把这富文本编辑器放入网页中呢?

 首先在编写html代码:

<!--富文本编辑器-->
<textarea id="editor" name="editor"></textarea>

为什么要用<textarea>元素,而不用<div>元素呢?因为它本来是文本域,但是对于终端来说,文本域是不可见的,为了生成富文本编辑器的实现,所以必须要用<textarea>元素。

因为它本身是js应用程序,所以需要去加载它,需要在html中引入一个js文件。注:前提是安装好CKEditor的目录,需要根据你CKEditor4的目录路径的不同而不同,路径文件一定要正确:

<script type="text/javascript" src="../../lib/ckeditor/ckeditor.js"></script>

这个是不可缺少的核心,所以需要调用CKEDITOR.replace办法,否则显示不了,切记!

<script>

      CKEDITOR.replace( 'editor' );

</script>

最后实现出来了,OK!如下:

2.CKFinder3

下载好之后,这个使用比较简单,因为它本身是一个插件而已,如何快速地使用?

首先找到文件路径ckfinder->ckfinder.html并打开网页,如果遇到出现这个问题,如下:

这个意思是本身安全的原因,文件管理器被禁用了

怎么解决?首先找到文件路径ckfinder->config.php并打开,把第29行的flase改成true:

以上的部分内容,如果没问题的话,可忽略。

最后,ckfinder即可正常使用。注:前提是必须要开服务器(php)的环境下,保证能够正常使用,否则就会报错的信息。

  • 配置

1.CKEditor4

       如果你觉得富文本编辑器的工具栏插件太多,或者没必要的插件,这个本身可支持自定义的插件。怎么操作去定制?如下:

      首先找到路径文件ckdeitor->samples->index.html并打开;打开后,点击”TOOLBAR CONFIGURATOR”:

点击后看到如下:

这就是定制的工具栏编辑器,你觉得没必要的插件可取消打勾;有必要的插件可打勾。

如果你觉得定制的工具栏没问题的话,可以点击“Get toolbar config”。

点击后就会整个代码出来,然后把它复制到ckeditor->config.js里面去。

CKEDITOR.editorConfig = function( config ) {
	config.toolbarGroups = [
		'/',
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		'/',
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];

config.removeButtons = 'Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,PageBreak,Maximize,ShowBlocks,About,CreateDiv,Blockquote,Outdent,Indent,BidiLtr,BidiRtl,Unlink,Anchor,Language,PasteText,PasteFromWord,Paste,Preview,Print,Flash';
};

如上的就是配置分组是由toolbarGroups设置定义的。如果还要再定制的话,可按照以上的操作步骤。

因此,这就是开发人员最常用的需求。

2. CKFinder3

 上传图片或视频是我们最常用的,如何去配置它的接口呢?这个配置很简单,需要去写接口即可,把这个接口的代码复制到ckeditor->config.js,添加如下:

config.filebrowserBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl ='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

以上的URL值需要根据你的ckfinder路径文件位置,切记,路径文件一定要正确!!!

最后把CKEditor4+ CKFinder3整合,大功告成!用起来是不是很简单?

如有问题,欢迎可留言!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部