好久沒有寫文章了算途，最近在寫后臺，使用的是yii2的框架隘梨，業(yè)務(wù)需要在后臺發(fā)新聞類的文章程癌，一開始選擇富文本直接用了百度的那個，后來因為上傳的圖片大小固定的轴猎，然后就換了陕壹，找到了CKEditor惜浅。
CKEditor官網(wǎng)：https://ckeditor.com
參考配置網(wǎng)址：https://www.cnblogs.com/wuling129/p/8268440.html
由于研究富文本的鉴扫，應(yīng)該有一定的配置經(jīng)驗，本文就略去了把CKEditor整合成yii2的一個部件的部分垮斯，其實對CKEditor的安裝、配置難度來自對CKFinder的整合只祠，配置兜蠕。其余的按照官方標(biāo)準(zhǔn)文檔，一步一步即可抛寝。
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'],
//剪切 復(fù)制 粘貼 粘貼純文本
['Cut', 'Copy', 'Paste', 'PasteText'],
// 數(shù)字列表 實體列表 減小縮進 增大縮進 查找 替換
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Find', 'Replace'],
//超鏈接 取消超鏈接 錨點
['Link', 'Unlink', 'Anchor'],
//圖片 表格 水平線 表情 特殊字符 分頁符
['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', '-', 'PageBreak'], '/',
//加粗 斜體盗舰， 下劃線 穿過線 下標(biāo)字 上標(biāo)字
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
//左對 齊 居中對齊 右對齊 兩端對齊
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
// 樣式 格式 字體 字體大小
['Styles', 'Format', 'Font', 'FontSize'],
//文本顏色 背景顏色
['TextColor', 'BGColor'],
//全屏 顯示區(qū)塊
['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;
//圖片預(yù)覽文字
config.image_previewText = ' ';
//是否強制復(fù)制來的內(nèi)容去除格式 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 注意文件路徑為網(wǎng)站根目錄 使用時钻趋，注意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的配置川陆，下面注釋掉的是全按鍵的，給大家參考蛮位，當(dāng)然也有一種是分組的配置较沪，個人覺得那種自定義程度不高。'-'是在toolbar中添加一條豎線失仁，'/'是換行尸曼。
第二個需要注意的的，有的教程要上傳圖片萄焦，是去改源碼控轿，把某個hidden：!0改成false，我覺得改源碼不太友好拂封，所以沒有改茬射，其實配置好config.filebrowserUploadUrl這項它就會出來
配置好config.filebrowserUploadUrl就出來了
因為懶得寫上傳方法，所以config.filebrowserUploadUrl這個配置項也沒啥用烘苹，因為我是用CKFinder來統(tǒng)一管理上傳的文件，有更強大的工具片部，就不重復(fù)造輪子了
CKEditor的config.js配置重點就在：
//文件的上傳管理：加載CKfinder 注意文件路徑為網(wǎng)站根目錄使用時镣衡，注意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的路徑，位置自定義隨便放档悠，應(yīng)該可以放到不同的服務(wù)器上廊鸥，這個我就沒有再測試了。
在這里辖所，配置也就over嘞惰说。
有個小提示：預(yù)覽框本來帶有默認(rèn)文字的，配置項中配置config.image_previewText = ' ';即可消除缘回，注意吆视，我這里配置為一個空格典挑，不是空字符。當(dāng)然啦吧，也可以自定義文字
預(yù)覽框中的文字
2您觉、CKFinder配置
我使用的是下載的最新版本(2018-9-28) 版本：3.4.4
對的配置主要文件是：
ff.png
其實對config.js都不多，我就配置了一個語言
config.language = 'zh-cn';
對config.php配置
參考網(wǎng)址：（官網(wǎng)）https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_authentication
//導(dǎo)入權(quán)限認(rèn)證的文件
require_once 'User.php';
...
/*============================ Enable PHP Connector HERE ==============================*/
// https://docs.ckeditor.com/ckfinder/ckfinder3-php/configuration.html#configuration_options_authentication
//身份驗證信息授滓，在這里琳水，可以將原來的false直接改成ture即可訪問
//這里我是新建了一個User.php來進行身份確認(rèn)
$config['authentication'] = array($user,'isLoggedIn');
...
//許可配置，不配置許可般堆，會有一個提示在孝，功能不全，授權(quán)是比較貴的
$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',
);
...
除了上述配置私沮，其他的我就是默認(rèn)的了。
這里給大家推薦一個激活碼網(wǎng)站噩咪，可以直接生成授權(quán)密鑰顾彰，實現(xiàn)全功能使用，當(dāng)然胃碾，自己動手去研究密鑰算法也是可以的
破解：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;
/**
* 從你的網(wǎng)站應(yīng)用中獲取登陸狀態(tài)
* 在這里實現(xiàn)涨享，返回一個布爾值，true表示可以訪問
*/
function login()
{
$this->authenticated =true;
}
function logout()
{
$this->authenticated = false;
}
public function isLoggedIn()
{
return $this->authenticated;
}
}
/**
* 直接在這里實例化user對象仆百，
* 調(diào)用判斷邏輯
*/
$user = new User();
$user->login();
基本上完成上述配置厕隧，你的文件服務(wù)器就可以正常使用了，可以自定義增加上傳的配置項俄周，具體參考image的配置格式
$config['resourceTypes'][] = array(
'name' => 'Images',
'directory' => 'images',
'maxSize' => 0,
'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
'deniedExtensions' => '',
'backend' => 'default'
);
配置側(cè)欄
到這里就全部結(jié)束啦
我想改變它彈出的方式吁讨，官網(wǎng)有一個是彈出一個模態(tài)框的，不是重新彈出一個瀏覽器框峦朗。有會的大佬建丧，煩勞提點
如有錯誤，還請指正波势，歡迎探討
