codeMirror 学习 重置编辑器 代码对比 一行格式化

官方网站：CodeMirror

解决问题：

1.从后台获取的代码是压缩后的，怎么显示成json格式呢？

答： 先将数据json换，再格式化。（原理：codeMirror是用null作为默认换行符的）

let d = "[{"xxx":0}]"
let c = JSON.parse(d);
let e = JSON.stringify(c,null,2)
this.jsonEditor.setValue(e)

2.怎么做代码双屏同步滚动对比

答：在安装了codeMirror的基础上，再安装个diff-match-patch包，网上文档很多。

       主要强调2点：

  (1). 做对比时，如果不想改代码，要设置2个参数，如下

revertButtons: true, // 是否显示还原按钮
readOnly: true// 只读 不可修改

(2).就是上面的问题，传值要先格式化了，不然代码都堆在一行上了。

例：CodeMirror.MergeView_都是浮云-CSDN博客

3.怎么清空代码

答：主要原理，先设置值为“”，再清空历史。

this.editor.setValue("");
this.editor.clearHistory();

一般参数，网上都查得到，最大的问题是，遇到清空需求报错。强迫症不想看报错，不想看红x

解决办法如下：

props:['value'],
watch:{
 value(v){
   const e_v = this.editor.getValue();
   if(v !== e_v){
     if(v === undefined){
       this.editor.setValue("");
       this.editor.clearHistory();
       return false;
     }
     this.editor.setValue(JSON.stringify(this.value,null,2));
   }
 }
},
mounted() {
  this.editor = new CodeMirror.fromTextArea(this.$refs.editor, {...});
  this.editor.on('change', cm => {
    cm.save();
    this.code = cm.getValue();
  });
  this.editor.setValue("");
  this.editor.clearHistory();
  if(this.value!==undefined){
    this.editor.setValue(JSON.stringify(this.value,null,2));
  }
 
},

其他：使用 CodeMirror 打造在线代码编辑器_mxh的博客-CSDN博客_codemirror

设置字体：等宽无衬线

五大类：serif, sans-serif, monospace, cursive, fantasy

serif 衬线字体，如 Big Caslon, 宋体

sans-serif 非衬线字体，如 Helvetica, 黑体

monospace 等宽字体，如 Menlo

cursive 手写体，如 Comic Sans MS

fantasy 幻想体，如 Bodoni Ornaments

font-family: sans-serif, monospace