简体中文(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
433

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伐。

Antworte allen(3)
伊谢尔伦
伊谢尔伦2017-04-11 12:59:25 3 Etage

结贴了。

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

效果

参考

Wie +0
Antwort hinzufügen
PHPzhong
PHPzhong2017-04-11 12:59:25 2 Etage

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


这里应该是 import Codemirror from 'codemirror/css/codemirror' 或 import Codemirror from 'codemirror/js/codemirror'  可能路径没写对。
Wie +0
Antwort hinzufügen
伊谢尔伦
伊谢尔伦2017-04-11 12:59:25 1 Etage 
npm install vue-codemirror

vue-codemirror

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！