Vue2.6引入codemirror并获取其内容

solution

Vue项目
需求：提供 用户输入指令 的功能

task

使用codemirror优化用户体验

action

使用codemirror

Vue3使用codemirror
按照步骤安装后，总是报错如下所示，查询未果

事实证明，当发现bug不能解决时，查看官网的作用最大
vue-codemirror npm

按照官网的说法，只有Vue3及以上版本才能使用Codemirror@6版本，而我们项目中Vue版本为2.6，所以当然无法使用6.0版本以上的codemirror

   "vue": "^2.6.14",
1

于是，我们尝试另一种解法
vue2项目使用codemirror插件实现代码编辑器功能

由此，我们想要的效果就实现啦

获取codemirror内容

mounted声明周期中，挂载codemirror的onchange监听事件，更新欲上传表单中calcCommand的值

 // 挂载监听事件
    calcCommandEditor.on('change', (cm) => {
      this.form.calcCommand = cm.getValue(); // 这里要用多一个载体去获取值,不然会重复赋值卡顿
      console.log(this.form.calcCommand)
    });
1
2
3
4
5

得到codemirror中的值，如下所示：

result

1. 认准官网的重要性，发现此路不通时，迅速寻求其他方向
2. 利用搜索引擎，找对关键字，尽快筛选出我们想要的文档