基于Vue的单页面格式化数据高亮编辑器组件
前言
项目中遇到这样的需求:vue项目中格式化XML,JSON等数据并高亮显示并支持修改保存;我在网上没有找到特别合适的插件,所以在前人的基础上开发一下,完成这个功能并封装为单页面组件;
正文
1. 介绍
项目是基于ACE高亮编辑器和vkbeautify格式化显示基础上开发的;
因为懒得写样式,所以使用到了element(愿意写样式的就不用下了);
其中复制功能使用到了vue-clipboard2;
项目源码
下载必要插件
npm install brace -S
npm install element-ui -S
npm install vue-clipboard2 -S
npm install vkbeautify --save
2. min.js引入
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
// 引入复制
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)
new Vue({
render: h => h(App),
}).$mount('#app')
3. 项目源码解析
从github拿到源码后,将src/page文件夹放置在自己项目src下
- page :编辑器格式化插件所在文件
- data_format_utils.js :格式化数据的方法相关js代码
- jsonlint.js :格式化json的js代码
- vue_data_editor.vue :组件的单页面文件,主要代码
vue_data_editor.vue
<template>
<div>
<el-card class="box-card">
<!-- 操作栏 -->
<el-row slot="header" class="clearfix" v-if="toolbar == true">
<el-col :span="5">
<el-button type="primary" @click="toolsBarLeft">格式化</el-button>
<el-button type="primary" @click="toolsBarRight">恢复</el-button>
</el-col>
<el-col :span="6">
<el-select v-model="value_type">
<el-option label="JSON" value="JSON"></el-option>
<el-option label="TEXT" value="TEXT"></el-option>
<el-option label="XML" value="XML"></el-option>
<el-option label="HTML" value="HTML"></el-option>
</el-select>
</el-col>
<el-col :span="2" style="float:right">
<el-button type="primary" v-clipboard:copy="contentBackup" @click="copy_value">复制</el-button>
</el-col>
</el-row>
<!-- 编辑器 -->
<div ref="vue_editor" :style="{
height:height,width:width}