rennzhang / codemirror-editor-vue3

CodeMirror component for Vue3
https://rennzhang.github.io/codemirror-editor-vue3
MIT License
195 stars 39 forks source link

如何调用原生的foldCode方法? #10

Closed limingv5 closed 2 years ago

limingv5 commented 2 years ago

原生的foldCode是:cminstance.foldCode(CodeMirror.pos(start, end)) CodeMirror是个全局变量,不知道在你的封装实现中,如何调用foldCode?

rennzhang commented 2 years ago

如果需要访问静态属性,比如Pos,可以直接导入 codemirror:

import _CodeMirror from "codemirror";

demo 实例:

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    :height="200"
    @ready="onReady"
  />
</template>

<script lang="ts">
import { ref } from "vue";
import Codemirror from "codemirror-editor-vue3";

import _CodeMirror from "codemirror";
import "codemirror/mode/javascript/javascript.js";

import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const cminstance = ref(null);
    const code = ref(`const obj = {
  name: "peter",
  age: 18
};
`);

    const cmOptions = {
      mode: "javascript",
      foldGutter: true,
      styleActiveLine: true,
      lineWrapping: true,
      extraKeys: {
        "Ctrl-Q": function (cm) {
          cm.foldCode(cm.getCursor());
        },
      },
      gutters: [
        "CodeMirror-linenumbers",
        "CodeMirror-foldgutter",
        "CodeMirror-lint-markers",
      ],
    };

    setTimeout(() => {
      cminstance.value.foldCode(_CodeMirror.Pos(0, 4));
    }, 3000);

    return {
      code,
      cmOptions,
      onReady(cm) {
        cminstance.value = cm;
      },
    };
  },
});
</script>
limingv5 commented 2 years ago

试了下ok了,不过执行foldCode的时机确实要delay一下,可以如上面代码中写的用setTimeout,也可以用 $nextTick

rennzhang commented 2 years ago

理应如此的,至少要在ready之后才能拿到cminstance实例,定时器只是用来测试。

今天发布了新版本,现在可以从库中直接导入CodeMirror

import { CodeMirror } from "codemirror-editor-vue3"