vue3使用kindeditor富文本编辑器组件,支持上传图片(接口或base64)

发布时间 2023-11-27 16:19:41作者: Ooper

参考文章:https://blog.csdn.net/qq_27936291/article/details/124768989

1.安装插件

npm i @zhj-target/vue3-kind-editor --save
或者
yarn add @zhj-target/vue3-kind-editor

2.在vue项目中使用

import Vue3KindEditor from '@zhj-target/vue3-kind-editor'
const state = reactive({
    editorText: ''
})

<!-- v-model已是双向绑定了 -->
<vue3-kind-editor id="editor_id" height="500px" width="100%" v-model="state.editorText" :loadStyleMode="false"></vue3-kind-editor>

3.上传图片默认上传方式是base64,如果要支持接口上传需要修改文件:kindeditor-all.js 以及组件传参:uploadJson、filePostName

<vue3-kind-editor id="editor_id" height="500px" width="100%" v-model="state.editorText" :loadStyleMode="false" :uploadJson="/dev-api/web/file/upload" filePostName="file"></vue3-kind-editor>