Closed limingv5 closed 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>
试了下ok了,不过执行foldCode的时机确实要delay一下,可以如上面代码中写的用setTimeout,也可以用 $nextTick
理应如此的,至少要在ready之后才能拿到cminstance实例,定时器只是用来测试。
今天发布了新版本,现在可以从库中直接导入CodeMirror
:
import { CodeMirror } from "codemirror-editor-vue3"
原生的foldCode是:cminstance.foldCode(CodeMirror.pos(start, end)) CodeMirror是个全局变量,不知道在你的封装实现中,如何调用foldCode?