ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

利用codemirror,生成yaml编辑器(vue)

2022-01-27 14:04:29  阅读:505  来源: 互联网

标签:vue hint codemirror yaml import true addon


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有