sadais-editor

安装

npm i sadais-editor
or
yarn add sadais-editor

用法

在main.js中

import SadaisEditor from 'sadais-editor'
import 'sadais-editor/dist/sadais-editor.css'

Vue.use(SadaisEditor)

然后模板中：

<sadais-editor 
    :options="options" 
    v-model="html" 
    @ready="handleReady" 
    @focus="handleFocus" 
    @blur="handleBlur" 
    @selection-change="handleSelectionChange" />

类型定义

interface IOptions {
  placeholder?: string
  imageHandler: (item: IImageItem, cb:Callback)=>void
}
// v0.1.8-新增压缩参数
interface IMinifyOpt {
  maxWidth: number
  maxHeight: number
  quality: number
}
interface IImageItem {
  id: string
  url?: string
  blob: Blob
  // v0.1.8-新增压缩方法 默认options: {maxWidth: 800, maxHeight: 800, quality: 0.8}
  minify: (options: IMinifyOpt)=>Promise<Blob>
}
type Callback = (url: string) => void

属性props

属性名|描述 ---|--- readOnly|是否只读 content|编辑器内容 支持v-model options|IOptions

自定义图片上传:

options = {
  imageHandler: this.handleUploadImage
}
async handleUploadImage(item: IImageItem, cb: Callback) {
  if(/sadais.com/.test(item.url)) {
    // 如果已经是我们自己域名
    cb(item.url)
    return
  } 
  // 上传之前可以进行等比缩小图片
  const blob = item.minify({
    maxWidth: 600,    // 默认800
    maxHeight: 600,   // 默认800
    quality: 0.7    // 默认0.7
  })
  或者
  const blob = item.minify()
  // TODO 将item.blob上传到OSS之类的云存储后 将获取到ossUrl回调回去
  cb(ossurl)
}

事件

事件名|参数 ---|--- change|变更后的富文本内容 selection-change|参数:range选中范围 可能为null；若为null，则触发blur事件 blur| 失去焦点,参数:editor实例 focus| 聚焦，参数:editor实例 ready|编辑器准备好事件，参数：editor实例