# CKEditor 4
## CKEditor 4 上傳圖片 (後端Laravel)
>先建立CKEditor 4： [color=#00FF00] https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/25502/
config.js設定
```javascript
config.filebrowserImageUploadUrl = "/admin/for_admin/ckeditorUpload?opener=ckeditor&type=images";
config.filebrowserUploadMethod = 'form';//才可以post到後端
```
在ckeditor/plugins/image/dialogs/image.js中搜索並更改hidden:false
```javascript
id:"Upload",hidden:!0
//更改爲
id:"Upload",hidden:false
```
在web.php中設置好對應路由
```php
Route::post('ckeditorUpload', [FunctionController::class, 'ckeditorUpload']);
```
function
```php
// 公告上傳圖片
function ckeditorUpload(Request $request) {
$image = request()->file('upload');
//保存本地資料夾
$path = $image->store('public');
//取得該圖url
$url = Storage::url($path);
$callback = $request->input("CKEditorFuncNum");
$CKEditor = $request->input('CKEditor');
return "<script>window.parent.CKEDITOR.tools.callFunction($CKEditor ,'{$url}','')</script>";
}
```
## CKEditor 4 自訂插件
>[color=#00FF00] https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample.html
### 插件文件
#### 文件結構
- ckeditor root/
- plugins/
- timestamp/
- icons/
- timestamp.png
- plugin.js
#### 插件源代碼
```javascript
CKEDITOR.plugins.add( 'timestamp', {
icons: 'timestamp',
init: function( editor ) {
//Plugin logic goes here.
}
});
```
所有 CKEditor 4 插件都是使用`CKEDITOR.plugins.add`方法創建的。此方法應包含插件名稱——'timestamp'以及放置在init函數中的插件邏輯，該函數在編輯器實例初始化時調用。
此外，由於我們要定義一個工具欄按鈕，因此icons設置了該屬性，包括圖標文件的名稱（重要的是：匹配按鈕名稱，小寫）。
#### 創建編輯器命令
```javascript
editor.addCommand( 'insertTimestamp', {
exec: function( editor ) {
var now = new Date();
editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
}
});
```
#### 創建工具欄按鈕
```javascript
editor.ui.addButton( 'Timestamp', {
label: 'Insert Timestamp',
command: 'insertTimestamp',
toolbar: 'insert'
});
```
上面的`CKEDITOR.ui.addButton`方法調用創建了一個'Timestamp'具有以下屬性的按鈕：
- label – 按鈕的文本部分（如果可見）及其工具提示。
- command– 按鈕激活後要執行的命令。這是我們在上一步中創建的命令。
- toolbar–將添加按鈕的工具欄組。
#### 插件加載
到`config.js`添加代碼：
```javascript
config.extraPlugins = 'custom_inserttext';
```
##### dropdown類型插件example
>[color=#00FF00] 網路上的example：https://jsfiddle.net/oleq/q7bfs7r1/
```javascript=
CKEDITOR.plugins.add( 'custom_inserttext', {
requires : ['richcombo'],
init : function( editor )
{
// array of strings to choose from that'll be inserted into the editor
var strings = [];
//strings.push(['測試(html text)', '測試(dropdown text)', '測試(hover text)']);
// add the menu to the editor
editor.ui.addRichCombo('strinsert',
{
label: '插入文字',
title: '插入文字',
voiceLabel: '插入文字',
className: 'cke_format',
multiSelect:false,
panel:
{
css: [ editor.config.contentsCss, CKEDITOR.skin.getPath('editor') ],
voiceLabel: editor.lang.panelVoiceLabel
},
init: function()
{
this.startGroup( 'My Dropdown Group #1' );
this.add( 'foo', 'Foo!' );
this.add( 'bar', 'Bar!' );
this.startGroup( 'My Dropdown Group #2' );
this.add( 'ping', 'Ping!' );
this.add( 'pong', 'Pong!' );
},
onClick: function( value )
{
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml(value);
editor.fire( 'saveSnapshot' );
}
});
}
});
```
### 插件CSS
#### dropdown 樣式
`/skins/editor.css`添加樣式，類別為<font color="#f00">`.cke_combopanel__`</font>加上插件類別名稱`strinsert`
```css
/* 下拉選單寬度 */
.cke_combopanel__strinsert {
width: 500px;
}
```
Sign in with Wallet
Connect another wallet