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 相关文章推荐
PHP+DBM的同学录程序(2)
Oct 09 PHP
PHP 引用是个坏习惯
Mar 12 PHP
php selectradio和checkbox默认选择的实现方法详解
Jun 29 PHP
用PHP实现弹出消息提示框的两种方法
Dec 17 PHP
PHP学习笔记(一) 简单了解PHP
Aug 04 PHP
PHP实现文件下载断点续传详解
Oct 15 PHP
php中JSON的使用与转换
Jan 14 PHP
Laravel 5.3 学习笔记之 安装
Aug 28 PHP
注意!PHP 7中不要做的10件事
Sep 18 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
Nov 14 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
Aug 14 PHP
php 解析非标准json、非规范json
Apr 01 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
You might like
PHP中PCRE正则解析代码详解
2019/04/26 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python多线程http下载实现示例
2013/12/30 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python文件读写代码实例
2019/10/21 Python
Django更新models数据库结构步骤
2020/04/01 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python如何急速下载第三方库详解
2020/11/02 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
营销与策划个人求职信
2013/09/22 职场文书
办理生育手续介绍信
2014/01/14 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
青奥会口号
2014/06/12 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
论文答辩开场白大全
2015/05/27 职场文书
领导欢送会主持词
2015/07/06 职场文书
2016年十一促销广告语
2016/01/28 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python