代码编辑器CodeMirror使用总结-基础用法

最新推荐文章于 2025-03-26 15:20:02 发布

桐溪漂流

最新推荐文章于 2025-03-26 15:20:02 发布

阅读量5.6k

点赞数 2

分类专栏：小知识点文章标签：编辑器 javascript codemirror

本文链接：https://blog.youkuaiyun.com/qq564280420/article/details/122410778

版权

小知识点专栏收录该内容

25 篇文章

订阅专栏

CodeMirror的版本: 5.65.0

CodeMirror 是一个web端代码编辑器组件，提供了基本的编辑器功能。通过其提供的插件或者第三方依赖，可以实现既定语言的关键词高亮显示、自动完成提示、设定标记、错误提醒等功能。

生成基本编辑器

模式为javascript模式-可以高亮显示关键字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>base-use</title>
  <!-- 核心库文件的引入 codemirror.js codemirror.css -->
  <link href="./lib/codemirror.css" rel="stylesheet">
  <script src="./lib/codemirror.js"></script>
  <!-- javascript语言模式引入 -->
  <script src="./mode/javascript/javascript.js"></script>
  <style>
    .CodeMirror {
      width: 300px;
      height: 200px;
      border: 1px solid #dcdcdc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div id="editor1"></div>
  <div id="editor2"></div>
  <textarea name="name" id="editor3" cols="30" rows="10">function abc() { }</textarea>
</body>
<script>
  var editorBox1 = document.getElementById('editor1');
  var editorBox2 = document.getElementById('editor2');
  var editorBox3 = document.getElementById('editor3');
  var option = {
    value: 'function test(){}',
    mode: 'javascript',
    lineNumbers: true,
  };
  // 基本使用-此时会把生成的编辑器放在editor元素内
  var editor1 = CodeMirror(editorBox1, option);

  // 如果想指定位置存放生成的编辑器，可以把第一个参数设置为函数
  var editor2 = CodeMirror(elt => {
    // 利用生成的编辑器替换掉editorBox2
    editorBox2.parentNode.replaceChild(elt, editorBox2);
  }, option)

  // 还可以使用 CodeMirror 提供的 fromTextarea 方法
  // 此时 Dom元素需要为 textarea 否则会报错
  // 此时生成的编辑器默认值为 html 中 textarea的值 function abc() {}
  var editor3 = CodeMirror.fromTextArea(editorBox3, option)
</script>
</html>

效果图

自动完成提示

利用内置的javascript自动补全依赖

  <!-- 引入show-hint 和javascript-hint -->
  <link rel="stylesheet" href="./addon/hint/show-hint.css">
  <script src="./addon/hint/show-hint.js"></script>
  <script src="./addon/hint/javascript-hint.js"></script>

  // 以editor1为例
  var editorBox1 = document.getElementById('editor1');
  var option = {
    value: 'function test(){}',
    mode: 'javascript',
    lineNumbers: true,
    // 增加自动完成的配置
    hintOptions: {
      completeSingle: false,
      alignWithWord: false,
      // javascript-hint提供的自动完成的方法。此处可以自定义
      hint: CodeMirror.hint.javascript
    },
  };
  var editor1 = CodeMirror(editorBox1, option);
  editor1.on('keypress', (instance) => {
    // 在键盘事件的时候触发showHint显示自动完成提示框
    instance.showHint();
    // hintOptions配置也可以在此时进行设置
    // instance.showHint({
    //   completeSingle: false,
    //   alignWithWord: false,
    //   hint: CodeMirror.hint.javascript
    // });
  })

效果图