js yaml语法编辑器 - CodeMirror使用

    • 下载安装
    • 支持yaml使用方法
    • 效果截图

下载安装

  • 代码托管在Github上，下载地址：https://github/codemirror/CodeMirror/archive/master.zip
  • npm 下载

npm install codemirror --save

  • react 版本下载

npm install react-codemirror2 codemirror --save

支持yaml使用方法

  • 引入样式和语法支持
  • 实例化
const yamlCodeMirrorEle = document.getElementById('el');
 this.myCodeMirror = CodeMirror(yamlCodeMirrorEle, {
   value: '',
   mode: 'yaml',
   lineNumbers: true,     // 显示行数
   indentUnit: 1,         // 缩进单位为2
   styleActiveLine: true, // 当前行背景高亮
   matchBrackets: true,   // 括号匹配
   lineWrapping: true,    // 自动换行
   tabSize: 2,
 });
 // 监听输入值变化
 this.myCodeMirror.on('change', (cm) => {
   console.log(eidtorText: cm.doc.getValue())
 })
 // 切换配置方法
 // this.myCodeMirror.setOption('mode', 'javascript')
  • 判断输入值是否为yaml格式
    使用js-yaml库或者yaml库，安装方法npm install js-yaml --save
const parseYamlFn = (str) => {
  let isYaml = false;
  let errorMessage = '';
  try {
    isYaml = !!jsyaml.load(str)
  } catch(e) {
    errorMessage = e && e.message;
  }
  return {
    isYaml, errorMessage
  };
}

效果截图


感谢您的阅读~

更多推荐

js yaml语法编辑器 - CodeMirror使用