- 安装
npm i @kyfe/ks-editor
- 在项目中引入
import ksEditor from '@kyfe/ks-editor'
Vue.use(ksEditor)
- 使用示例
<ks-editor ref="editDom"
:audioDetail="audioData"
:editorConfig="editorConfig"
:tag="666"
placeholder="请输入"
@focus="handlefocus"
@audioChange="audioChange"
@blur="handleBlur"
@input="handleInput"/>
- 富文本操作
this.$refs['editdom'].getHtmlContent() // 获取文本内容
this.$refs['editdom'].setHtmlContent('hello world') // 设置文本内容
- 参数说明
入参 | 说明 | 是否必填 |
---|---|---|
editorConfig | 快捷工具栏配置 | 必填 |
audioDetail | 语音信息 | 非必填 |
tag | 同一个页面初始化多个ks-editor时区分使用 | 非必填 |
- 事件
事件名 | 说明 |
---|---|
audioChange | 监听语音回调事件 |
focus | 监听聚焦事件 |
blur | 监听失去焦点事件 |
input | 监听输入事件 |
- 语音信息数据结构
audioDetail
// 监听语音回调事件
audioChange (data) {
this.audioData = data
},
// 语音数据结构
audioDetail = {
bizId,
length
}
- 快捷工具栏配置
editorConfig
editorConfig = [
{
key: 'audio',
label: '语音',
iconUrl: 'tool-audio.png', // 建议用base64
},
{
key: 'style', // 富文本样式操作面板
label: '样式',
iconUrl: 'tool-style.png', // 建议用base64
isShowHistory: true, // 是否展示撤回/恢复功能悬浮按钮
maxLength: 700 // 富文本字数限制
},
{
key: 'bold',
label: '加粗',
isRichEditorOption: true, // 是否富文本内置选项
},
{
key: 'listOrdered',
label: '序列',
isRichEditorOption: true, // 是否富文本内置选项
},
{
key: 'color',
label: '颜色',
isRichEditorOption: true, // 是否富文本内置选项
// 颜色气泡快捷键
colorPops: [
// black
'#333333',
// red,
'#f92b2d',
// yellow,
'#ffbe00',
],
},
{
key: 'emoji',
label: '表情',
iconUrl: 'emoji.png',
},
// 以上为内置选项,如需自定义功能请使用formatter
{
key: 'confirm', // key需保持唯一
formatter: () => {
return (
<div class="mini-toolbar-item" onClick={this.confirmExitAndSave}>
<span class="btn-label confirm-btn">保存</span>
</div>
)
}
}
]