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 class="line-numbers"><code class="lang-java">{{ targetCode }}</code></pre>
</template>

<script setup>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
//java代码
import 'prismjs/components/prism-java.js';

// import "prismjs/themes/prism-tomorrow.min.css"//高亮主题
import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"//行号插件
import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"//行号插件的样式

import {ref, onMounted, nextTick, watch} from 'vue';
const targetCode = ref(`import lombok.Data;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

/**
 * 树节点结构 的基类。
 */
@Data
public class TreeNode<K,T> implements Serializable {

    /** 主键 */
    private K id;

    /** 父菜单ID */
    private K parentId;

    /** 导航名字 */
    private String name;

    /** 排序 */
    private Integer sort;

     /** 层级 */
    private Integer deep;

    /** 下级节点 */
    List<T> childList = new ArrayList<>();
}`);


onMounted(() => {
  //高亮显示
  Prism.highlightAll();
})
</script>

<style scoped>

</style>

vue3实现

这里有很大的坑，如果用平常的写法样式会失效。必须这样写才可以

<template>
  <button @click="xx()">click</button>
  <pre class="line-numbers"><code ref="codeBlock" class="language-javascript"></code></pre>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
//java代码
import 'prismjs/components/prism-java.js';
import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"//行号插件
import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"//行号插件的样式

const codeBlock = ref(null);

const xx = () => {
  // 假设你的代码存储在codeData变量中
  const codeData = `import lombok.Data;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

/**
 * 树节点结构 的基类。
 */
@Data
public class TreeNode implements Serializable {

    /** 主键 */
    private K id;
}`;
  //这个是核心代码
  codeBlock.value.textContent = codeData;
  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