@kyfe/ks-editor

1.0.4 • Public • Published
  • 安装
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>
              )
            }
          }
        ]

Readme

Keywords

none

Package Sidebar

Install

npm i @kyfe/ks-editor

Weekly Downloads

3

Version

1.0.4

License

ISC

Unpacked Size

941 kB

Total Files

3

Last publish

Collaborators

  • jiatesun0824
  • aichkyo
  • huangguangfa
  • kye-crm
  • insistem
  • zybieku
  • codexgea
  • pagebi888
  • kye-components
  • heyang_mj
  • linxingli
  • kyefe666
  • tim_cj