# 工作筆記 #7 - ClassicEditor 插件安裝

需求
---
> 使用 ClassicEditor，並有上傳圖片功能。

<br />

前置作業
---
### 1. 安裝 npm
> 安裝[ Node.js ](https://nodejs.org/en/download/) 後會自動安裝 npm。

<br />

### 2. 打開 CMD，依序輸入指令。
> \> git clone -b stable https://github.com/ckeditor/ckeditor5
> \> cd ckeditor5/packages/ckeditor5-build-classic
> \> npm install

##### 若遇到下面的錯誤訊息

##### 解決方法：
##### * 打開 nodejs 資料夾，開啟 npm.cmd 和 npm 兩個檔案。(路徑：C:\Program Files\nodejs)
##### * 更換 npm 的第23行與 npm.cmd 的12行之 **prefix -g** 為 **prefix –location=global**。
##### npm 的第23行
##### npm.cmd 的第12行
<br />

### 3. CMD 於同位置安裝圖片上傳插件，輸入以下指令。
> \> npm install --save @ckeditor/ckeditor5-upload

<br />

### 4. 編輯 src/ckeditor.js 文件，將插件添加到插件列表中。
> 路徑：C:\Users\User\ckeditor5\packages\ckeditor5-build-classic\src

##### 於指定位置加入兩行字串。
##### * import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

##### * Base64UploadAdapter
<br />

### 5. 加入 ckeditor.js 於專案中。
<br />

程式說明
---
> 使用 textarea

<textarea id="ckeditorTest"></textarea>

<br />

> 匯入 ckeditor.js

<br />

> 初始化 ClassicEditor 與使用。

var textArea;

// 初始化
ClassicEditor
    .create(document.querySelector(#ckeditorTest))
    .then(editor => {
        // 變更外觀
        editor.editing.view.change( writer => {
            writer.setStyle('min-height', '25rem', editor.editing.view.document.getRoot());
            writer.setStyle('width', '120%', editor.editing.view.document.getRoot());
        } );
        textArea = editor;
    })
    .catch(error => {
        console.error( error );
    });
    
    
// 取得與設定 textArea 文字內容
textArea.getData();
textArea.data.set("");

<br />

###### tags: `ClassicEditor`
---
參考資料
> https://www.twblogs.net/a/612088bdb2b95a05ecfc039d
> https://blog.csdn.net/m0_53361773/article/details/110850448
> https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/installing-plugins.html
> https://stackoverflow.com/questions/72401421/npm-warn-config-global-global-local-are-deprecated-use-location-glo