手把手教你搭建网页代码编辑器

2023年4月10日 109次阅读 来源: PengJiyuan

CodeMirror

CodeMirror 是一个能够镶嵌到 Web 页面中代码编辑器组件。它的中心代码库仅仅供应了编辑器功用，没有供应像是 自动补全, 语法纠错 等IDE功用。
CodeMirror 供应了雄厚的api，让你能够随意马虎的拓展想要的功用。

运用方法

浏览器

在浏览器中运用的话，你须要援用编辑器中心 js 和 css 文件，每一个编辑器主题对应一个css文件，你须要援用你所指定的编辑器主题对应的css。每一个编辑器言语对应一个js文件，需引入你须要编辑的言语对应的js文件。

以下，我们建立一个编辑 javascript 代码的编辑器：

<!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() 建立了一个编辑器，固然另有其他的方法来建立。

  • 从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 节点下。

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

模块打包用法

我们能够经由过程 Webpack 来打包运用 codemirror。

先经由过程 npm 下载codemirror：

npm i codemirror

援用 codemirror 所须要的 js 和 css 文件：

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()

猎取编辑器当前的值。

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 官网。

本章完

我的Github:
https://github.com/PengJiyuan

我的博客:
https://isweety.me

    原文作者：PengJiyuan
    原文地址: https://segmentfault.com/a/1190000016291663
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞