- main 文件中
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
app.use(Antd)
- 组件中使用编辑器
<script setup>
import { ref } from 'vue'
import { Cant, CantStore } from 'source-editors'
import Monaco from 'source-editors/monaco-editor'
const store = new CantStore({})
const cant = ref()
console.log(store)
const getFunc = () => {
console.log(cant.value.getEditor()) //获取编辑器
console.log(cant.value.getData()) //获取数据
}
</script>
<template>
<a-button @click="getFunc">测试</a-button>
<Cant :editor="Monaco" :store="store" ref="cant" />
</template>
- 组件中渲染表单
<template>
<Preview ref="pdom" :code="code"></Preview>
</template>
<script setup>
import {Preview} from "source-editors";
const test = async() => {
pdom.value?.getData()
const data = await pdom.value?.validate()
console.log(data)
pdom.value?.setData()
}
element-plus 编辑 source-editors-ep