手把手教你搭建網頁代碼編輯器

時間 2019-12-12

原文原文鏈接

CodeMirror

CodeMirror 是一個能夠鑲嵌到 Web 頁面中代碼編輯器組件。它的核心代碼庫僅僅提供了編輯器功能，沒有提供像是 自動補全, 語法糾錯 等IDE功能。
CodeMirror 提供了豐富的api，讓你能夠輕易的拓展想要的功能。javascript

使用方法

瀏覽器

在瀏覽器中使用的話，你須要引用編輯器核心 js 和 css 文件，每一個編輯器主題對應一個css文件，你須要引用你所指定的編輯器主題對應的css。每一個編輯器語言對應一個js文件，需引入你須要編輯的語言對應的js文件。css

以下，咱們建立一個編輯 javascript 代碼的編輯器：html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/lib/codemirror.css">
  <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/theme/material.css">
  <title>Document</title>
  <style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  textarea {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
  <textarea id="text">
    var myTextArea = document.getElementById('text');
    var editor = CodeMirror.fromTextArea(myTextArea, {
      lineNumbers: true,
      mode: 'javascript',
      theme: 'material'
    });
    editor.on('change', () => {
      console.log(editor.getValue());
    });
  </textarea>
</body>
<script src="https://unpkg.com/codemirror@5.40.0/lib/codemirror.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/mode/javascript/javascript.js"></script>
<script>
  var myTextArea = document.getElementById('text');
  var editor = CodeMirror.fromTextArea(myTextArea, {
    lineNumbers: true,
    mode: 'javascript',
    theme: 'material'
  });
  editor.on('change', () => {
    console.log(editor.getValue());
  });
</script>
</html>

上邊的代碼複製到html文件便可運行。從上邊的代碼能夠看到，咱們使用 CodeMirror.fromTextArea() 建立了一個編輯器，固然還有其餘的方法來建立。java

從textarea建立，會自動替換textarea而且獲取textarea的值，填充到編輯器。

<textarea id="text">console.log('codemirror!');</textarea>
<script>
const myTextArea = document.getElementById('textarea');
CodeMirror.fromTextArea(myTextArea, {
  lineNumbers: true,
  mode: 'javascript'
});
</script>

指定父級元素建立編輯器

以下代碼，CodeMirror 會建立一個編輯器，插入到 body 節點下。git

<body></body>
<script>
CodeMirror(document.body, {
  value: 'console.log("codemirror")',
  mode: 'javascript'
});
</script>

模塊打包用法

咱們能夠經過 Webpack 來打包使用 codemirror。github

先經過 npm 下載codemirror：npm

npm i codemirror

引用 codemirror 所須要的 js 和 css 文件：api

const CodeMirror = require('codemirror'); // 編輯器主邏輯文件
require('codemirror/mode/javascript/javascript.js'); // 編輯器支持 javascript
require('codemirror/lib/codemirror.css'); // 編輯器主樣式文件
require('codemirror/theme/material.css'); // 編輯器主題樣式文件

CodeMirror(document.body, {
  value: 'console.log("codemirror")',
  mode: 'javascript',
  theme: 'material'
});

簡單經常使用的api

在咱們使用 CodeMirror 搭建編輯器以後，可能會用到下面一些簡單的api。詳細的api列表在這裏：api list.瀏覽器

getValue()bash

獲取編輯器當前的值。

const editor = CodeMirror(document.body);

function getEditorValue() {
  return editor.getValue();
}

setValue(value: String)

改變編輯器的值。

const editor = CodeMirror(document.body);

function setEditorValue(value) {
  editor.setValue(value);
}

on(eventName: String, handler: Function)

編輯器時間監聽。

支持豐富的event類型，完整的event 類型你能夠在這裏查閱：event list。好比，咱們能夠監聽編輯器內容改變，當編輯器內容改變時，輸出編輯器的內容：

const editor = CodeMirror(document.body);

editor.on('change', (codemirrorIns, codemirrorObj) => {
  console.log(editor.getValue());
});

IDE拓展

CodeMirror 支持豐富的IDE拓展，這些拓展放在 codemirror/addon文件夾下。咱們能夠經過引入該文件夾下的IDE文件，從而讓咱們編輯器的功能更加豐富。完整的IDE拓展列表在這裏：addon list.

以下示例展現了開啓javascript語法糾錯：(直接將代碼複製到html文件便可運行)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/lib/codemirror.css" />
  <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/theme/material.css" />
  <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/addon/lint/lint.css" />
  <title>Document</title>
  <style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  textarea {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>
<textarea id="text">
const a = 
</textarea>
</body>
<script src="https://unpkg.com/jshint@2.9.6/dist/jshint.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/lib/codemirror.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/mode/javascript/javascript.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/addon/lint/lint.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/addon/lint/javascript-lint.js"></script>
<script>
  var myTextArea = document.getElementById('text');
  var editor = CodeMirror.fromTextArea(myTextArea, {
    lineNumbers: true,
    mode: 'javascript',
    theme: 'material',
    lint: true
  });
  editor.on('change', () => {
    console.log(editor.getValue());
  });
</script>
</html>

固然，CodeMirror 的功能十分豐富，好比 按鍵映射、主題定製、Vim模式等，更深刻的使用能夠查閱 CodeMirror 官網。

本章完