更新记录
1.0.0(2019-12-10) 下载此版本
无
平台兼容性
轻量级图文编辑
仅支持图片和文字混编,在手机中使用已经足够了。
使用方式一
import kspEditor from "@/components/ksp-editor/ksp-editor.vue";
export default {
components: {kspEditor},
}
属性说明
属性 | 类型 | 默认 | 备注 |
---|---|---|---|
list | [Object] | null | 编辑的内容 |
事件说明
事件名称 | 说明 | 返回 |
---|---|---|
save | 点击保存按钮 | e:{result} |
selectImage | 点击图片上传按钮 | - |
deleteImage | 删除图片 | e:{url} |
示例
<template>
<view class="content">
<ksp-editor ref="editor" @selectImage="selectImage" @save="onsave" :list="list"></ksp-editor>
</view>
</template>
<script>
import kspEditor from "@/components/ksp-editor/ksp-editor.vue";
export default {
components: {kspEditor},
data() {
return {
list: [{
type: "text",
content: "内容内容内容内容内容内容内容内容内容内容内容内容内容"
}, {
type: "image",
url: "/static/logo.png"
}, {
type: "text",
content: "文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文"
}]
}
},
methods: {
selectImage() {
uni.chooseImage({
count: 1,
success: (res) => {
var path = res.tempFilePaths[0];
// 实际项目中应上传图片到服务一起,获取url后再添加
this.$refs.editor.addImage(path);
}
})
},
onsave(ev) {
console.log(ev.result);
}
}
}
</script>