code-editor代码编辑

代码编辑器-Codemirror

主题： https://blog.csdn.net/qq_41694291/article/details/106429772

这个是vue3基于Codemirror@5封装的。

官网：https://rennzhang.github.io/codemirror-editor-vue3/zh-CN/

下面是我基于这个框架封装的组件。

1. 支持自定义主题
2. 支持自定义宽
3. 支持placeholder
4. 支持语言

CodeEditor.vue

<template>
  <div class="codeEditorClass" :style="{width:editorWidth}">
    <Codemirror
        v-model:value="code"
        :options="cmOptions"
        border
        ref="cmRef"
        @ready="onReady"
    >
    </Codemirror>
  </div>

</template>
<script setup>
import {ref, onMounted, onUnmounted,defineProps,computed } from "vue"
// 主题css
import 'codemirror/theme/darcula.css'
import 'codemirror/theme/eclipse.css'

import "codemirror/mode/javascript/javascript.js"
import "codemirror/mode/sql/sql.js"
import Codemirror from "codemirror-editor-vue3"

const props = defineProps({
  placeholder: {
    default: "",
    type: String,
  },
  width: {
    default: "100%",
    type: String,
  },
  type: {
    default: "text/javascript",
    type: String,
  },
  theme: {
    default: "eclipse",
    type: String,
  },
});

const editorWidth = computed(() => {
  return `${props.width}`;
})


const code = ref(props.placeholder)

const cmRef = ref()
const cmOptions = {
  mode: props.type,
  theme: props.theme
}

onMounted(() => {
  // 监听屏幕
  window.onresize = function () {
    setCmRefHeight()
  }
})


const onReady = (cm) => {
  setCmRefHeight()
}

let setCmRefHeight = function () {
  //动态计算高，铺满屏幕
  let browserHeight = window.innerHeight;
  let menuHeight = document.getElementById("menu")?.offsetHeight ?? 0;
  let toolbarHeight = document.getElementById("toolbar")?.offsetHeight ?? 0;
  let extInfoHeight = document.getElementById("ext-info")?.offsetHeight ?? 0;

  cmRef.value?.resize('100%',  browserHeight - menuHeight - toolbarHeight - extInfoHeight - 30 )
}

onUnmounted(() => {
  cmRef.value?.destroy()
})

let setCode = (val)=> {
  code.value = val
}

// 暴露方法
defineExpose({
  code,
  setCode
});
</script>

<style scoped>
.codeEditorClass{
  /*width: 100%;*/
}
</style>

使用

<CodeEditor  ref="codeEditorRef" :placeholder="placeholder" :type="'text/x-sql'" :theme="'darcula'"/>

<script setup>
import {ref, onMounted, onUnmounted} from "vue"
import CodeEditor  from "@/components/CodeEditor.vue";


const codeEditorRef = ref();
const handleData = ()=>{
  //获取组件内的值
  let val = codeEditorRef.value.code;
  //设置组件内的值
  codeEditorRef.value.setCode(newVal)
}
</script>

代码展示-prismjs

官网：https://prismjs.com/plugins/line-numbers/

这个框架非常的简单好用，但是只能作为展示使用。

yarn add prismjs

页面显示

<template>
  <pre><code class="language-js">{{ code }}</code></pre>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';

export default {
  data() {
    return {
      code: `function helloWorld() {
              console.log('Hello, world!');
            }`
    };
  },
  mounted() {
    Prism.highlightAll();
  }
};
</script>

SQL格式化

"sql-formatter": "^15.4.2"

import * as sqlFormatter from 'sql-formatter'
let str = sqlFormatter.format(`SELECT * FROM TB_USER WHERE NAME = '张三'`);
console.log(str)

JSON编辑器

json-editor-vue3 ： https://github.com/guyue88/json-editor-vue3

jsoneditor ：https://github.com/josdejong/jsoneditor

vue-json-editor ：https://github.com/dirkliu/vue-json-editor