基于Vue的单页面格式化数据高亮编辑器组件:兼容json/xml/html/txt多种格式

前言

项目中遇到这样的需求: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}
  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值