在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一切正常.经开发 ...
随机推荐
- 【Django】HTTP status code must be an integer.
刚刚出现这个问题,还以为是表单提交或者什么网络错误 结果发现是自己的低级错误写了 HttpResponse(request,'sigin_result2.html',context)这个根本不能渲染模 ...
- 页面引入js问题
今日问题:左侧菜单栏多余的菜单不可以滚动,自己找了很长时间,前端同事帮忙找了很长事件,最后帮我找到问题所在. 这里红色部分标识有多余部分,可以滑动是对的.但是滑动了. 问题:jquery引入的地方错了 ...
- iOS之Safari调试webView/H5页面
之前做过混合开发,用的是JavaScriptCore+OC+UIWebView. Safari调试功能真的很有用,通过它可以轻松定位问题的所在,下面说说怎么调试. 开启Safari开发菜单 在Mac的 ...
- PHP错误日志记录：display_errors与log_errors的区别
我们所做的东西,无论在开发环境还是在生产环境都可能会出现一些问题. 开发环境下,我们会要求错误尽可能详细的呈现出来,错误提示信息越详细越好,越详细越能帮助开发人员确定问题所在并从根本上解决他们. 生产 ...
- 113. Path Sum II 输出每个具体路径
［抄题］: Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the gi ...
- MySQL数据查询之单表查询
单表查询 简单查询 - 创建表 DROP TABLE IF EXISTS `person`; CREATE TABLE `person` ( `id` ) NOT NULL AUTO_INCREMEN ...
- 17. pt-online-schema-change
在平时MySQL的运维过程中,经常会遇到表结构的变更.在表比较小的时候,直接进行变更,时间较短,但是当表非常大的时候,这么做会导致应用卡死,服务不可用.目前InnoDB引擎是通过以下步骤来进行DDL的 ...
- 找不到phpize
yum install php-devel 报错如下: 解决办法: yum install php71w-devel
- 【NIFI】 Apache NiFI 安装及简单的使用
NiFI介绍 NiFi(NiagaraFiles)是为了实现系统间数据流的自动化而构建的.虽然术语“数据流”用于各种上下文,但我们在此处使用它来表示系统之间的自动和管理信息流 官网地址:http:// ...
- C#中Equals()和= =(等于号)区别
在这里,首先得告诉大家,在C#中,不管是 == ,还是 Equals() 我们都是可以重写的.所以,在具体选择使用两者时,还是得根据这两个方法的具体实现逻辑来选择. 值类型的比较 对于值类型来说,两者 ...