js yaml语法编辑器 - CodeMirror使用

骑猪看日落 2023-06-24 12:28 15阅读 0赞

### js yaml语法编辑器 - CodeMirror使用 ###

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

## 下载安装 ##

*  代码托管在Github上，下载地址：[https://github.com/codemirror/CodeMirror/archive/master.zip][https_github.com_codemirror_CodeMirror_archive_master.zip]
 *  npm 下载

> npm install codemirror --save

*  react 版本下载

> npm install react-codemirror2 codemirror --save

## 支持yaml使用方法 ##

*  引入样式和语法支持  
    ![在这里插入图片描述][20191223135917436.png]
 *  实例化

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`

## 效果截图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]  
感谢您的阅读~

[https_github.com_codemirror_CodeMirror_archive_master.zip]: https://github.com/codemirror/CodeMirror/archive/master.zip
[20191223135917436.png]: https://img-blog.csdnimg.cn/20191223135917436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191223140614637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0,size_16,color_FFFFFF,t_70