js yaml语法编辑器 - CodeMirror使用

下载安装

• 代码托管在Github上，下载地址：https://github.com/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
  };
}

效果截图

感谢您的阅读~