一个简单易用的 vue3 编辑器,支持 pc/app/小程序/h5 编辑, 支持 pc/app/小程序/h5 端回显。
- 安装
npm i sy-editor- 引入 sy-editor
// 全局引入
import { createApp } from 'vue'
import App from './App.vue'
import SyEditor from 'sy-editor'
const app = createApp(App)
app.use(SyEditor)
app.mount('#app')
// 局部引入
import { SyEditor, SyEditorView } from 'sy-editor'- 页面定义变量
// 页面初始数据模板
const contentJson = ref([
{type: "text", value:""},
{type: "image",value:""},
{type: "video",value:""}
])
// 上传回调函数
const onRequest = ({ res, ind }) => {
// res 上传完成后返回的结果
// ind 当前元素的下标
}- 页面编辑
<!-- 编辑组件 -->
<sy-editor v-model:modelValue="contentJson" token="xxx" upload-url="https://xxx/xxx" @on-request="onRequest"></sy-editor>
<!-- 展示组件 -->
<SyEditorView :contentJson="contentJson"></SyEditorView>保存建议:
JSON.stringify(contentJson.value)