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

最新推荐文章于 2025-05-14 20:44:24 发布

原创

最新推荐文章于 2025-05-14 20:44:24 发布

· 4.9k 阅读

16 ·

版权

文章标签：

#vue #javascript

该博客介绍了基于Vue的单页面组件，用于格式化并高亮显示JSON、XML、HTML和TXT数据，支持编辑和保存。组件基于ACE编辑器和vkbeautify，利用elementUI进行样式处理，同时引入了vue-clipboard2实现复制功能。文章详细讲解了如何引入、使用和扩展编辑器，提供了项目源码和在线演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

项目中遇到这样的需求：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}">

最低0.47元/天解锁文章