项目中刚好要用到在线协同编辑器的功能,网上找到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还有聊天、时间轴、导入导出等功能大家可以去体验

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐