@kyfe/ks-editor
v1.0.3
Published
移动端富文本编辑器
Downloads
6
Keywords
Readme
- 使用示例
<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') // 设置文本内容
- 参数说明
|入参|说明|是否必填| | - | - | - | |audioDetail|语音信息|非必填| |editorConfig|快捷工具栏配置|必填| |tag|同一个页面初始化多个ks-editor时区分使用|非必填|
- 语音信息数据结构
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: [
// blacke
'#333333',
// red,
'#f92b2d',
// yellow,
'#ffbe00',
],
},
// 以上为内置选项,如需自定义功能请使用formatter
{
key: 'confirm', // key需保持唯一
formatter: () => {
return (
<div class="mini-toolbar-item" onClick={this.confirmExitAndSave}>
<span class="btn-label confirm-btn">保存</span>
</div>
)
}
}
]