# View3Editor

**Repository Path**: oi-contrib/View3Editor

## Basic Information

- **Project Name**: View3Editor
- **Description**: 一个Vue3.js版本，简单易用的页面编辑项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://oi-contrib.github.io/h5box/#/view3editor
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-31
- **Last Updated**: 2025-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<img src="./snipping.png" >

# [View3Editor](https://github.com/oi-contrib/View3Editor)
一个Vue3.js版本，简单易用的页面编辑项目

<p>
    <a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=view3editor&interval=7">
        <img src="https://img.shields.io/npm/dm/view3editor.svg" alt="downloads">
    </a>
    <a href="https://www.npmjs.com/package/view3editor">
        <img src="https://img.shields.io/npm/v/view3editor.svg" alt="Version">
    </a>
    <a href="https://github.com/oi-contrib/View3Editor" target='_blank'>
        <img alt="GitHub repo stars" src="https://img.shields.io/github/stars/oi-contrib/View3Editor?style=social">
    </a>
</p>

<img src="https://nodei.co/npm/Vue3drag.png?downloads=true&amp;downloadRank=true&amp;stars=true" alt="NPM">

## 如何使用？

```
npm install --save view3editor
```

比如在管理端，可以引入编辑视图：

```js
import { view3editorEditor } from "view3editor/dist/view3editor-editor.es.js"
```

然后：

```html
<view3editorEditor v-model="pageJson"></view3editorEditor>
```

初始化的时候，pageJson可以设置为：

```js
pageJson = ref({
    name: "flow", // 文档流布局
    option: {},
    children:[]
})
```

同样的，显示端只要修改使用显示视图组件即可：

```js
import { view3editorView } from "view3editor/dist/view3editor-view.es.js"
```

如果需要同时使用，直接：

```js
import { view3editorEditor, view3editorView } from "view3editor"
```

更多疑惑或建议你可以，给我们提[issue](https://github.com/oi-contrib/View3Editor/issues)告诉我们。

## 版权

MIT License

Copyright (c) [zxl20070701](https://zxl20070701.github.io/notebook/home.html) 走一步，再走一步