在Vue中使用CodeMirror 格式显示错误行数错乱 & 代码隐藏

项目需要在线展示和编辑Json文件，所以需要找一个代码编辑器，因为我们的项目直接使用的 vueAdmin-template 这个模板，json编辑器也是直接从 vue-element-admin 项目扒下来的……

遇到问题

第一个问题，一个页面有多个tab页，而json显示不在第一个tab页中，那么跳转到页面再点击json所在tab页……

嗯……默认显示不出来……奇怪的事情是，当你点击一下，数据就出来了……

第二个问题

行数显示错位……当行数增加为10行时即变为正常……

分析

怀疑是由于当页面第一次渲染时，编辑器没有能正确的计算宽高等展示属性，当点击或者行数变化时触发了刷新所以显示变为正常。

所以找到 codemirror 的刷新函数，当 tab 切换的时候，手动触发刷新即可。

解决方案

1、手动刷新

在组件中新增一个函数

methods: {

    refresh() {

        this.jsonEditor && this.jsonEditor.refresh();

    }

},

需要刷新时去触发该函数。

this.$nextTick(() => {

    this.$refs.jsonEditor.refresh();

});

2、增加配置项 autoRefresh: true

但是亲测这样只能触发一次自动更新，如果还是遇到问题的话还是要考虑手动刷新。

完整代码（代码里同时使用了两种解决方案，全部注释掉可以复现bug）：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>test vue json editor</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/lint/lint.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/lint/json-lint.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/display/autorefresh.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/darcula.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/lint/lint.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />

</head>

<body>

<div id="app">

  {{ title }}

  <button @click="handleVisibleChange">显示/隐藏</button>

  <div v-show="show">

    <json-editor ref="jsonEditor" v-model="jsonData"></json-editor>

    <button @click="handleReset">重置</button>

    <button @click="handleSave">保存</button>

  </div>

</div>

<script>

  // 注册编辑器组件

  Vue.component('json-editor', {

    template: `<div class="json-editor"><textarea ref="textarea"></textarea></div>`,

    data() {

      return {

        jsonEditor: null

      }

    },

    props: {

      value: String,

      input: Function

    },

    watch: {

      // 监听 value 的变化

      value(value) {

        const editorValue = this.jsonEditor.getValue();

        if (value !== editorValue) {

          this.jsonEditor.setValue(JSON.stringify(JSON.parse(value), null, 2));

        }

      }

    },

    mounted() {

      this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {

        lineNumbers: true,

        mode: 'application/json',

        gutters: ['CodeMirror-lint-markers'],

        theme: 'darcula',

        lint: true,

        autoRefresh: true // 自动触发刷新

      });

      // 将json文件格式化显示

      this.jsonEditor.setValue(JSON.stringify(JSON.parse(this.value), null, 2));

      // 当输入框内容发生变化 更新value值

      this.jsonEditor.on('change', cm => {

        this.handleInput(cm);

        this.$emit('changed', cm.getValue());

        this.$emit('input', cm.getValue());

      });

    },

    methods: {

      getValue() {

        return this.jsonEditor.getValue()

      },

      handleInput(e) {

        if (this.changeFn) {

          this.changeFn(e.getValue())

        }

      },

      refresh() {

        /*

         * refresh: Fires when the editor is refreshed or resized.

         *          Mostly useful to invalidate cached values that depend on the editor or character size.

         */

        this.jsonEditor && this.jsonEditor.refresh();

      }

    }

  });

  var app = new Vue({

    el: '#app',

    data: {

      title: 'JSON 编辑器',

      jsonData: '{"key":"value"}',

      show: false

    },

    methods: {

      handleReset() {

        this.jsonData = '{"key":"value"}';

      },

      handleSave() {

        alert(this.jsonData);

      },

      // 当切换视图为显示json编辑器时 手动刷新

      handleVisibleChange() {

        if (this.show = !this.show) {

          this.$nextTick(() => {

            this.$refs.jsonEditor.refresh(); // 手动触发刷新

          });

        }

      }

    }

  });

</script>

</body>

</html>

其他：

注意所有用到的 theme，addon，mode 都需要单独引入，引入之后配置才会生效

codemirror 文档 https://codemirror.net/doc/manual.html

在Vue中使用CodeMirror 格式显示错误行数错乱 & 代码隐藏的更多相关文章

Oracle查询结果中的日期格式显示到毫秒数，如何去掉多余的数
@Temporal(TemporalType.TIMESTAMP) @Column(name="createTime",nullable=false) private Date c ...
css让文字显示特定行数，多余的显示省略号
/*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...
黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式一.总结一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
C#/VB.NET 如何在Excel中使用条件格式设置交替行颜色
说起高亮数据行,不让人想起了交替颜色行,有的人把交替颜色行也都设置成高亮,不仅不美观,而且对阅读还是个干扰.隔行交替的颜色是为了阅读不串行,这些行只是环境,数据才是主体.那么如何通过C#/VB.NET ...
【转】Eclipse Console 加大显示的行数，禁止弹出
转载地址:http://blog.csdn.net/leidengyan/article/details/5686691 Eclipse Console 加大显示的行数: 在 Preferences- ...
通过崩溃地址找错误行数之Delphi版
通过崩溃地址找错误行数之Delphi版2009-5-11 17:42:35 来源: 转载作者:网络访问:360 次被顶:2 次字号:[大中小]核心提示:什么是 MAP 文件?简单地讲, M ...
line-height超出隐藏显示的行数和垂直居中
line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...
使用css控制文字显示几行并且剩余部分隐藏（移动端和PC端同样适用）
前言有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢? 解决办法我们完全可以使用css来解决这一需求 1. 解决文本显 ...
Weblogic页面应用查询oracle数据库后台报错或页面日期格式显示错误
问题:在生产环境中有两台WEB服务器,分别为227和228,部署的应用代码都是每日同步的,两边完全一致,但是某些页面查询数据时,227无结果,并且后台报java数组越界的错误,而228一切正常.经开发 ...

随机推荐

清理xcode
移除 Xcode 运行安装 APP 产生的缓存文件(DerivedData) ~/Library/Developer/Xcode/DerivedData 移除 APP 打包的ipa历史版本(Archi ...
jquery 设置某div里面的内容为此div里面非img标签的内容
$('#div_1').html($('#div_1').children().not("img")); 要注意 <div id="#div_1"> ...
FortiGate设置E-mail告警
1.配置邮件服务器 2.配置告警
[leetcode]35. Search Insert Position寻找插入位置
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
记录一次Centos磁盘空间占满的解决办法（转）
原文地址:https://blog.csdn.net/everything1209/article/details/70209157 解决前磁盘使用情况: 第二块磁盘使用率达到97% [root@f ...
jdbcTemplate的简单介绍
Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDBC模板类是第一种工作模式. JdbcTempl ...
(转)Android四大组件——Activity跳转动画、淡出淡入、滑出滑入、自定义退出进入
文章转自:http://blog.csdn.net/qq_30379689/article/details/52494270 Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入前言: 系统 ...
Spark大数据针对性问题。
1.海量日志数据,提取出某日访问百度次数最多的那个IP. 解决方案:首先是将这一天,并且是访问百度的日志中的IP取出来,逐个写入到一个大文件中.注意到IP是32位的,最多有个2^32个IP.同样可以采 ...
【机器学习】Octave 实现逻辑回归 Logistic Regression
ex2data1.txt ex2data2.txt 本次算法的背景是,假如你是一个大学的管理者,你需要根据学生之前的成绩(两门科目)来预测该学生是否能进入该大学. 根据题意,我们不难分辨出这是一种二分 ...
poj1284
一个欧拉函数的应用,当时也没有太搞清,这里直接用的当时的模板 #include<iostream> #include<cstdlib> #include<cstdio&g ...

在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏