cnu4 / vue-codemirror-lite Goto Github PK

目前只能再单独引用CodeMirror才能使用，但是因为版本问题，bundle可能会引入两个CodeMirror，其实是不合理的

rollup打包的时候，需要按需导入主题配置，因为是静态资源，并没有导入什么方法之类的东西，所以打包的时候被tree-shaking掉了，有没有什么办法规避这个问题？
require('codemirror/mode/javascript/javascript')

我把extraKeys: {"Ctrl": "autocomplete"}放进options对象，然后把整个使用codemirror组件封装成了一个组件在其他html页面中调用，options当中的其他属性都能有效果，唯独extraKeys属性无效。

It seems like the only event that works in this component is @change but I noticed that the code mirror api has a lot more events. Is there something I'm missing there? Looking to use like so:

<codemirror
  :value="code"
  :options="editorOption"
  @focus="someFunction"
  @blur="someOtherFunction">
</codemirror>

Hi!

How can i access codemirror api? I need to refresh() on my cm instance.
I tried to use it with refs like:

this.$refs.codemirror.refresh();

but its seemed not working.

编辑器光标有时会定位不准，如果定位在第一行时，不显示光标
，这个是什么问题导致的

when this component user with v-if:

<codemirror v-if="flag" :value="code" ></codemirror>

when the value of flag turns to false from true, the console of explorer prints error as follow:

app.js:101328 TypeError: Cannot read property 'removeChild' of null
    at CodeMirror$1.cm.toTextArea (app.js:19030)
    at VueComponent.beforeDestroy (app.js:3339)
    at callHook (app.js:102506)
    at VueComponent.Vue.$destroy (app.js:102288)
    at destroy (app.js:103721)
    at invokeDestroyHook (app.js:105258)
    at removeVnodes (app.js:105274)
    at updateChildren (app.js:105379)
    at patchVnode (app.js:105451)
    at updateChildren (app.js:105337)

Version: 1.0.4
var CodeMirror = require('vue-codemirror-lite/node_modules/codemirror/lib/codemirror.js')

不应该是下面的才对么
var CodeMirror = require('codemirror/lib/codemirror.js')
既然denpendency都已经安装了，那直接引入就行了呀

设置了 {lint:true} 了,

import 'codemirror/addon/lint/lint.js' // 错误校验
import 'codemirror/addon/lint/javascript-lint.js' // js错误校验
import 'codemirror/addon/lint/css-lint.js'
import 'codemirror/addon/lint/lint.css'

该引入的也都引入了, 就是不起效

I use it in a route page of a vue project,but when leaving from the route page to another route page,the console would show the error:
TypeError: Cannot read property 'removeChild' of null
Is it because the instance is not destroyed?
I would be very grateful if you could help.

string.split is not a function

@cnu4

Hello,
I'm making my first (hello world) project in Vue, and want to use this package.
My bootstrap.js looks like this:

import VueRouter from 'vue-router';
import axios from 'axios';
import Form from './utilities/Form';
import { codemirror } from 'vue-codemirror-lite';

window.Vue = Vue;
Vue.use(VueRouter);

window.axios = axios;
window.axios.defaults.headers.common = {
	'X-Requested-With': 'XMLHttpRequest'
}
window.Form = Form;


export default {
  components: {
    codemirror
  }
}

and i'm getting the error "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.". Is this a bug, or do I do something wrong?

Hi, this is in my console:

beforeCreate
:
[ƒ]
beforeDestroy
:
ƒ beforeDestroy()
data
:
ƒ data()
mounted
:
ƒ mounted()
props
:
{value: {…}, options: {…}}
ready
:
ƒ ready()
render
:
ƒ ()
staticRenderFns
:
[]
watch
:
{value: ƒ, options: ƒ}
__file
:
"node_modules\vue-codemirror-lite\codemirror.vue"
_compiled
:
true
__proto__
:
Object```
https://gyazo.com/1fe3acc19f4c549e94b3abeed3fb969c

why?

I followed all the instructions but its still not working

Produces the following error, one instance works perfectly though.

Error in mounted hook: "TypeError: Cannot read property 'split' of null"

Still want this to support more events listed in CodeMirror doc... :-(

I tried the following two methods are not effective…

<template>
  <codemirror placeholder="zzz" :options="options"></codemirror>
</template>

<script>
  export default {
    data () {
      return {
        options: {
          placeholder: 'zzz'
        }
      }
    }
  }
</script>

Hello,
I'm trying to set the viewport margin to Infinity, but it doesn't work.

<codemirror :options="{
          tabSize: 2,
          viewportMargin: Infinity,
          lineNumbers: true,
          mode: this.mode,
          line: true,
        }" />

I'm trying to import the theme css as such:

<style lang="stylus">
import 'codemirror/theme/3024-night.css'
</style>

and using it in the options I pass to the codemirror component as:

options: {
  theme: '3024-night'
}

But the theme doesn't get applied.

I'm using the default vue-cli webpack template.

Hello,

how would I go about synchronizing a scroll with another div element that contains the preview? With a textarea I can use @scroll=xxx on both elements, and synchronise them accordingly. With this component I'd likely need some way to access this.editor and watch scrollTo/getScrollInfo?

Any help is appreciated :)