• 安装

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>
              )
            }
          }
        ]