首页
所有分类
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 相关文章推荐
PHP MYSQL乱码问题,使用SET NAMES utf8校正
Nov 30 PHP
php性能优化分析工具XDebug 大型网站调试工具
May 22 PHP
php中日期加减法运算实现代码
Dec 08 PHP
php使用sql数据库 获取字段问题介绍
Aug 12 PHP
检测codeigniter脚本消耗内存情况的方法
Mar 21 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
Aug 18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
Sep 22 PHP
php基于dom实现的图书xml格式数据示例
Feb 03 PHP
Redis在Laravel项目中的应用实例详解
Aug 11 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
Mar 18 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
Oct 16 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
Oct 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
Spring Bean(1) Tsmoothie(1) filter(1) reduce(2) Django(9) EditText(1) Spring JPA(1) Selenium(1) openEuler(1) TextInputLayout(1)
You might like
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
浅谈php提交form表单
2015/07/01 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
Laravel 队列使用的实现
2019/01/08 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
dtree 网页树状菜单及传递对象集合到js内，动态生成节点
2012/04/14 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
2016/02/25 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
深入解读Python解析XML的几种方式
2016/02/16 Python
Python画图学习入门教程
2016/07/01 Python
利用python画一颗心的方法示例
2017/01/31 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python实现串口自动触发工作的示例
2019/07/02 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python用Configobj模块读取配置文件
2020/09/26 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
美国精品地毯网站：Boutique Rugs
2020/03/04 全球购物
中学生社区服务活动报告
2015/02/05 职场文书
高中班长竞选稿
2015/11/20 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
python 安全地删除列表元素的方法
2022/03/16 Python
Python OpenCV超详细讲解基本功能
2022/04/02 Python
pycharm无法安装cv2模块问题
2022/05/20 Python