利用codemirror，生成yaml编辑器（vue）

1.YAML和yaml互换json和yaml文件：

1.1 下载js-yaml和yaml组件

npm install yaml --save
npm install js-yaml --save

1.2 封装工具类

import YAML from 'yaml'
import yaml from 'js-yaml'

// json转换为yaml格式
export const json2yaml = (jsonData) => {
    try {
        return {
            data: typeof (jsonData) === 'string' ? yaml.dump(JSON.parse(jsonData)) : yaml.dump(jsonData),
            error: false
        }
    } catch (err) {
        return {
            data: '',
            error: true
        }
    }
}


// yamlStr 为字符串形式的yaml数据
// returnString 是否返回字符串格式的json数据
export const yaml2json = (yamlStr, returnString) => {
    try {
        return {
            data: returnString ? JSON.stringify(YAML.parse(yamlStr), null, 2) : YAML.parse(yamlStr),
            error: false
        }
    } catch (err) {
        return {
            data: '',
            error: true
        }
    }
}

2.封装 CodeEditor组件

<template>
  <div>
    <textarea ref="textarea" id="" cols="30" rows="10"></textarea>
  </div>
</template>
<script>
import "codemirror/lib/codemirror.css";
import "codemirror/mode/css/css.js";
import "codemirror/mode/yaml/yaml.js";
import "codemirror/mode/yaml-frontmatter/yaml-frontmatter.js";
import "`codemirror`/mode/javascript/javascript";
import "codemirror/addon/selection/active-line"; // 代码高亮
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/scroll/simplescrollbars";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/addon/hint/anyword-hint";
import "codemirror/addon/hint/css-hint";
import "codemirror/addon/hint/show-hint.css";
import 'codemirror/theme/rubyblue.css'
  import 'codemirror/theme/xq-light.css'
import "codemirror/theme/monokai.css"; // 主题
import CodeMirror from "codemirror";
export default {
  name: "CodeEditor",
  props: {
    value: {
      type: Object | String,
      default: null,
    },
    mode: {
      type: String,
      default: "yaml", // yaml / application/json
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      codeMirrorEditor: null, // codeMirror实例化对象
    };
  },
  watch: {
    value: {
      handler(val) {
        if (!this.codeMirrorEditor) return;
        const editorValue = this.getCodeMirrorEditorValue();
        if (val !== editorValue) {
          this.setCodeMirrorEditorValue(val);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
      setTimeout(this.initCodeMirrorEditor,500)
    // this.initCodeMirrorEditor();
  },
  destroyed() {
    this.codeMirrorEditor.off("change");
  },

  methods: {
    initCodeMirrorEditor() {
      this.codeMirrorEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
        mode: this.mode,
        lineNumbers: true, // 显示行数
        lint: true,
        indentUnit: 2, // 缩进单位为2
        smartIndent: true, // 自动缩进是否开启
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true, // 括号匹配
        lineWrapping: true, // 自动换行
        tabSize: 2,
        styleActiveLine: true, // 设置光标所在行高亮
        readOnly: this.readOnly,
        theme:"rubyblue",
        scrollbarStyle: "overlay",
      });


      if(this.value) this.setCodeMirrorEditorValue(this.value); // 设置值
      this.codeMirrorEditor.on("change", () => {
        const EditorValue = this.getCodeMirrorEditorValue();
        this.$emit("change", EditorValue);
        this.$emit("input", EditorValue);
      });
    },
    // 设置编辑器支持的语言mode
    setCodeMirrorEditorMode(option) {
      this.codeMirrorEditor.setOption("mode", option);
    },

    // 获取编辑器内容
    getCodeMirrorEditorValue() {
      return this.codeMirrorEditor.getValue();
    },
    // 设置编辑器内容
    setCodeMirrorEditorValue(value) {
      return this.codeMirrorEditor.setValue(value);
    },
    // 刷新编辑器
    refreshCodeMirrorEditor() {
      this.codeMirrorEditor.refresh();
    },
  },
};
</script>

3.具体使用

// html:
<CodeEditor v-model="YamlValues" mode="yaml" /> 

// js:
import { json2yaml, yaml2json } from "@/utils/yaml";
import CodeEditor from '@/components/codeEditor';
export default {
  components: { CodeEditor },  
  data() {
    return {
      YamlValues:null, // yaml值
    };
  },

  mounted(){
    this.getDetails();

  },
  methods: {
    getDetails() {
      api.releases
        .getReleasesDetail()
        .then((res) => {
          this.JsonValues = res.chart.values;
          this.YamlValues = json2yaml(this.JsonValues).data;
        });
    }
  },
 }

标签：vue,hint,codemirror,yaml,import,true,addon
来源： https://blog.csdn.net/Little_Fishs/article/details/122716322