好久没有写文章了，最近在写后台，使用的是yii2的框架，业务需要在后台发新闻类的文章，一开始选择富文本直接用了百度的那个，后来因为上传的图片大小固定的，然后就换了，找到了CKEditor。
CKEditor官网：https://ckeditor.com
参考配置网址：https://www.cnblogs.com/wuling129/p/8268440.html
由于研究富文本的，应该有一定的配置经验，本文就略去了把CKEditor整合成yii2的一个部件的部分，其实对CKEditor的安装、配置难度来自对CKFinder的整合，配置。其余的按照官方标准文档，一步一步即可。
1、对CKEditor的配置
下载的是满包版本
配置.png
废话不多说，直接上代码
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/
var baseUrl = '../../';
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
config.language = 'zh-cn';
//编辑器样式
config.skin = "moono-lisa";
config.filebrowserUploadUrl = baseUrl + 'uploads/';
// config.uiColor = '#AADC6E';
//工具栏是否可以被收缩
config.toolbarCanCollapse = true;
config.toolbar = [
['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates'],
//剪切 复制 粘贴 粘贴纯文本
['Cut', 'Copy', 'Paste', 'PasteText'],
// 数字列表 实体列表 减小缩进 增大缩进 查找 替换
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Find', 'Replace'],
//超链接 取消超链接 锚点
['Link', 'Unlink', 'Anchor'],
//图片 表格 水平线 表情 特殊字符 分页符
['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', '-', 'PageBreak'], '/',
//加粗 斜体， 下划线 穿过线 下标字 上标字
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
//左对 齐 居中对齐 右对齐 两端对齐
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
// 样式 格式 字体 字体大小
['Styles', 'Format', 'Font', 'FontSize'],
//文本颜色 背景颜色
['TextColor', 'BGColor'],
//全屏 显示区块
['Maximize', 'ShowBlocks', '-']
];
// config.toolbar_Full = [
// ['Source','-','Save','NewPage','Preview','-','Templates'],
// ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
// ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
// ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
// '/',
// ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
// ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
// ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
// ['Link','Unlink','Anchor'],
// ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
// '/',
// ['Styles','Format','Font','FontSize'],
// ['TextColor','BGColor']
// ];
//字体编辑时的字符集 可以添加常用的中文字符：宋体、楷体、黑体等 plugins/font/plugin.js
//config.font_names = 'Arial;Times New Roman;Verdana';
// “拖拽以改变尺寸”功能 plugins/resize/plugin.js
config.resize_enabled = true;
//图片预览文字
config.image_previewText = ' ';
//是否强制复制来的内容去除格式 plugins/pastetext/plugin.js
config.forcePasteAsPlainText = true;
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
//移除toolbar上的某个按钮
//config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
//移除窗口上的选项
config.removeDialogTabs = 'image:advanced;link:advanced';
//自定义配置
//config.配置项 = 值
//config.width = 100%;
config.height = 600;
//config.uiColor = "#cc0041";
// //文件的上传管理：加载CKfinder 注意文件路径为网站根目录 使用时，注意ckfinder文件安装路径
config.filebrowserBrowseUrl = baseUrl + 'finder/ckfinder.html';
config.filebrowserImageBrowseUrl = baseUrl + 'finder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = baseUrl + 'finder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = baseUrl + 'finder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = baseUrl + 'finder/core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = baseUrl + 'finder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
};
说明：第一个是toolbar的配置，下面注释掉的是全按键的，给大家参考，当然也有一种是分组的配置，个人觉得那种自定义程度不高。'-'是在toolbar中添加一条竖线，'/'是换行。
第二个需要注意的的，有的教程要上传图片，是去改源码，把某个hidden：!0改成false，我觉得改源码不太友好，所以没有改，其实配置好config.filebrowserUploadUrl这项它就会出来
配置好config.filebrowserUploadUrl就出来了
因为懒得写上传方法，所以config.filebrowserUploadUrl这个配置项也没啥用，因为我是用CKFinder来统一管理上传的文件，有更强大的工具，就不重复造轮子了
CKEditor的config.js配置重点就在：
//文件的上传管理：加载CKfinder 注意文件路径为网站根目录使用时，注意ckfinder文件安装路径
config.filebrowserBrowseUrl = baseUrl + 'finder/ckfinder.html';
config.filebrowserImageBrowseUrl = baseUrl + 'finder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = baseUrl + 'finder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = baseUrl + 'finder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = baseUrl + 'finder/core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = baseUrl + 'finder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
这里就是下载的CKFinder的路径，位置自定义随便放，应该可以放到不同的服务器上，这个我就没有再测试了。
在这里，配置也就over嘞。
有个小提示：预览框本来带有默认文字的，配置项中配置config.image_previewText = ' ';即可消除，注意，我这里配置为一个空格，不是空字符。当然，也可以自定义文字
预览框中的文字
2、CKFinder配置
我使用的是下载的最新版本(2018-9-28) 版本：3.4.4
对的配置主要文件是：
ff.png
其实对config.js都不多，我就配置了一个语言
config.language = 'zh-cn';
对config.php配置
参考网址：（官网）https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_authentication
//导入权限认证的文件
require_once 'User.php';
...
/*============================ Enable PHP Connector HERE ==============================*/
// https://docs.ckeditor.com/ckfinder/ckfinder3-php/configuration.html#configuration_options_authentication
//身份验证信息，在这里，可以将原来的false直接改成ture即可访问
//这里我是新建了一个User.php来进行身份确认
$config['authentication'] = array($user,'isLoggedIn');
...
//许可配置，不配置许可，会有一个提示，功能不全，授权是比较贵的
$config['licenseName'] = '';
$config['licenseKey'] = '';
...
//这里是路径配置，两项配合使用
$config['privateDir'] = array(
'backend' => 'default',
'tags' => '.finder/tags',
'logs' => '.finder/logs',
'cache' => '.finder/cache',
'thumbs' => '.finder/cache/thumbs',
);
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => '/uploads/',
// 'root' => '', // Can be used to explicitly set the CKFinder user files directory.
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
);
...
除了上述配置，其他的我就是默认的了。
这里给大家推荐一个激活码网站，可以直接生成授权密钥，实现全功能使用，当然，自己动手去研究密钥算法也是可以的
破解：https://putong.la/ckfinder3.html
然后是user.php
<?php
/**
* Created by PhpStorm.
* User: H
* Date: 2018/9/28
* Time: 9:42
*/
namespace finder;
class User
{
private $authenticated = false;
/**
* 从你的网站应用中获取登陆状态
* 在这里实现，返回一个布尔值，true表示可以访问
*/
function login()
{
$this->authenticated =true;
}
function logout()
{
$this->authenticated = false;
}
public function isLoggedIn()
{
return $this->authenticated;
}
}
/**
* 直接在这里实例化user对象，
* 调用判断逻辑
*/
$user = new User();
$user->login();
基本上完成上述配置，你的文件服务器就可以正常使用了，可以自定义增加上传的配置项，具体参考image的配置格式
$config['resourceTypes'][] = array(
'name' => 'Images',
'directory' => 'images',
'maxSize' => 0,
'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
'deniedExtensions' => '',
'backend' => 'default'
);
配置侧栏
到这里就全部结束啦
我想改变它弹出的方式，官网有一个是弹出一个模态框的，不是重新弹出一个浏览器框。有会的大佬，烦劳提点
如有错误，还请指正，欢迎探讨
