0.1.8 • Published 2 years ago
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实例 |