surmon-china/vue-codemirror

@codemirror code editor component for @vuejs

vue-codemirror's Issues

editor instance accessibility

Hi, I'm sorry poor English.

I'm using this library. Thank you for making.
so, I want to use "Autoformart" function like this.
https://codemirror.net/2/demo/formatting.html

but, editor instance cannot access parant component.
https://github.com/surmon-china/vue-codemirror/blob/master/codemirror.vue#L69

Could you make editor instance accessible, or add function like calling parent method?

vue1.0版本中使用codemirror，它的@changed方法不被触发

<codemirror :code="code" :options="editorOption" @Changed="codeChange">
methods:{

		codeChange(newCode){
			console.log('newCode',newCode);
			this._changeSQL(this.uid,newCode)
		},

}
遇到两个问题，一个是codeChange方法不被触发，当我修改代码的时候，还有就是引入 <script src="hint/show-hint.js"></script>
<script src="hint/sql-hint.js"></script>这两个文件的配置项没有起作用，
我是直接在data中加配置项的
data(){
return {
//codemirror的配置项
editorOption:{
lineNumbers: true,//设置行号 boolean
mode: 'text/x-mysql',//当前code模式 模式的选择可以在CodeMirror.modes中查看
//此处是引用sql-hint.js的配置项
hintOptions:{
completeSingle: false, //当匹配只有一项的时候是否自动补全
tables: {
table1: ['name', 'score', 'birthDate'],
table2: ['name', 'population', 'size']
}
},//表元信息
extraKeys: {//快捷键 可提供三种模式 sublime、emacs、vim。 使用时需要引入js支持包
"F9": function (editor) {
format(editor);
},
"F8": function (editor) {
query(editor);
}
}
}
}
}

Consider adding support for CodeMirror Lint mode

If you include {lint: true} in your config, perhaps vue-codemirror should import the requisite lint addon and configure it.

Placeholder addition

Hi,

It would be nice to add a placeholder prop to the text-area in codemirror.vue as such

<textarea ref="textarea" :placeholder="placeholder" v-else></textarea>
...
props: {
  placeholder: String,
...

Many thnxs!

error when using nuxt/ssr

when i use with nuxt making ssr false,

{src: '~/plugins/codemirror', ssr: false}

codemirror.js

import Vue from 'vue'
import VueCodeMirror from 'vue-codemirror'

Vue.use(VueCodeMirror)

the page use the component

<el-form-item label="文章内容">
    <codemirror v-model="form.code" :options="editorOptions"></codemirror>
</el-form-item>

it works well when routing from different page, but it failed when reload the page

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside, or missing . Bailing hydration and performing full client-side render.

How to solve this issue? Thanks in advance :)

it is not compatible with vue ssr project.

  require('codemirror/lib/codemirror.css')

That will affect that the webpack cannot build project.

how to change the editor height in ^3.1.8 version

Hello, the editor's default height is too height for my demand,I need to change it. I try change the css style,but failed! so I need your help, please!

编辑器的事件处理只有changed么

codemirror原本还有光标事件和键盘事件处理，请问是只封装了changed事件吗？还是可以怎么使用别的事件处理

Cannot read property 'attach' of undefined

Getting floowing error when using { keyMap: 'sublime' } in editorOptions

    at Object.eval [as keyMap] (eval at <anonymous> (app.js:955), <anonymous>:7481:13)
    at new CodeMirror$1 (eval at <anonymous> (app.js:955), <anonymous>:7642:26)
    at CodeMirror$1 (eval at <anonymous> (app.js:955), <anonymous>:7587:49)
    at Function.fromTextArea (eval at <anonymous> (app.js:955), <anonymous>:9398:12)
    at VueComponent.mounted (eval at <anonymous> (app.js:1593), <anonymous>:124:30)
    at callHook (eval at <anonymous> (app.js:723), <anonymous>:2557:21)
    at Object.insert (eval at <anonymous> (app.js:723), <anonymous>:3384:7)
    at invokeInsertHook (eval at <anonymous> (app.js:723), <anonymous>:5212:28)
    at Vue$3.patch [as __patch__] (eval at <anonymous> (app.js:723), <anonymous>:5377:5)
    at Vue$3.Vue._update (eval at <anonymous> (app.js:723), <anonymous>:2317:19)

Codemirror is not defined

1.全局引用还需要在但组件中再次引入吗
2.使用组件的方式使用后 ，报错 Codemirror is not defined

TypeError: Cannot read property 'attach' of undefined

When I use this components refer to README.md example,the browser console print this warn,and the vue-codemirror component could not work!

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'attach' of undefined"
TypeError: Cannot read property 'attach' of undefined(…)

when I debug it, found in codemirror.js:7480
7480 option("keyMap", "default", function (cm, val, old) {
7481 var next = getKeyMap(val);
7482 var prev = old != Init && getKeyMap(old);
7483 if (prev && prev.detach) { prev.detach(cm, next); }
7484 if (next.attach) { next.attach(cm, prev || null); }
7585 });
In example, the keyMap option is set to sublime,but not import the correct sublime keymap.
when getKeyMap by val(In eg,val == sublime),the variable 'next' got null!
So next.attach will throw a exception of 'TypeError: Cannot read property 'attach' of undefined'
To resolve it,must import the correct keymap as below
import 'codemirror/keymap/sublime'
or
require('codemirror/keymap/sublime') dynamicly

can not use mime outside `CodeMirror.modeInfo`

For example, the php mode defines mime type application/x-httpd-php-open and text/x-php but not listed in modeInfo, if I set mode: 'application/x-httpd-php-open' it says CodeMirror language mode: undefined configuration error in console.

I have tried to set mode: { name: 'php', startOpen: true}, but it was replaced with mode: 'php' before passing to CodeMirror's fromTextArea method at https://github.com/surmon-china/vue-codemirror/blob/master/codemirror.vue#L55

resize editor height/width?

how resize editor heigth/width ???

I want to use it to code XMl ,how to set ?

中文用户请注意：

1. issue 只接受带重现的 bug 报告，请不要用来提问题！不符合要求的 issue 会被直接关闭。
2. 请尽量用英文描述你的 issue，这样能够让尽可能多的人帮到你。

Got a question?

• The issue list of this repo is exclusively for bug reports and feature requests. For simple questions, please use the following resources:

• Read the docs: https://vuejs.org/guide/

• Look for/ask questions on stack overflow: https://stackoverflow.com/questions/ask?tags=vue.js

Reporting a bug?

• Try to search for your issue, it may have already been answered or even fixed in the development branch.

• It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.

• It is recommended that you make a JSFiddle/JSBin/Codepen to demonstrate your issue. You could start with this template that already includes the latest version of Vue.

• For potential SSR (Server Side Rendering) issue or bugs that involves build setups, you can create a reproduction repository with steps in the README.

• If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.

Have a feature request?

• Remove the template from below and provide thoughtful commentary and code samples on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric.

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

• A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
• You could start with this template: https://jsfiddle.net/39epgLj0/

Steps to reproduce

What is Expected?

What is actually happening?

Custom mode triggers warning in browser

I am using a custom language mode, defined using the mode/simple add-on. It works correctly with CodeMirror in the browser.

However, vue-codemirror triggers a console warning:
⚠ CodeMirror language mode: undefined configuration error (CodeMirror 语言模式配置错误，或者不支持此语言) See http://codemirror.net/mode/ for more details.

This is unhelpful because there is nothing wrong with my CodeMirror configuration or language mode.

vue-codemirror v3.0.0 broke support for webpack import

This change #21 broke support for wepback with ES6 import

import VueCodeMirror from 'vue-codemirror';
throws error:

Cannot assign to read only property 'exports' of object '#<Object>'

It seems to be related to this issue: webpack/webpack#4039 as I am using webpack and ES6 import in my project.

vue-codemirror 2.1.8 does not have this problem

element UI 兼容问题

在elementui中使用dialog显示code mirror，
总要点击面板code mirror才能显示最新的文本
于是想到了auto fucus，但是时而生效 时而不生效
不知道这是不是兼容性问题

<!-- 查看脚本dialog --> <el-dialog :visible.sync="view_sql_ctrl" :modal="false" size="large"> <div class="codemirror"> <codemirror :options="createScriptOptions" v-model="sql_detail"></codemirror> </div> </el-dialog>

Uglify complains SyntaxError

我把vue-codemirror在自己项目中装好后，buld阶段报错：

ERROR in static/js/vendor.8de923185c435eea8019.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/.1.0.4@vue-codemirror/index.js:11,0]

有什么建议吗？

我的package.json中有配置babel相关的包：

{
  "name": "rsite",
  "version": "1.0.0",
  "description": "R浣撻獙鏁欏web鍓嶇",
  "author": "zchrissirhcz <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "test": "",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
    "babel-runtime": "^6.0.0",
    "codemirror": "^5.19.0",
    "vue": "^1.0.21",
    "vue-paginate": "^2.1.2",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vuex": "^1.0.0-rc.2",
    "whatwg-fetch": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.23.0",
    "eslint": "^2.10.2",
    "eslint-config-standard": "^5.1.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-promise": "^1.0.8",
    "eslint-plugin-standard": "^1.3.2",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.12.0",
    "json-loader": "^0.5.4",
    "ora": "^0.2.0",
    "shelljs": "^0.6.0",
    "url-loader": "^0.5.7",
    "vue-codemirror": "^1.0.4",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.3.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
  }
}

How to use addon/merge

Hi,

For some reason, I need to use addon/merge/merge.js of codemirror.

There are difference of constructor between normal codemirror and mergeview:
merge.js suggests to use

this.editor = CodeMirror.MergeView()

However I notice this tool construct a codemirror by

this.editor = CodeMirror.fromTextArea()

So, despite it supports to require some addons, there might be no way to construct a mergeview?

Thanks

Set mode 'text/x-vue', but require all mode when build, how to fix this?

Anyone have this problem? I just use vue mode, but get all mode when build the project.

editorOption: {
          tabSize: 4,
          styleActiveLine: true,
          line: true,
          mode: 'text/x-vue',
          lineWrapping: true,
          theme: 'monokai',
          matchBrackets: true,
          foldGutter: true,
          gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
}

build result:

[email protected]需要点击一下才会显示代码

[email protected]，需要点击一下代码区，才会显示代码

How to load CSS ?

Hi, I've succesfully loaded CodeMirror via your package, although I can't get css to work, is there any extra step required to get the correct CSS to make CodeMirror look like it supposed to ?

Mode "text/plain" blows up with an error.

When setting mode: "text/plain" in codemirror options, an error occurs:
vue.common.js?e881:435 Error: Cannot find module './null/null.js'.

Might be due to the fact that metas.js file contains this record (with mode being "null" string):

{
  name: "Plain Text", 
  mime: "text/plain", 
  mode: "null", 
  ext: ["txt", "text", "conf", "def", "list", "log"]
}

Error in mounted hook

webpack Compiled successfully but in browser not work:

in my main.js:

import Vue from 'vue';
import App from './App';
import router from './route';
import axios from 'axios';
import VueCodeMirror from 'vue-codemirror'

import './less/index';

Vue.use(VueCodeMirror)

Vue.config.debug = true;
Vue.prototype.http = axios;

const app = new Vue({
  router,
  ...App
}).$mount('#app');

component
index.vue:

<template>
  <div class="index_container">
    <h1>index</h1>
    <!-- Bidirectional data binding（双向数据绑定） -->
<codemirror :options="editorOptions"></codemirror>  

  </div>
</template>

<script>
  require('./../lib/css/swiper.min.css')
  require('../less/flex_common.less')
  
  import Swiper from './../lib/js/swiper.min.js'

  
  
  const COMPONENT_NAME = 'index-page';
  
  export default {
    name: COMPONENT_NAME,
    data() {
      return {
        code: 'const a = 10',
        editorOptions: {
          // codemirror options
          tabSize: 4,
          mode: 'text/javascript',
          theme: 'base16-dark',
          lineNumbers: true,
          line: true,
          // sublime、emacs、vim三种键位模式，支持你的不同操作习惯
          keyMap: "sublime",
          // 按键映射，比如Ctrl键映射autocomplete，autocomplete是hint代码提示事件
          extraKeys: {
            "Ctrl": "autocomplete"
          },
          // 代码折叠
          foldGutter: true,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
          // 选中文本自动高亮，及高亮方式
          styleSelectedText: true,
          highlightSelectionMatches: {
            showToken: /\w/,
            annotateScrollbar: true
          },
          // more codemirror config...
          // 如果有hint方面的配置，也应该出现在这里
        }
      }
    },
    components: {
      
    },
    computed: {
     
    },
    mounted() {
      // console.log('this is current editor object', this.editor)
  
    },
    methods: {
      onEditorReady(editor) {
        console.log('the editor is readied!', editor)
      },
      onEditorFocus(editor) {
        console.log('the editor is focus!', editor)
      },
      onEditorCodeChange(newCode) {
        console.log('this is new code', newCode)
        this.code = newCode
      }
    }
  }
</script>

<style lang="less">
  .index_container {}
</style>

Module parse failed codemirror.css You may need an appropriate loader to handle this file type.

I am beginner with vueJS and also to all the toolkits around it I guess my webpack.config.js is missing something

My package.json

{
  "name": "admin",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "admin",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-codemirror": "^3.0.8"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

My webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

My main.js

import Vue from 'vue'
import App from './App.vue'
import VueCodeMirror from 'vue-codemirror'

Vue.use(VueCodeMirror);

new Vue({
  el: '#app',
  render: h => h(App)
});

My App.vue

<template>
    <div>
        <codemirror v-model="code" :options="editorOptions"></codemirror>

        <codemirror ref="myEditor"
                    :code="code"
                    :options="editorOptions"
                    @ready="onEditorReady"
                    @focus="onEditorFocus"
                    @change="onEditorCodeChange">
        </codemirror>
    </div>
</template>

<script>
    // Similarly, you can also introduce the resource pack you want to use within the component
    // require('codemirror/some-resource')
    export default {
        data () {
            return {
                code: 'const a = 10',
                editorOptions: {
                    // codemirror options
                    tabSize: 4,
                    mode: 'text/javascript',
                    theme: 'base16-dark',
                    lineNumbers: true,
                    line: true,
                    // sublime、emacs、vim三种键位模式，支持你的不同操作习惯
                    keyMap: "sublime",
                    // 按键映射，比如Ctrl键映射autocomplete，autocomplete是hint代码提示事件
                    extraKeys: {"Ctrl": "autocomplete"},
                    // 代码折叠
                    foldGutter: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                    // 选中文本自动高亮，及高亮方式
                    styleSelectedText: true,
                    highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true},
                    // more codemirror config...
                    // 如果有hint方面的配置，也应该出现在这里
                }
            }
        },
        methods: {
            onEditorReady(editor) {
                console.log('the editor is readied!', editor)
            },
            onEditorFocus(editor) {
                console.log('the editor is focus!', editor)
            },
            onEditorCodeChange(newCode) {
                console.log('this is new code', newCode)
                this.code = newCode
            }
        },
        computed: {
            editor() {
                return this.$refs.myEditor.editor
            }
        },
        mounted() {
            console.log('this is current editor object', this.editor)
            // you can use this.editor to do something...
        }
    }
</script>

On running npm run dev

WARNING in ./~/codemirror/theme/3024-day.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\3024-day.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-3024-day.CodeMirror { background: #f7f7f7; color: #3a3432; }
| .cm-s-3024-day div.CodeMirror-selected { background: #d6d5d4; }
|
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/3024-night.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\3024-night.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-3024-night.CodeMirror { background: #090300; color: #d6d5d4; }
| .cm-s-3024-night div.CodeMirror-selected { background: #3a3432; }
| .cm-s-3024-night .CodeMirror-line::selection, .cm-s-3024-night .CodeMirror-line > span::selection, .cm-s-3024-night .CodeMirror-line > span > span::selection { background: rgba(58,
 52, 50, .99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/abcdef.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\abcdef.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-abcdef.CodeMirror { background: #0f0f0f; color: #defdef; }
| .cm-s-abcdef div.CodeMirror-selected { background: #515151; }
| .cm-s-abcdef .CodeMirror-line::selection, .cm-s-abcdef .CodeMirror-line > span::selection, .cm-s-abcdef .CodeMirror-line > span > span::selection { background: rgba(56, 56, 56, 0.9
9); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/ambiance-mobile.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\ambiance-mobile.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-ambiance.CodeMirror {
|   -webkit-box-shadow: none;
|   -moz-box-shadow: none;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/ambiance.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\ambiance.css Unexpected token (5:0)
You may need an appropriate loader to handle this file type.
| /* Color scheme */
|
| .cm-s-ambiance .cm-header { color: blue; }
| .cm-s-ambiance .cm-quote { color: #24C2C7; }
|
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/base16-dark.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\base16-dark.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-base16-dark.CodeMirror { background: #151515; color: #e0e0e0; }
| .cm-s-base16-dark div.CodeMirror-selected { background: #303030; }
| .cm-s-base16-dark .CodeMirror-line::selection, .cm-s-base16-dark .CodeMirror-line > span::selection, .cm-s-base16-dark .CodeMirror-line > span > span::selection { background: rgba(
48, 48, 48, .99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/base16-light.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\base16-light.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-base16-light.CodeMirror { background: #f5f5f5; color: #202020; }
| .cm-s-base16-light div.CodeMirror-selected { background: #e0e0e0; }
| .cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: #e
0e0e0; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/bespin.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\bespin.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-bespin.CodeMirror {background: #28211c; color: #9d9b97;}
| .cm-s-bespin div.CodeMirror-selected {background: #36312e !important;}
| .cm-s-bespin .CodeMirror-gutters {background: #28211c; border-right: 0px;}
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/blackboard.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\blackboard.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /* Port of TextMate's Blackboard theme */
|
| .cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; }
| .cm-s-blackboard div.CodeMirror-selected { background: #253B76; }
| .cm-s-blackboard .CodeMirror-line::selection, .cm-s-blackboard .CodeMirror-line > span::selection, .cm-s-blackboard .CodeMirror-line > span > span::selection { background: rgba(37,
 59, 118, .99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/cobalt.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\cobalt.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-cobalt.CodeMirror { background: #002240; color: white; }
| .cm-s-cobalt div.CodeMirror-selected { background: #b36539; }
| .cm-s-cobalt .CodeMirror-line::selection, .cm-s-cobalt .CodeMirror-line > span::selection, .cm-s-cobalt .CodeMirror-line > span > span::selection { background: rgba(179, 101, 57, .
99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/colorforth.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\colorforth.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-colorforth.CodeMirror { background: #000000; color: #f8f8f8; }
| .cm-s-colorforth .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; }
| .cm-s-colorforth .CodeMirror-guttermarker { color: #FFBD40; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/dracula.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\dracula.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
|
|
| .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
|   background-color: #282a36 !important;
|   color: #f8f8f2 !important;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/duotone-dark.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\duotone-dark.css Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-duotone-dark.CodeMirror { background: #2a2734; color: #6c6783; }
| .cm-s-duotone-dark div.CodeMirror-selected { background: #545167!important; }
| .cm-s-duotone-dark .CodeMirror-gutters { background: #2a2734; border-right: 0px; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/duotone-light.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\duotone-light.css Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-duotone-light.CodeMirror { background: #faf8f5; color: #b29762; }
| .cm-s-duotone-light div.CodeMirror-selected { background: #e3dcce !important; }
| .cm-s-duotone-light .CodeMirror-gutters { background: #faf8f5; border-right: 0px; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/eclipse.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\eclipse.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-eclipse span.cm-meta { color: #FF1717; }
| .cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; }
| .cm-s-eclipse span.cm-atom { color: #219; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/elegant.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\elegant.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom { color: #762; }
| .cm-s-elegant span.cm-comment { color: #262; font-style: italic; line-height: 1em; }
| .cm-s-elegant span.cm-meta { color: #555; font-style: italic; line-height: 1em; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/erlang-dark.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\erlang-dark.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-erlang-dark.CodeMirror { background: #002240; color: white; }
| .cm-s-erlang-dark div.CodeMirror-selected { background: #b36539; }
| .cm-s-erlang-dark .CodeMirror-line::selection, .cm-s-erlang-dark .CodeMirror-line > span::selection, .cm-s-erlang-dark .CodeMirror-line > span > span::selection { background: rgba(
179, 101, 57, .99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/hopscotch.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\hopscotch.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-hopscotch.CodeMirror {background: #322931; color: #d5d3d5;}
| .cm-s-hopscotch div.CodeMirror-selected {background: #433b42 !important;}
| .cm-s-hopscotch .CodeMirror-gutters {background: #322931; border-right: 0px;}
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/icecoder.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\icecoder.css Unexpected token (5:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-icecoder { color: #666; background: #1d1d1b; }
|
| .cm-s-icecoder span.cm-keyword { color: #eee; font-weight:bold; }  /* off-white 1 */
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/isotope.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\isotope.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-isotope.CodeMirror {background: #000000; color: #e0e0e0;}
| .cm-s-isotope div.CodeMirror-selected {background: #404040 !important;}
| .cm-s-isotope .CodeMirror-gutters {background: #000000; border-right: 0px;}
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/lesser-dark.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\lesser-dark.css Unexpected token (5:0)
You may need an appropriate loader to handle this file type.
| Ported to CodeMirror by Peter Kroon
| */
| .cm-s-lesser-dark {
|   line-height: 1.3em;
| }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/liquibyte.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\liquibyte.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-liquibyte.CodeMirror {
|       background-color: #000;
|       color: #fff;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/material.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\material.css Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-material.CodeMirror {
|   background-color: #263238;
|   color: rgba(233, 237, 237, 1);
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/mbo.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\mbo.css Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
| /****************************************************************/
|
| .cm-s-mbo.CodeMirror { background: #2c2c2c; color: #ffffec; }
| .cm-s-mbo div.CodeMirror-selected { background: #716C62; }
| .cm-s-mbo .CodeMirror-line::selection, .cm-s-mbo .CodeMirror-line > span::selection, .cm-s-mbo .CodeMirror-line > span > span::selection { background: rgba(113, 108, 98, .99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/mdn-like.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\mdn-like.css Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
|
| */
| .cm-s-mdn-like.CodeMirror { color: #999; background-color: #fff; }
| .cm-s-mdn-like div.CodeMirror-selected { background: #cfc; }
| .cm-s-mdn-like .CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection { background: #cfc; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/midnight.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\midnight.css Unexpected token (4:0)
You may need an appropriate loader to handle this file type.
|
| /*<!--match-->*/
| .cm-s-midnight span.CodeMirror-matchhighlight { background: #494949; }
| .cm-s-midnight.CodeMirror-focused span.CodeMirror-matchhighlight { background: #314D67 !important; }
|
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/monokai.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\monokai.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /* Based on Sublime Text's Monokai theme */
|
| .cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; }
| .cm-s-monokai div.CodeMirror-selected { background: #49483E; }
| .cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62,
.99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/neat.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\neat.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-neat span.cm-comment { color: #a86; }
| .cm-s-neat span.cm-keyword { line-height: 1em; font-weight: bold; color: blue; }
| .cm-s-neat span.cm-string { color: #a22; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/neo.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\neo.css Unexpected token (5:0)
You may need an appropriate loader to handle this file type.
| /* Color scheme */
|
| .cm-s-neo.CodeMirror {
|   background-color:#ffffff;
|   color:#2e383c;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/night.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\night.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /* Loosely based on the Midnight Textmate theme */
|
| .cm-s-night.CodeMirror { background: #0a001f; color: #f8f8f8; }
| .cm-s-night div.CodeMirror-selected { background: #447; }
| .cm-s-night .CodeMirror-line::selection, .cm-s-night .CodeMirror-line > span::selection, .cm-s-night .CodeMirror-line > span > span::selection { background: rgba(68, 68, 119, .99);
 }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/panda-syntax.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\panda-syntax.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|       CodeMirror template by Siamak Mokhtari (https://github.com/siamak/atom-panda-syntax)
| */
| .cm-s-panda-syntax {
|       background: #292A2B;
|       color: #E6E6E6;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/paraiso-dark.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\paraiso-dark.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
| .cm-s-paraiso-dark div.CodeMirror-selected { background: #41323f; }
| .cm-s-paraiso-dark .CodeMirror-line::selection, .cm-s-paraiso-dark .CodeMirror-line > span::selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::selection { background: rg
ba(65, 50, 63, .99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/paraiso-light.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\paraiso-light.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-paraiso-light.CodeMirror { background: #e7e9db; color: #41323f; }
| .cm-s-paraiso-light div.CodeMirror-selected { background: #b9b6b0; }
| .cm-s-paraiso-light .CodeMirror-line::selection, .cm-s-paraiso-light .CodeMirror-line > span::selection, .cm-s-paraiso-light .CodeMirror-line > span > span::selection { background:
 #b9b6b0; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/pastel-on-dark.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\pastel-on-dark.css Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .cm-s-pastel-on-dark.CodeMirror {
|       background: #2c2827;
|       color: #8F938F;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/railscasts.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\railscasts.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-railscasts.CodeMirror {background: #2b2b2b; color: #f4f1ed;}
| .cm-s-railscasts div.CodeMirror-selected {background: #272935 !important;}
| .cm-s-railscasts .CodeMirror-gutters {background: #2b2b2b; border-right: 0px;}
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/rubyblue.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\rubyblue.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-rubyblue.CodeMirror { background: #112435; color: white; }
| .cm-s-rubyblue div.CodeMirror-selected { background: #38566F; }
| .cm-s-rubyblue .CodeMirror-line::selection, .cm-s-rubyblue .CodeMirror-line > span::selection, .cm-s-rubyblue .CodeMirror-line > span > span::selection { background: rgba(56, 86, 1
11, 0.99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/seti.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\seti.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
|
|
| .cm-s-seti.CodeMirror {
|   background-color: #151718 !important;
|   color: #CFD2D1 !important;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/solarized.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\solarized.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .solarized.base03 { color: #002b36; }
| .solarized.base02 { color: #073642; }
| .solarized.base01 { color: #586e75; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/the-matrix.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\the-matrix.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-the-matrix.CodeMirror { background: #000000; color: #00FF00; }
| .cm-s-the-matrix div.CodeMirror-selected { background: #2D2D2D; }
| .cm-s-the-matrix .CodeMirror-line::selection, .cm-s-the-matrix .CodeMirror-line > span::selection, .cm-s-the-matrix .CodeMirror-line > span > span::selection { background: rgba(45,
 45, 45, 0.99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/tomorrow-night-bright.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\tomorrow-night-bright.css Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-tomorrow-night-bright.CodeMirror { background: #000000; color: #eaeaea; }
| .cm-s-tomorrow-night-bright div.CodeMirror-selected { background: #424242; }
| .cm-s-tomorrow-night-bright .CodeMirror-gutters { background: #000000; border-right: 0px; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/tomorrow-night-eighties.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\tomorrow-night-eighties.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| */
|
| .cm-s-tomorrow-night-eighties.CodeMirror { background: #000000; color: #CCCCCC; }
| .cm-s-tomorrow-night-eighties div.CodeMirror-selected { background: #2D2D2D; }
| .cm-s-tomorrow-night-eighties .CodeMirror-line::selection, .cm-s-tomorrow-night-eighties .CodeMirror-line > span::selection, .cm-s-tomorrow-night-eighties .CodeMirror-line > span >
 span::selection { background: rgba(45, 45, 45, 0.99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/ttcn.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\ttcn.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-ttcn .cm-quote { color: #090; }
| .cm-s-ttcn .cm-negative { color: #d44; }
| .cm-s-ttcn .cm-positive { color: #292; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/twilight.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\twilight.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .cm-s-twilight.CodeMirror { background: #141414; color: #f7f7f7; } /**/
| .cm-s-twilight div.CodeMirror-selected { background: #323232; } /**/
| .cm-s-twilight .CodeMirror-line::selection, .cm-s-twilight .CodeMirror-line > span::selection, .cm-s-twilight .CodeMirror-line > span > span::selection { background: rgba(50, 50, 5
0, 0.99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/vibrant-ink.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\vibrant-ink.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /* Taken from the popular Visual Studio Vibrant Ink Schema */
|
| .cm-s-vibrant-ink.CodeMirror { background: black; color: white; }
| .cm-s-vibrant-ink div.CodeMirror-selected { background: #35493c; }
| .cm-s-vibrant-ink .CodeMirror-line::selection, .cm-s-vibrant-ink .CodeMirror-line > span::selection, .cm-s-vibrant-ink .CodeMirror-line > span > span::selection { background: rgba(
53, 73, 60, 0.99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/xq-dark.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\xq-dark.css Unexpected token (23:0)
You may need an appropriate loader to handle this file type.
| THE SOFTWARE.
| */
| .cm-s-xq-dark.CodeMirror { background: #0a001f; color: #f8f8f8; }
| .cm-s-xq-dark div.CodeMirror-selected { background: #27007A; }
| .cm-s-xq-dark .CodeMirror-line::selection, .cm-s-xq-dark .CodeMirror-line > span::selection, .cm-s-xq-dark .CodeMirror-line > span > span::selection { background: rgba(39, 0, 122,
0.99); }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/xq-light.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\xq-light.css Unexpected token (23:0)
You may need an appropriate loader to handle this file type.
| THE SOFTWARE.
| */
| .cm-s-xq-light span.cm-keyword { line-height: 1em; font-weight: bold; color: #5A5CAD; }
| .cm-s-xq-light span.cm-atom { color: #6C8CD5; }
| .cm-s-xq-light span.cm-number { color: #164; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/yeti.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\yeti.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
|
|
| .cm-s-yeti.CodeMirror {
|   background-color: #ECEAE8 !important;
|   color: #d1c9c0 !important;
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

WARNING in ./~/codemirror/theme/zenburn.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\theme\zenburn.css Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .cm-s-zenburn .CodeMirror-gutters { background: #3f3f3f !important; }
| .cm-s-zenburn .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: #999; }
| .cm-s-zenburn .CodeMirror-cursor { border-left: 1px solid white; }
 @ ./~/codemirror/theme ^\.\/.*\.css$
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

ERROR in ./~/codemirror/lib/codemirror.css
Module parse failed: C:\Users\alibh\IdeaProjects\admin\node_modules\codemirror\lib\codemirror.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /* BASICS */
|
| .CodeMirror {
|   /* Set height, width, borders, and global font properties here */
|   font-family: monospace;
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue 9:0-40
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Please help me out i am struggling with it for past 3 hrs

lint is not triggered on change

Hey Surmon,

I just configured jsonlint and vue-codemirror but it looks like linting is not triggered.
I found few problem and walkarounds for them like fixing jsonlint issue

  // See https://github.com/zaach/jsonlint/issues/57
  node: {
    fs: 'empty'
  }

import jsonlint from 'jsonlint'
window.jsonlint = jsonlint
require('codemirror/addon/lint/lint.js')
require('codemirror/addon/lint/json-lint.js')
...
<style lang="scss">
@import "~codemirror/addon/lint/lint.css";

$editor.getOption('lint') returns true
Do I have to manually triger linting like editor.lint.json or something?

Thanks for help! :)

多语言动态切换

简单看了下，本项目中只会按照初始化配置的语言引入对应的js文件。https://github.com/surmon-china/vue-codemirror/blob/master/codemirror.vue#L115

但是如果需要多种语言，然后互相切换的话，就会发现其他语言的js没有被引入，导致高亮和空格等出现问题。我尝试在组件外边require相关的js，貌似没有效果。

请问这个如何解决呢？

How to use code fold

Hello,
First of all, thanks for this wonderful component.

According to documentation you can require codemirror addons directly on .vue files. This is not working for me. I'm trying to add code folding, and I'm failing miserably.

I tried just requiring all the fold stuff, and then import the component, but this does not work:

// foldGutter
require('codemirror/addon/fold/foldgutter.css')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/comment-fold.js')
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/xml-fold.js')

import { jsonParse } from '../utils';
import { codemirror } from 'vue-codemirror'

export default {
  components: {
    codemirror
},
data () {
    return {
      editorOptions: {
        // codemirror options
        tabSize: 2,
        lineNumbers: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        line: true,
        undoDepth: 100,
        dragDrop: false,
        pollInterval: 200,
        mode: {
          name: 'javascript',
          json: true
        },
        lineWrapping: true
      }
    }
  }
}

I think I am following documentation closely, so not sure if this is a bug or a misunderstanding.

Thanks and regards.

Setting keyMap cause error

Vue.js version and component version

Vue: v2.1.10
vue-codemirror: not working in both v3.0.0 and v3.0.3

using webpack import

Steps to reproduce

The keyMap sample code provided in the readme is not working.

export default {
  data () {
    return {
      code: 'const a = 10',
      editorOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
        // sublime、emacs、vim三种键位模式，支持你的不同操作习惯

        // none of the keyMap is working.
        // removing keyMap stopped the error from happening.
        keyMap: "sublime",
      }
    }
  },

What is Expected?

keyMap was working on v2.1.8 using the same configuration

What is actually happening?

On component mounted:

TypeError: Cannot read property 'attach' of undefined
    at Object.eval [as keyMap] (eval at <anonymous> (app.js:716), <anonymous>:7282:13)
    at new CodeMirror$1 (eval at <anonymous> (app.js:716), <anonymous>:7444:26)
    at CodeMirror$1 (eval at <anonymous> (app.js:716), <anonymous>:7389:49)
    at Function.fromTextArea (eval at <anonymous> (app.js:716), <anonymous>:9204:12)
    at VueComponent.mounted (eval at <anonymous> (app.js:2111), <anonymous>:98:30)
    at callHook (eval at <anonymous> (app.js:748), <anonymous>:2223:21)
    at Object.insert (eval at <anonymous> (app.js:748), <anonymous>:3032:5)
    at invokeInsertHook (eval at <anonymous> (app.js:748), <anonymous>:4832:28)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:748), <anonymous>:4996:5)
    at VueComponent.Vue._update (eval at <anonymous> (app.js:748), <anonymous>:1997:19)
handleError @ vue.common.js?e881:1450
callHook @ vue.common.js?e881:2225
insert @ vue.common.js?e881:3032
invokeInsertHook @ vue.common.js?e881:4832
patch @ vue.common.js?e881:4996
Vue._update @ vue.common.js?e881:1997
updateComponent @ vue.common.js?e881:2100
get @ vue.common.js?e881:2415
run @ vue.common.js?e881:2485
flushSchedulerQueue @ vue.common.js?e881:2279
(anonymous) @ vue.common.js?e881:460
nextTickHandler @ vue.common.js?e881:409

Upon typing or clicking on vue-codemirror

Uncaught TypeError: Cannot read property 'call' of undefined
    at lookupKey (eval at <anonymous> (app.js:716), <anonymous>:6536:21)
    at lookupKeyForEditor (eval at <anonymous> (app.js:716), <anonymous>:6793:8)
    at dispatchKey (eval at <anonymous> (app.js:716), <anonymous>:6809:16)
    at handleKeyBinding (eval at <anonymous> (app.js:716), <anonymous>:6843:12)
    at CodeMirror$1.onKeyDown (eval at <anonymous> (app.js:716), <anonymous>:6861:17)
    at HTMLTextAreaElement.eval (eval at <anonymous> (app.js:716), <anonymous>:3858:30)
lookupKey @ codemirror.js?59f4:6536
lookupKeyForEditor @ codemirror.js?59f4:6793
dispatchKey @ codemirror.js?59f4:6809
handleKeyBinding @ codemirror.js?59f4:6843
onKeyDown @ codemirror.js?59f4:6861
(anonymous) @ codemirror.js?59f4:3858

Adding support for setting mime by ext

I know that codemirror supports the mode being either a string equal to the mime type e.g text/javascript or object e.g {name: 'javascript'}. However given that you are using the CodeMirrorMetas.findModeByMIME method it entirely possible for your vue component to identify the mode by file extension as well.

Replacing lines 42 - 56 of codemirror.vue with the below allows you to define mode via options.mode being equal to {name: 'markdown'}, or {ext: 'md'} or string 'text/x-markdown'.

        var findLang  = function () {
        // String Config
        if (typeof language == 'string') {
          let lang = CodeMirrorMetas.findModeByMIME(language)
          language = !lang ? lang : lang.mode
          return true
        }
        // Object Config
        if (typeof language == 'object') {
          if (language.name) {
            let lang = CodeMirrorMetas.findModeByName(language.name)
            if (lang) {
              language = lang.mode
              return true
            }
          }
          if(language.ext) {
            let lang = CodeMirrorMetas.findModeByExtension(language.ext)
            if (lang) {
              language = lang.mode
              this.options.mode.name = language
              return true
            }
          }
          if(language.mime) {
            let lang = CodeMirrorMetas.findModeByMIME(language.mime)
            if (lang) {
              language = lang.mode
              this.options.mode.name = language
              return true
            }
          }
        }
        console.error('CodeMirror language mode configuration error (CodeMirror语言模式配置错误，或者不支持此语言) See http://codemirror.net/mode/ for more details.')
        return false
      }

      if (!findLang.call(this)) {
        return false
      }

shell脚本怎么配置

如题，语法高亮设置可以，但是怎么让插件可以想shell那样自动完成

editorOption: { tabSize: 4, styleActiveLine: true, line: true, mode: 'text/x-sh', lineWrapping: true, theme: 'base16-dark', scrollbarStyle: null, }

Uncaught TypeError: Cannot set property 'content' of null

使用你的repo中example目录所提供的代码，chrome控制台看到报错:

es5.js?3983:44 Uncaught TypeError: Cannot set property 'content' of null

这种情况下，尝试获取代码区域的内容，则获取为空。

vue-codemirror已经不支持vue1了吗

not found "remove" property when beforeDestory in IE10

beforeDestroy: function beforeDestroy() {
this.editor.doc.cm.getWrapperElement().remove();
},

not found remove property

changeObj doesn't contain the information presented in the CM User Manual

Maybe I'm not following the correct procedure, but when I console.log the information from the "change" event, I'm getting the whole value of the editor instance. I need to get all of the other information in the {from, to, text, removed, origin} object that is presented in the CM User Manual.

用作富文本编辑器的问题

我用来做富文本编辑器，添加内容、修改内容的时候都是如下配置，现在的问题来了：

<el-form-item required label="商品介绍">
<quill-editor ref="myTextEditor" v-model="form.goodsDesc" :config="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)">
</quill-editor>
</el-form-item>

我从服务器读取回来的富文本内容，被解析成字符显示在编辑器内，而不是预期那样会当成html来渲染。

不能使用自定义mode

使用了这里的代码，复制进去，运行报错：

Error: CodeMirror language mode: mymode configuration error (CodeMirror语言模式配置错误，或者不支持此语言)

还是说根本不支持自定义mode...

How to upgrade vue-codemirror from v3 to v4?

How to upgrade vue-codemirror from v3 to v4?

I have tried updating my package.json to refer to ^4.0.0 and change .editor reference to .codemirror, but not displaying codemirror editor at all. Reverting back to ^3.0.0 works.

Any guidance on how to upgrade from v3 to v4?

Get event change on $emit

Hello my friend,
How to get code after inserted?

I tried to capture the change event but without success
I'm trying
this.$on
this.$root.$on (....
but without success, could you inform me a way to get the code after inserting it into the editor?

Lazy loading modes doesn't work

Hi there,

there seems to be a problem when trying to lazy load modes like in the CodeMirror example.

this.$refs.codemirror.editor.setOption('mode', syntax);
CodeMirror.autoLoadMode(this.$refs.codemirror.editor, syntax);

syntax in this case would be 'text/x-php' or any other of the supported language mime types.

TypeError: CodeMirror.autoLoadMode is not a function

Is this a known problem or is some workaround needed? :)

webpack package all the modes and themes because of the wrong "require"

中文描述

webpack构建时，对于这种动态计算的路径require('codemirror/mode/' + language + '/' + language + '.js')，会将codemirror/mode下的所有文件都打包到项目中，所以这边的代码按需引入是无效的，只能用户在外边自己引入所需mode和theme

English Description

when use webpack build，because of the use of [ require('codemirror/mode/' + language + '/' + language + '.js')]，webpack packages all the modes and the themes into the dist but not the specified language mode。

can you support scroll event

Can you add scroll event support?

I just added this event in events array, and it's work

modes are not 'mounted'

hi, i have this code:

import VueCodemirror from 'vue-codemirror'
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
console.log(VueCodemirror.CodeMirror.modes);
console.log(CodeMirror.modes);

and this is the log result:

Object {null: function}
Object {null: function, javascript: function}

any idea how to load mode into the vue-codemirror instance?

Feature request - ability to use external theme

I found this repo - https://github.com/FarhadG/code-mirror-themes

But there's no way of using these external themes because of this line:

  // require theme
  if (theme) {
    require('codemirror/theme/' + theme + '.css')
  }

Can we somehow make this optional?

Thanks

动态改变editorOption

比如我想动态改变语言mode

怎么改变codemirror的大小？

通过css来设置它的告诉没有效果，高度一直是默认的，怎么改变呢？

谢谢！

Useful examples

Could you provide a complete working example that can be run locally?

Take this as an example: https://github.com/surmon-china/vue-codemirror/blob/master/examples/-1-default-vue.vue

Where does the component "codemirror" comes from? What is the current bundle system? How is it configured?

Copying some of the examples and trying to add the component to the project following the instructions lead me to errors like this:

[Vue warn]: Failed to mount component: template or render function not defined. 
(found in component <codemirror>)

Uncaught SyntaxError: Unexpected token <

Sorry for not to follow the template written in the github textbox but results that I am spanish and I don't understand the Chinese language =)
I was writing my project yesterday and I got integration for vue-codemirror in my project, but this morning when I went to make more write in my project the error described in the title:
Uncaught SyntaxError: Unexpected token <
But I review my code against the examples in github and is exactly the same...

import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'

// Codemirror
import VueCodeMirror from 'vue-codemirror'
Vue.use(VueCodeMirror)

// stylesheets
import 'font-awesome/css/font-awesome.min.css'

import App from './App'
// import routes from './routes'

Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true

// const router = new Router({
//   routes
// })

/* eslint-disable no-new */
window.a = new Vue({
  ...App
}).$mount('#app')

Also I am using the electron-vue boilerplate described here: link

Here is the root project package.json:

{
  "name": "ylt",
  "version": "0.0.0",
  "description": "Aplicacion que se usara para que la gente pueda estudiar mejor y mas rápido",
  "scripts": {
    "build": "npm run pack && build",
    "build:dir": "npm run pack && build --dir",
    "dev": "node tasks/runner.js",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix app",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.renderer.config.js",
    "postinstall": "npm run lint:fix && cd app && npm install"
  },
  "build": {
    "productName": "ElectronVue",
    "appId": "org.simulatedgreg.electron-vue",
    "category": "public.app-category.tools",
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "files": [
      "dist/",
      "node_modules/",
      "package.json"
    ],
    "mac": {
      "icon": "app/icons/icon.icns"
    },
    "win": {
      "icon": "app/icons/icon.ico"
    },
    "linux": {
      "target": [
        "AppImage"
      ]
    }
  },
  "author": "Greg Holguin <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.18.0",
    "babel-runtime": "^6.6.1",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "del": "^2.2.1",
    "devtron": "^1.1.0",
    "electron": "^1.3.1",
    "electron-builder": "^11.4.4",
    "electron-debug": "^1.1.0",
    "electron-devtools-installer": "^2.0.1",
    "electron-rebuild": "^1.1.3",
    "eslint": "^3.13.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.16.1",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.1",
    "tree-kill": "^1.1.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^2.0.7",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^10.0.2",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {}
}

Here is the app folder package.json:

{
  "name": "ylt",
  "version": "0.0.0",
  "main": "./dist/main.js",
  "dependencies": {
    "babel-runtime": "^6.23.0",
    "codemirror": "^5.25.2",
    "font-awesome": "^4.7.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "vue": "^2.1.10",
    "vue-codemirror": "^3.0.5",
    "vue-electron": "^1.0.6",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.2",
    "vuex": "^2.1.1"
  },
  "devDependencies": {
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3"
  },
  "author": ""
}

Image error

Thanks =)

Lazy loading modes

Is it possible to lazy load modes like?

I'm starting to think that it is not because the modes are loaded in through require. If it is could you provide an example.

Unknown custom element issue

I having Following can u please provide solutions?

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at /home/bhagvat/work/HowToUSe/codedemo/src/components/codedemo.vue
at /home/bhagvat/work/HowToUSe/codedemo/src/App.vue