1.0.3 • Published 2 years ago

@kyfe/ks-editor v1.0.3

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago
  • 使用示例
<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>
              )
            }
          }
        ]
1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago