Etherpad-lite 嵌入参数详解：如何自定义网页中的协作编辑器

Etherpad-lite 嵌入参数详解：如何自定义网页中的协作编辑器

etherpad-lite Etherpad: A modern really-real-time collaborative document editor. 项目地址: https://gitcode.com/gh_mirrors/et/etherpad-lite

前言

Etherpad-lite 是一款优秀的实时协作文本编辑器，它允许用户通过简单的 iframe 方式将编辑器嵌入到任何网页中。本文将全面解析各种嵌入参数的使用方法，帮助开发者根据需求定制编辑器外观和行为。

基础嵌入方法

要在网页中嵌入 Etherpad-lite 编辑器，只需使用标准的 iframe 标签。最基本的嵌入代码如下：

<iframe src='http://your-etherpad-instance/p/PAD_NAME' width=600 height=400></iframe>

其中 PAD_NAME 是你想要创建或打开的协作文档名称。通过添加各种参数，我们可以对这个嵌入的编辑器进行深度定制。

常用显示控制参数

1. 显示行号 (showLineNumbers)

• 类型：布尔值
• 默认值：true
• 作用：控制是否显示编辑器左侧的行号栏
• 示例：showLineNumbers=false

2. 显示控制栏 (showControls)

• 类型：布尔值
• 默认值：true
• 作用：控制是否显示顶部的工具栏（包含导出、导入等功能按钮）
• 示例：showControls=false

3. 显示聊天面板 (showChat)

• 类型：布尔值
• 默认值：true
• 作用：控制是否显示右侧的实时聊天面板
• 示例：showChat=false

4. 强制显示聊天面板 (alwaysShowChat)

• 类型：布尔值
• 默认值：false
• 作用：即使聊天面板被隐藏，也强制显示
• 示例：alwaysShowChat=true

编辑器样式参数

1. 使用等宽字体 (useMonospaceFont)

• 类型：布尔值
• 默认值：false
• 作用：强制编辑器使用等宽字体，适合代码编辑
• 示例：useMonospaceFont=true

2. 禁用颜色 (noColors)

• 类型：布尔值
• 默认值：false
• 作用：禁用所有用户颜色标记，使文本显示为单一颜色
• 示例：noColors=true

用户相关参数

1. 用户名 (userName)

• 类型：字符串
• 默认值："unnamed"
• 作用：设置当前用户的显示名称
• 注意：需要进行URL编码
• 示例：userName=John%20Doe

2. 用户颜色 (userColor)

• 类型：CSS十六进制颜色值
• 默认值：服务器随机分配
• 注意：需要将#替换为%23
• 示例：userColor=%23ff0000（设置为红色）

国际化参数

1. 语言设置 (lang)

• 类型：语言代码字符串
• 默认值：en
• 作用：设置界面语言
• 示例：lang=zh（设置为中文）

2. 从右到左显示 (rtl)

• 类型：布尔值
• 默认值：true
• 作用：对于支持从右到左阅读的语言（如阿拉伯语），控制文本方向
• 示例：rtl=true

编辑器定位参数

跳转到指定行 (#L)

• 类型：整数
• 默认值：0
• 特殊说明：这不是URL参数，而是哈希值
• 作用：让编辑器自动滚动到指定行并将光标定位在该行开头
• 示例：#L10（跳转到第10行）

综合示例

以下是一个综合使用多个参数的示例，创建一个：

• 隐藏聊天面板和控制栏
• 使用等宽字体
• 设置用户名为"技术编辑"
• 跳转到第15行
• 宽度800像素，高度600像素的编辑器

<iframe src='http://pad.example.com/p/DemoPad#L15?showChat=false&showControls=false&useMonospaceFont=true&userName=%E6%8A%80%E6%9C%AF%E7%BC%96%E8%BE%91' width=800 height=600></iframe>

最佳实践建议

1. 安全性考虑：如果嵌入在HTTPS网站中，确保Etherpad-lite实例也使用HTTPS协议

2. 响应式设计：可以结合CSS使iframe自适应不同屏幕尺寸

3. 参数组合：合理组合参数可以创建适合不同场景的编辑器，如：

   • 代码协作：useMonospaceFont=true&showLineNumbers=true
   • 简单文本编辑：showControls=false&showChat=false

4. 用户体验：为匿名用户设置默认用户名可以提升协作体验

通过灵活运用这些嵌入参数，你可以将Etherpad-lite无缝集成到各种Web应用中，并根据具体需求提供最佳的协作编辑体验。

etherpad-lite Etherpad: A modern really-real-time collaborative document editor. 项目地址: https://gitcode.com/gh_mirrors/et/etherpad-lite