Vue3 jsonedit json页面编辑器

首先安装

npm install json-editor-vue3 --save

然后cv代码

</template>

import { ref } from "vue";

import JsonEditorVue from 'json-editor-vue3'

export default {

components: { JsonEditorVue },

setup () {

const data = ref({ key: "key", value: "value" });

const validate = async (editor) => {

const res = await editor.validate();

// res 是错误列表，如果是空数组，则表示检测没有错误

console.log(res);

};

return {

data,

validate,

};

</script>

中途可能会出现报错

解决办法

在main.js顶部加上 import "jsoneditor";

最后出现的页面

今天的代码总结到此结束

Vue3 jsonedit json页面编辑器相关推荐

Vue3项目引入 vue-quill 编辑器组件并封装使用
这是一款支持Vue3的富文本编辑器 GitHub地址:https://github.com/vueup/vue-quill/ VueQuill官网:https://vueup.github.io/vu ...
移动端H5页面编辑器开发实战--原理结构篇
一.前言在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
基于VUE3的电子病历编辑器
基于VUE3的富文本编辑器,可同时实现医疗时间轴,电子病历编辑器,随访表单的设计与生成. 目前市面上的富文本编辑器大致可以分为三类 1.基于contenteditable 2.基于canvas 3.基 ...
WordPress页面编辑器插件--Elementor
内容摘要: Elementor安装 Elementor中关于块/section和栏/Column的设置 Elementor页面构建组件使用和设置举例 Elementor页面编辑器插件是当前被广泛应用并 ...
VUE3使用JSON编辑器
1.先看看效果图,可以自行选择展示效果 2.这是我在vue3项目中使用的JSON编辑器,首先引入第三方插件 npm install json-editor-vue3yarn add json-edit ...
移动端H5页面编辑器开发实战--经验技巧篇
一.前言在上一篇<原理结构篇>中,主要针对移动端网页进行了分类描述,并介绍了H5编辑器的需求.原理以及框架结构,本文将延续开发实战这一主题,针对策略和开发技巧做进一步的介绍. 二.策略篇 ...
❤❤全网最全-----VUE3.0最火爆的编辑器《TinyMCE》❤❤
<tinymce>一个非常适用于vue的编辑器.它在gitHub上的星星就要突破一万大关︿(￣︶￣)︿首先我们的技术选型是 Vite2.0以上+Vue3.0 使用的是JS来引入TinyM ...
uniapp开发：uniapp之vue3.2开发页面传值的解决方案
我最近个人使用了uniapp+vue3开发了一款微信小程序,在开发的过程中使用了一些使用方法,之前我在论坛上看到了许多人在问相关的问题,所以我在这里做一个简单的总结: 先看看uniapp+vue2中的 ...
Vue3集成富文本编辑器TinyMce6
个人公众号(小程序同名): 遇见0和1 Hexo博客: http://vogos.cn 文章目录介绍集成tinymce6 介绍 TinyMCE是啥这里不详细介绍了,有兴趣可以去官网自己了解一下. ...

Vue3 jsonedit json页面编辑器

Vue3 jsonedit json页面编辑器相关推荐

最新文章

热门文章