荐在vue中最好用的编辑器 —

在尝试了好几种编辑器后，终于找到了一款最满意的编辑器，推荐给大家，十分的好用

下面分两个版本，我的项目用的是nuxt.js，是服务端渲染，有时候就会报一下window，document，语法等错误，这些包都需要在nuxt.config.js中配置一下

首先 npm install vue-json-editor --save

服务端渲染，建议全局注册

// 在plugins文件夹下创建vue-json-edotor.js
import Vue from 'vue';
import VueJsonEditor from 'vue-json-editor';Vue.component('vue-json-editor', VueJsonEditor);export default () => {Vue.use(VueJsonEditor);
};// 在nuxt.config.js中配置，这些包都要在服务端禁用
module.exports = {plugins: [{ src: '@/plugins/ace-builds', ssr: false },{ src: '@/plugins/vue-json-pretty', ssr: false },{ src: '@/plugins/vue-json-editor', ssr: false },],
}// 在vue文件中直接引入组件即可
<div class="flow-container"><el-dialog :visible.sync="vueJsonEditorVisible"><div class="route-management"><vue-json-editorv-model="procedure.values" // 放json数据:show-btns="true":mode="'code'":key="vueJsonEditorKeys" // 每次点击让key变化，防止数据有误lang="zh"class="vue-json-editor"@json-change="onJsonChange"@json-save="onJsonSave"/></div></el-dialog>
</div>methods: {onJsonChange(value) {console.log('value:', value);},onJsonSave(value) {console.log('value:', value);},
}// 不要加scoped，不然不生效，但是也不会污染其他地方的样式，要在他的最外面包一层div取一个唯一的类名即可，高度根据自己的需求做调整
<style lang="less">
.flow-container {.el-dialog__wrapper {height: 100vh !important;.el-dialog {margin-top: 2vh !important;height: 90vh !important;.route-management {height: 74vh !important;.vue-json-editor {height: 74vh !important;}.jsoneditor-vue {height: 100% !important;}}}}
}
</style>

普通vue，使用起来就方便多了，可以全局注册，也可以组件注册，直接引入，在components中注册即可使用，后面的使用就是一样的，不多赘述。

真的是见过最好的编辑器了，如果大家有更好的，希望留言给我，我去康康，谢谢啦

荐在vue中最好用的编辑器 —— vue-json-editor相关推荐

vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
vue中使用原始html插值,VUE.JS中的插值表达式、v-cloak、v-text、v-html、v-bind:、v-on:...
插值表达式 {{ x }},类似这样子的就叫插值表达式 v-cloak 使用v-cloak 能够解决插值表达式闪烁的问题,但是要配合style中的display:none.CSS的属性选择器来使用 v ...
js 获取vue组件html_关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）
vue中直接使用echarts //var myChart = this.$echarts.init(document.getElementById("echart-twoline" ...
vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件先安装一下: npm i vue-quill-editor -s 下载之后去components文件夹中新建一个文件夹 KEditor,然 ...
Vue中TipTap富文本编辑器的输入框内部分样式无法显示
在这个问题上卡了好几天,后来才发现是scoped的问题.在自己写的样式上加上scoped,Tiptap编辑器的输入框样式放在另外一个<style>里,不加scoped就行了如下图,上面的 ...
vue中的v-text指令之Vue知识点归纳(二)
本文中将描述: v-text 的指令的基本使用 v-text 与差值表达式的区别 1 简述 v-text会将元素当成纯文本输出 <!DOCTYPE html> <html lang= ...

荐在vue中最好用的编辑器 —— vue-json-editor

在尝试了好几种编辑器后，终于找到了一款最满意的编辑器，推荐给大家，十分的好用

服务端渲染，建议全局注册

普通vue，使用起来就方便多了，可以全局注册，也可以组件注册，直接引入，在components中注册即可使用，后面的使用就是一样的，不多赘述。

荐在vue中最好用的编辑器 —— vue-json-editor相关推荐

最新文章

热门文章