Giter VIP home page Giter VIP logo

Comments (3)

rennzhang avatar rennzhang commented on May 28, 2024 1

如果需要访问静态属性,比如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>

from codemirror-editor-vue3.

rennzhang avatar rennzhang commented on May 28, 2024 1

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

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

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

from codemirror-editor-vue3.

limingv5 avatar limingv5 commented on May 28, 2024

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

from codemirror-editor-vue3.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.