首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

php版本CKEditor 4和CKFinder安装及配置方法图文教程

Posted in PHP onJune 05, 2019

本文实例讲述了php版本CKEditor 4和CKFinder安装及配置方法。分享给大家供大家参考，具体如下：

下载并解压CKEditor 4和CKFinder

CKEditor 4下载地址：https://ckeditor.com/cke4/builder，选择自定义的版本，记得加上中文语言包

CKFinder下载地址：https://download.cksource.com/CKFinder/CKFinder%20for%20PHP/3.4.4/ckfinder_php_3.4.4.zip

查看CKEditor的示例文件，http://127.0.0.1/ckeditor/samples/

php版本CKEditor 4和CKFinder安装及配置方法图文教程

根据你的需求选择自定义工具栏，选好之后点击Get toolbar config，把这个配置代码复制，备用

在CKEditor 4同级目录新建index.html，和myconfig.js

php版本CKEditor 4和CKFinder安装及配置方法图文教程

index.html的源代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor Sample</title>
    <!-- 加载ckeditor.js -->
    <script src="./ckeditor/ckeditor.js"></script>
</head>
<body id="main">
    <textarea name="editor1" id="editor1" cols="30" rows="10">
        这是一个CKEditor测试
    </textarea>
<script>
    // 这样就可以使用啦
    CKEDITOR.replace('editor1',{
        //toolbar : 'Basic',      //方式1，在此直接写配置
        //uiColor : '#9ab8f5'
        customConfig : '../myconfig.js' //方式2，加载配置js，相对于ckeditor.js的路径
    });
</script>
</body>
</html>

myconfig.js的源代码为：

//特别注意，每次修改都要ctrl+f5 清除缓存后查看
CKEDITOR.editorConfig = function( config ) {
  config.language = "zh-cn" ; //语言，对应ckeditor下的lang文件夹
    config.uiColor = '#9ab8f5';  //编辑器颜色
    config.width = '900';     //编辑器宽
    config.height = '500';    //编辑器高
    //自定义工具栏，刚才从示例哪里复制的代码
    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 = 'NewPage,Save,Preview,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,SelectAll,Scayt,HiddenField,Form,Radio,TextField,Textarea,Select,Button,ImageButton,Outdent,Indent,Subscript,Superscript,Strike,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,ShowBlocks,About,Source';
    //ckfinder的相关配置项
    config.filebrowserBrowseUrl = './ckfinder/ckfinder.html' ;
  config.filebrowserImageBrowseUrl = './ckfinder/ckfinder.html?type=Images' ;
  config.filebrowserFlashBrowseUrl = './ckfinder/ckfinder.html?type=Flash' ;
  config.filebrowserUploadUrl = './ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files' ;
  config.filebrowserImageUploadUrl = './ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images' ;
  config.filebrowserFlashUploadUrl = './ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' ;
  config.filebrowserWindowWidth = '600';   //文件浏览宽
  config.filebrowserWindowHeight = '300';   //文件浏览宽
};

网上搜索有同学总结了最全的配置项，详见附录说明

图片上传，点击浏览服务器，会出下面的提示

php版本CKEditor 4和CKFinder安装及配置方法图文教程

修改ckfinder文件夹下config.php，将29行的return false;改为return true;

php版本CKEditor 4和CKFinder安装及配置方法图文教程

ckfinder即可正常使用，上传图片的默认保存位置为根目录下的ckfinder->userfiles->images。

附：CKEditor基本配置示例

CKEDITOR.editorConfig = function( config )
{
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.filebrowserBrowseUrl = '/CKEditorAndCKFinder/ckfinder/ckfinder.html' ;
  config.filebrowserImageBrowseUrl = '/CKEditorAndCKFinder/ckfinder/ckfinder.html?type=Images' ;
  config.filebrowserFlashBrowseUrl = '/CKEditorAndCKFinder/ckfinder/ckfinder.html?type=Flash' ;
  config.filebrowserUploadUrl = '/CKEditorAndCKFinder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;
  config.filebrowserImageUploadUrl = '/CKEditorAndCKFinder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;
  config.filebrowserFlashUploadUrl = '/CKEditorAndCKFinder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
  config.filebrowserWindowWidth = '1000';
  config.filebrowserWindowHeight = '700';
  config.language = "zh-cn" ;
  //编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
  //config.skin = "v2";
  //背景颜色
  //config.uiColor = "#FFF";
  //工具栏（基础'Basic'、全能'Full'、自定义）
  config.toolbar = 'Full';
  //工具栏是否可以被收缩
  //config.toolbarCanCollapse = false;
  //工具栏的位置
  //config.toolbarLocation = "bottom";
  //工具栏默认是否展开
  //config.toolbarStartupExpanded = false;
  //取消“拖拽以改变尺寸”的功能
  //config.resize_enabled = false;
  //改变大小的最大高度
  //config.resize_maxHeight = 3000;
  //改变大小的最大宽度
  //config.resize_minWidth = 3000;
  //改变大小的最小高度
  //config.resize_minHeight = 250;
  //改变大小的最小宽度
  //config.resize_minWidth = 750;
  //当提交包含有此编辑器的表单时，是否自动更新元素内的数据
  //config.autoUpdateElement = true;
  //设置是使用绝对目录还是相对目录，为空为相对目录
  //config.baseHref = "";
  //编辑器的z-index值
  //config.baseFloatZIndex = 10000;
  //设置快捷键
  //config.keystrokes = [];
  //设置快捷键 可能与浏览器快捷键冲突
  //config.blockedKeystrokes = [];
  //设置编辑内元素的背景色的取值
  //config.colorButton_backStyle = {
  //    element : 'span',
  //    styles : {'background-color' : '#(color)'}
  //}
  //设置前景色的取值
  //config.colorButton_colors
  //是否在选择颜色时显示“其它颜色”选项
  //config.colorButton_enableMore = false;
  //前景色默认值设置
  //config.colorButton_foreStyle = {
  //    element : 'span',
  //    styles : {'background-color' : '#(color)'}
  //}
  //所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径
  //config.contentsCss = "ckeditor/contents.css"
  //文字方向
  //config.contentsLangDirection = "rtl";
  //CKeditor的配置文件 若不想配置 留空即可
  //CKEDITOR.replace("myfield",{customConfig : "ckeditor/config.js"});
  //界面编辑框的背景色
  //config.dialog_backgroundCoverColor = "rgb(a,b,c)";
  //config.dialog_backgroundCoverColor = "white";
  //背景的不透明度
  //config.dialog_backgroundCoverOpacity = 0.5;
  //移动或者改变元素时 边框的吸附距离 单位：像素
  //config.dialog_magnetDistance = 20;
  //是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持
  //config.disableNativeSpellChecker = true;
  //进行表格编辑功能 如：添加行或列 目前仅firefox支持
  //sconfig.disableNativeTableHandles = true; 默认不开启
  //设置HTML文档类型
  //config.docType = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
  //是否对编辑区域进行渲染
  //config.editingBlock = true;
  //编辑器中回车产生的标签
  //config.enterMode = CKEDITOR_ENTER_BR;
  //是否使用HTML实体进行输出
  //config.entities = true;
  //定义更多的实体
  //config.entities_additional = "#1049";
  //是否转换一些难以显示的字符为相应的HTML字符
  //config.entities_greek = true;
  //是否转换一些拉丁字符为HTML
  //cofig.entities_latin = true;
  //是否转换一些特殊字符为ASCII字符
  //config.entities_processNumerical = false;
  //添加新组件
  //config.extraPlugins = "myplugin";
  //使用搜索时的高亮色
  //config.find_highlight = {
  //    element : "span",
  //    style : {"background-color" : "#ff0", "color" : "#00f"}
  //}
  //默认的字体名
  //config.font_defaultLabel = "Arial";
  //字体编辑时的字符集 可以添加常用的中文字符：宋体、楷体、黑体等
  //config.font_names = "Arial;Times New Roman;Verdana";
  //文字的默认式样
  //config.font_style = {};
  //字体默认大小
  //config.fontSize_defaultLabel = "12px";
  //字体编辑时可选的字体大小
  //config.fontSize_sizes = "8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px";
  //设置字体大小时 使用的式样
  //config.fontSize_style = {};
  //是否强制复制来的内容去除格式
  //config.forcePasteAsPlainText = false;//不去除
  //是否强制用“&”来代替“&”
  //config.forceSimpleAmpersand = false;
  //对address标签进行格式化
  //config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };
  //对DIV标签自动进行格式化
  //config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
  //对H1标签自动进行格式化
  //config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };
  //对H2标签自动进行格式化
  //config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };
  //对H3标签自动进行格式化
  //config.format_h3 = { element : 'h3', attributes : { class : 'contentTitle3' } };
  //对H4标签自动进行格式化
  //config.format_h4 = { element : 'h4', attributes : { class : 'contentTitle4' } };
  //对H5标签自动进行格式化
  //config.format_h5 = { element : 'h5', attributes : { class : 'contentTitle5' } };
  //对H6标签自动进行格式化
  //config.format_h6 = { element : 'h6', attributes : { class : 'contentTitle6' } };
  //对P标签自动进行格式化
  //config.format_p = { element : 'p', attributes : { class : 'normalPara' } };
  //对PRE标签自动进行格式化
  //config.format_pre = { element : 'pre', attributes : { class : 'code' } };
  //用分号分隔的标签名字 在工具栏上显示
  //config.format_tags = "p;h1;h2;h3;h4;h5;h6;pre;address;div";
  //是否使用完整的html编辑模式 如使用，其源码将包含：<html><body></body></html>等标签
  //config.fullPage = false;
  //是否忽略段落中的空字符
  //config.ignoreEmptyParagraph = true;
  //在清除图片属性框中的链接属性时 是否同时清除两边的<a>标签
  //config.image_removeLinkByEmptyURL = true;
  //一组用逗号分隔的标签名称，显示在左下角的层次嵌套中
  //config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';
  //显示子菜单时的延迟，单位：ms
  //config.menu_subMenuDelay = 400;
  //当执行“新建”命令时，编辑器中的内容
  //config.newpage_html = "";
  //当从word里复制文字进来时，是否进行文字的格式化去除
  //config.pasteFromWorldIgnoreFontFace = true; //默认忽略格式
  //是否使用<h1><h2>等标签修饰或者代替从word文档中粘贴过来的内容
  //config.pasteFromWorkKeepsStructure = false;
  //从word中粘贴内容时是否移除格式
  //config.pasteFromWorkRemoveStyle = false;
  //对应后台语言的类型来对输出的HTML内容进行格式化，默认为空
  //config.protectedSource.push( /<\?[\s\S]*?\?>/g );  // PHP code
  //config.protectedSource.push( /<%[\s\S]*?%>/g );  // ASP code
  //config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi );  // ASP.Net code
  //当输入：shift+Enter时插入的标签
  //config.shiftEnterMode = CKEDITOR.ENTER_P;
  //可选的表情替代字符
  //config.smiley_descriptions = [
  //     ':)', ':(', ';)', ':D', ':/', ':P',
  //     '', '', '', '', '', '',
  //     '', ';(', '', '', '', '',
  //     '', ':kiss', '' ];
  //对应的表情图片
  //config.smiley_images = [
  //  'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
  //  'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
  //  'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
  //  'broken_heart.gif','kiss.gif','envelope.gif'];
  //表情的地址
  //config.smiley_path = "plugins/smiley/images";
  //页面载入时，编辑框是否立即获得焦点
  //config.startupForce = false;
  //载入时，以何种方式编辑 源码和所见即所得 "source"和"wysiwyg"
  //config.startupMode = "wysiwyg";
  //载入时，是否显示框体的边框
  //config.startupOutlineBlocks = false;
  //是否载入样式文件
  // Load from the styles' styles folder (mystyles.js file).
  //config.stylesSet = 'mystyles';
  // Load from a relative URL.
  //config.stylesSet = 'mystyles:/editorstyles/styles.js';
  // Load from a full URL.
  //config.stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
  // Load from a list of definitions.
  //config.stylesSet = [
  //{ name : 'Strong Emphasis', element : 'strong' },
  //{ name : 'Emphasis', element : 'em' }, ... ];
  //起始的索引值
  //config.tabIndex = 0;
  //当用户键入TAB时，编辑器走过的空格数，( ) 当值为0时，焦点将移出编辑框
  //config.tabSpaces = 4;
  //默认使用的模板
  //config.templates = "default";
  //用逗号分隔的模板文件
  //config.templates_files = ['plugins/templates/templates/default.js'];
  //当使用模板时，“编辑内容将被替换”框是否选中
  //config.templates_replaceContent = true;
  //主题
  //config.theme = "default";
  //撤销的记录步数
  //config.undoStackSize = 20;
  //config.contentsCss = "/CKEditorAndCKFinder/ckeditor/css/mysitestyles.css";
};

希望本文所述对大家PHP程序设计有所帮助。

php版本CKEditor 4和CKFinder安装及配置方法图文教程

- Author -

idjl

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
example1.php
Oct 09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
Oct 25 PHP
php的大小写敏感问题整理
Dec 29 PHP
php处理斐波那契数列非递归方法
Feb 04 PHP
php语言流程控制中的主动与被动
Nov 05 PHP
基于php上传图片重命名的6种解决方法的详细介绍
Apr 28 PHP
PHP中判断变量为空的几种方法分享
Aug 26 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
Jun 26 PHP
从零开始学YII2框架（五）快速生成代码工具 Gii 的使用
Aug 20 PHP
PHP处理会话函数大总结
Aug 05 PHP
PHP设计模式之单例模式原理与实现方法分析
Apr 25 PHP
PHP+jQuery实现双击修改table表格功能示例
Feb 21 PHP
PHP 数组黑名单/白名单实例代码详解
Jun 04 #PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
Jun 03 #PHP
PHP使用CURL实现下载文件功能示例
Jun 03 #PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
Jun 03 #PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
Jun 03 #PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
Jun 03 #PHP
PHP工厂模式、单例模式与注册树模式实例详解
Jun 03 #PHP
挪威购物网站(7) 印尼购物网站(37) 台湾购物网站(77) 埃及购物网站(2) 澳大利亚购物网站(309) 肯尼亚购物网站(2) 阿根廷购物网站(9) 法国购物网站(144) 丹麦购物网站(22) 意大利购物网站(128)
You might like
php实现插入排序
2015/03/29 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
详解vue-cli3使用
2018/08/14 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python实现静态服务器
2019/09/05 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
常用的10个Python实用小技巧
2020/08/10 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
学校办公室主任职责
2013/12/27 职场文书
新年主持词
2014/03/27 职场文书
群众路线教育实践活动思想汇报（2014特荐篇）
2014/09/16 职场文书
大学军训口号大全
2015/12/24 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
智慧人生：永远不需要向任何人解释你自己
2019/08/20 职场文书