---
# System prepended metadata

title: CKEditor 4
tags: [CKEditor, JavaScript, Jquery]

---

# 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;
}
```