原生js 使用 CodeMirror组件 - 自定义字段高亮方法 - 简易使用CodeMirror组件，封装成方法，方便使用

在我们使用CodeMirror组件高亮的时候， 有些项目需求自定义一些字段进行高亮，大家如有同样需求请仔细观看如下文字以及图和代码；

* codemirror 组件 编辑器输入框

* 依赖名称 codemirror 编辑器输入框

* 版本 5.63.1

* 依赖 全部js css 下载地址 https://cdnjs.com/libraries/codemirror/5.63.1

* 必要codemirror css

* /codemirror/codemirror.min.css

* 必要codemirror js

* /codemirror/codemirror.min.js

必要的两个文件 一个js和css文件，如有别的需求可通过上面下载地址去单独下载单独的文件，然后引入到项目里

封装的js文件 codemirrorConfig.js 可以直接放到依赖包里，与其同级就行

/**
 * 封装 CodeMirror 使用的方法 参数
 * @param {*} objFrom 
 * id 页面使用元素的#id值
 * setData 传过来需要往里面增加高亮的数组
 * width 输入框宽
 * heigth 输入框高
 * @returns editor 整个方法
 */

function initializeCustomCodeMirror(objFrom) {
  // 默认 javascript 高亮值
  let keywords = [
    ['if', "keyword"],['while', "keyword"],['with', "keyword"],['else', "keyword"],['do', "keyword"],
    ['try', "keyword"],['finally', "keyword"],['return', "keyword"],['break', "keyword"],['continue', "keyword"],
    ['new', "keyword"],['delete', "keyword"],['void', "keyword"],['throw', "keyword"],['debugger', "keyword"],
    ['var', "keyword"],['const', "keyword"],['let', "keyword"],['function', "keyword"],['catch', "keyword"],
    ['for', "keyword"],['switch', "keyword"],['case', "keyword"],['default', "keyword"],['in', "keyword"],
    ['typeof', "keyword"],['instanceof', "keyword"],['true', "atom"],['false', "atom"],['null', "atom"],
    ['undefined', "atom"],['NaN', "atom"],['Infinity', "atom"],['this', "keyword"],['class', "keyword"],
    ['super', "keyword"],['yield', "keyword"],['export', "keyword"],['import', "keyword"],['extends', "keyword"],['await', "keyword"]
  ];

  // 将传过来的 需要设置高亮的数据拼装成 所需的数组并放进 默认数组里 进行设置
  // 可将 自定义加进来的字段 更改成任意自己写的样式或颜色
  if (objFrom.setData.length > 0){
    for (let index = 0; index < objFrom.setData.length; index++) {
      const element = objFrom.setData[index];
      keywords.push([element, "begin-style"]);
    }
  }
  // 设置 高亮字段 方法
  CodeMirror.defineMode("javascript", () => ({
    token: (stream, state) => {
      const cmCustomCheckStreamFn = (streamWrapper) => {
        // 自定义关键字和样式
        for (let i = 0; i < keywords.length; i++) {
          if (streamWrapper.match(keywords[i][0])) {
            return keywords[i][1];
          }
        }
        return "";
      };
      const ret = cmCustomCheckStreamFn(stream);
      if (ret.length > 0) return ret;
      stream.next();
      return null;
    }
  }));

  // 使用原生获取 id 值
  let textareaElement = document.getElementById(objFrom.id);
  //根据DOM元素的id构造出一个编辑器
  let editor = CodeMirror.fromTextArea(textareaElement, {
    mode: "javascript", // 实现代码高亮
    lineWrapping: true, // 自动换行
    lineNumbers: true, //显示行号
    matchBrackets: true, // 括号匹配
    styleActiveLine: true // 光标行高亮
  });
  //设置代码框的长宽
  editor.setSize(objFrom.width || "400px", objFrom.heigth || "250px");

  return editor; // Return the CodeMirror instance if needed
}

使用方法 html

<textarea id=code name=code></textarea>

调用方法以及 传参数

       // 使用 CodeMirror 输入框 方法以及传参数， 参数可参考 initializeCustomCodeMirror方法内
        let myCodeMirror = initializeCustomCodeMirror({
          id: "code",
          setData: ["哈哈", "商家", "如果", "否则"],
          width: "400px",
          heigth: "250px"
        });
        // myCodeMirror.setValue(""); // 代码框的值清空 以及 设置内容方法
        let valerdd = myCodeMirror.getValue(); //获取输入的内容
        console.log(valerdd, "????");

注意：以上传参看不懂可去方法js里去看注释，initializeCustomCodeMirror方法必传参数是id，其他可选择传，最最最注意的是，注意执行顺序，先加载文件和方法后在使用方法；

如果有用，麻烦各位大佬点个赞，如有更好的方法欢迎讨论；