1.6.0 • Published 4 years ago
etherpad-vue v1.6.0
下载安装
npm install --save etherpad-vue
或
cnpm install --save etherpad-vue功能描述
此版本基于github上开源项目etherpad进行vue组件的封装，主要实现功能配置，内容获取等功能
配置说明
config: {
ETHERPAD_APIKEY: 'asdgsfg', // API密钥，在node服务根目录下APIKEY.txt 必选
id: 'toke', // 文档ID 必选
host: 'http://192.168.10.150', // node服务地址 必选
userName: '匿名', // 用户名 必选
baseUrl: '/p/', // 路径
showControls: true, // 是否显示控件
showChat: true, // 是否显示聊天按钮
showLineNumbers: false, // 是否显示行号
useMonospaceFont: false, // 使用等宽字体
noColors: false, // 禁用用户的文本背景色
userColor: false, // 当前用户的文本背景色,eg. #f00f00
hideQRCode: true, // 隐藏二维码
alwaysShowChat: false, // 始终显示聊天框
plugins: { }, // 与插件相关的选项，与基本的Etherpad配置无关
rtl: false, // 从右向左显示文本
}
width: '100%' // 可选，默认100%，可写成px等单位
height: '600px' // 可选，默认600px，可写成%等单位
border: 'none' // 可选，默认none内置方法
setContent: 设置当前便笺文本内容
setHtml: 设置当前便笺HTML内容
appendContent: 向当前便笺末尾插入内容，注：会清除原有格式
getContent：获取当前便笺文本内容，返回一个promise对象，具体使用方法看下例
getHtml: 获取当前便笺html内容，返回一个promise对象，具体使用方法看下例
getDownloadUrl: 获取PDF下载地址使用示例
<template>
<div class="home">
<etherpad-vue ref='etherpad' :config='etherpadConfig' :height="'700px'" :width="'80%'"></etherpad-vue>
</div>
</template>
<script>
import etherpadVue from 'etherpad-vue'
export default {
name: 'Home',
components: {
etherpadVue
},
data() {
return {
etherpadConfig: {
ETHERPAD_APIKEY: 'bf670df65023cdeb5a52',
id: 'toke',
host: 'http://192.168.10.150',
userName: '邓'
}
}
},
mounted(): {
this.$refs.etherpad.setContent('123')
this.$refs.etherpad.appendContent('456')
let data = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>`
this.$refs.etherpad.setHtml(data)
},
methods: {
getContent() {
this.$refs.etherpad.getContent().then((res) => {
console.log(res)
})
this.$refs.etherpad.getHtml().then((res) => {
console.log(res)
})
}
}
}
</script>