sy-editor v1.0.4

索易编辑器

一个简单易用的 vue3 编辑器,支持 pc/app/小程序/h5 编辑, 支持 pc/app/小程序/h5 端回显。

使用步骤

1. 安装

npm i sy-editor

2. 引入 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'

3. 页面定义变量

// 页面初始数据模板
const contentJson = ref([
  {type: "text", value:""},
  {type: "image",value:""},
  {type: "video",value:""}
])

// 上传回调函数
const onRequest = ({ res, ind }) => {
  // res 上传完成后返回的结果
  // ind 当前元素的下标
}

4. 页面编辑

<!-- 编辑组件 -->
<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)