在線協作編輯器EtherPad使用說明

項目中剛好要用到在線協同編輯器的功能，網上找到EtherPad還不錯，體驗了一番包括

• 安裝部署
• 配置說明
• 插件管理
• 權限控制
• 樣式切換

EtherPad地址：https://github.com/ether/etherpad-lite

在線體驗地址：https://beta.etherpad.org/

安裝部署

EtherPad提供了docker部署的方式，方便快速體驗

docker run -d -p 9002:9001 etherpad/etherpad

run起來後，直接訪問

輸入一個記事本名稱後，即可創建一個新的記事本

看上去就像一個普通的富文本編輯器，嘗試開啓兩個瀏覽器窗口編輯內容，可以看到內容會實時同步

這樣零配置的啓動後，肯定是不能用到項目中的，下面看看配置

配置說明

配置文件在docker容器內的/opt/etherpad-lite/settings.json可以編輯後重啓容器

另外可以通過/admin的管理員界面進行配置管理還有重啓，開啓admin管理界面需要將settings.json中的users註釋去掉，同時改一下默認密碼

由於這個容器沒有自帶vi命令，先安裝一下vi

apt-get update
apt-get install vim
vi settings.json

"users": {
  "admin": {
    // "password" can be replaced with "hash" if you install ep_hash_auth
    "password": "123456",
    "is_admin": true
  },
  "user": {
    // "password" can be replaced with "hash" if you install ep_hash_auth
    "password": "changeme1",
    "is_admin": false
  }
},

編輯完後重啓容器，進入/admin

這裏看到的Settings內容就是容器中的/opt/etherpad-lite/settings.json，所以可以在線編輯保存後重啓，保存和重啓按鈕在底部

插件管理

可以看到默認的編輯頁面，可以用的樣式比較少，只有粗體、斜體、序號等，缺少常用標題、表格、左右對齊、字體大小等樣式

這裏就要說到EtherPad的插件功能，缺少的樣式都能提供安裝插件的方式得到，另外插件庫中還有很多有意思的插件，大家可以探索一下

在Plugin manager中我一共安裝了這些插件

但有些插件還需要手動改一下Settings並重啓纔有效，下面分別說明

align

文字左、中、右對齊插件

在Available plugins中搜索align點擊install，然後去刷新記事本頁面，並沒有看到相應的按鈕出現

打開Settings找到toolbar，去掉toolbar的注視，並添加如下內容

[“alignLeft”, “alignCenter”, “alignJustify”, “alignRight”]

保存後重啓，再去刷新記事本，就可以看到對齊的操作按鈕了

image_upload

看名字就知道是圖片上傳

同樣install後，是沒有按鈕出現的，需要同align一樣，手動添加一下按鈕，另外需要加一段配置，配置圖片的存儲方式

“addImage”

“ep_image_upload”: {

“fileTypes”: [“jpeg”, “jpg”, “bmp”, “gif”, “png”],

“maxFileSize”: 5000000

},

保存後重啓，就能看到圖片按鈕了，上傳一張試試

tables

tables在插件列表中有個tables2，是tables的升級版，按install後，在頁面上使用時js有報錯用不了

但tables在插件列表中並沒有，需要通過npm安裝，進入容器

cd /src
npm install ep_tables

其他幾個插件通過插件節目直接install即可

權限控制

EtherPad提供了豐富的API接口方便繼承接入https://etherpad.org/doc/v1.5.7/

默認情況下一個記事本能被任何人編輯，只要拿到URL地址就可以

下面演示一下如何進行權限控制，只有指定的用戶才能編輯，接口都是基於HTTP的，每個接口都有一個默認參數apikey

它的指在第一次啓動時生成在/opt/etherpad-lite/APIKEY.txt中

1、首先在EtherPad中創建用戶

2、創建組，因爲權限是基於組的，一個組可以有多個記事本，組內的用戶就都可編輯

3、創建組內的記事本，需要用到上一步返回的groupID

4、創建Session，建立用戶與組的關係，validUntil是session的有效期，填一個未來的時間戳即可；authorID是第一步創建的用戶ID

5、修改Settings開啓權限認證

  "requireSession" : true,
  "sessionNoPassword" : true,

保存後重啓，再去訪問/p/447是無法訪問的，界面顯示載入中……

這是因爲權限再啓作用了，是時候用上剛纔生成的sessionID了，F12在瀏覽器控制檯設置一下cookie


在刷新頁面又提示沒有權限

這個地方我研究了好久，官網上也沒說。這是因爲使用組創建的記事本不能直接通過/p/447記事本名稱來訪問的，而是要帶上groupId

我是怎麼樣發現的呢，調用一個查詢API發現的listAllPads，注意這個api的版本是1.2.1，前面幾個接口都是1

輸入/p/g.jnIO3A65apGdgHzw$447 大功告成

樣式切換

默認的樣式適用使用iframe嵌入頁面中，如果是打開新窗口可以使用另外一個樣式，修改Settings

  "skinName": "colibris",

保存重啓，刷新記事本

最後EtherPad還有聊天、時間軸、導入導出等功能大家可以去體驗