简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - vuejs项目中怎样引入codemirror
伊谢尔伦
伊谢尔伦 2017-04-11 12:57:25
0
3
475

1.问题

用了vuejs的项目中，使用codemirror做实时代码高亮。

对于codemirror相关的css和js文件，如果手动引入外部的，则能正确显示行号、实时高亮（本地编辑器如sublime的高亮体验）

如果引入通过npm下载到node_modules目录下的，那么就不能正常使用：语法不能高亮。

2.代码

用vue-cli的webpack模版建的项目。

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  
  <script src="static/lib/codemirror.js"></script>
  <link rel="stylesheet" href="static/lib/codemirror.css">
  <script src="static/mode/javascript/javascript.js"></script>
  
  
</head>

<body>
  <h1>代码编辑区域</h1>
  <p v-banzi="neirong"></p>
</html>

入口js文件main.js

import Vue from 'vue'
// import CodeMirror from 'codemirror'

Vue.directive('banzi', {
  twoWay: true,
  bind: function () {
    this.codemirror = CodeMirror(this.el, {
      mode: 'javascript',
      lineNumbers: true
    })
    this.codemirror.on('change', function () {
      this.set(this.codemirror.getValue())
    }.bind(this))
  },
  update: function (value, oldValue) {
    this.codemirror.setValue(value || '')
  }
})


/* eslint-disable no-new */
new Vue({
  el: 'body',
  data: {
    'neirong': ''
  }
})

====== update ======

用npm装的codemirror，里面没有index.js，有bower.json:

{
  "name": "codemirror",
  "main": ["lib/codemirror.js", "lib/codemirror.css"],
  "ignore": [
    "**/.*",
    "node_modules",
    "components",
    "bin",
    "demo",
    "doc",
    "test",
    "index.html",
    "package.json",
    "mode/*/*test.js",
    "mode/*/*.html"
  ]
}

参照bower.json,我尝试这样引入codemirror:

import CodeMirror from 'codemirror/lib/codemirror.js'

但是不起作用

===== 再次update ======

在根组件App.vue中这样引入codemirror:

import CodeMirror from 'codemirror/lib/codemirror'   // CodeMirror，必要
import 'codemirror/lib/codemirror.css'    // css，必要
import 'codemirror/mode/javascript/javascript'  // js的语法高亮，自行替换为你需要的语言
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(3)
伊谢尔伦
伊谢尔伦2017-04-11 12:59:25 3 楼

结贴了。

import CodeMirror from 'codemirror/lib/codemirror'   // CodeMirror，必要
import 'codemirror/lib/codemirror.css'    // css，必要
import 'codemirror/mode/javascript/javascript'  // js的语法高亮，自行替换为你需要的语言

效果

参考

点赞 +0
添加回复
PHPzhong
PHPzhong2017-04-11 12:59:25 2 楼

如果引入通过npm下载到node_modules目录下的，那么就不能正常使用：语法不能高亮。


这里应该是 import Codemirror from 'codemirror/css/codemirror' 或 import Codemirror from 'codemirror/js/codemirror'  可能路径没写对。
点赞 +0
添加回复
伊谢尔伦
伊谢尔伦2017-04-11 12:59:25 1 楼 
npm install vue-codemirror

vue-codemirror

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！