CodeMirror 笔记

这篇文章用来记录使用 CodeMirror 时的一些心得。

这篇文章用来记录使用 CodeMirror 时的一些心得。

Vue

配合 Vue 使用的时候,我们一般会在 mounted 里初始化 CodeMirror 实例,然后在别的什么地方加载数据,然后通过 cm.setValue(code) 的方式写入代码。

这么做大体上 OK,不过在用户不断 Ctrl + Z 的时候,会清空代码。因为 CodeMirror 初始化的时候里面没有代码,我们第一次 cm.setValue(code) 就会把这个动作放在 history 的第一位,所以后退的时候,清空所有代码也是合理的。

要解决这个问题,一方面,我们可以加载完数据再执行初始化,不过这样页面会跳动,体验不好;或者,第一次填充完代码,清空历史,也可以。

methods: {
  async fetch() {
    const code = await fetchCode();
    this.editor.setValue(data.content);
    this.editor.clearHistory();
  }
},
beforeMount() {
  this.fetch();
},
mounted() {
  this.editor = new CodeMirror.fromTextArea(this.$refs.editor, {...});
  this.editor.on('change', cm => {
    cm.save();
    this.code = cm.getValue();
  });
},

作者: meathill

爱编程,爱旅游,爱吐槽。 今年的目标是完成并运营至少一个 Side Project。 《Electron + Vue 实战开发》龟速创作中……

欢迎吐槽,请勿装死

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据