Vue3.0+TS整合codemirror
Vue3+TS整合codemirror
·
1. 安装codemirror
npm install vue-codemirror --save
2.版本号
"codemirror": "^5.65.2",
3. 编写组件
例:mirrorTextArea.vue(组件名称, 具体名称以各自项目规范为准)
<template>
<div>
<textarea ref="editor"></textarea>
</div>
</template>
<script setup lang="ts">
// 引入全局实例
import _CodeMirror from "codemirror/lib/codemirror.js";
// 核心样式
import "codemirror/lib/codemirror.css";
import "codemirror/theme/monokai.css";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/display/fullscreen.css";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/matchesonscrollbar.css";
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/edit/closetag.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/edit/closebrackets.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/edit/matchtags.js";
import "codemirror/addon/display/fullscreen.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/scroll/simplescrollbars.js";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/css/css.js";
import { ref, nextTick } from "vue";
import "codemirror/mode/javascript/javascript.js";
let props = defineProps({
mode: {
type: String,
required: false,
default: 'htmlmixed'
},
content: {
type: String,
required: false,
default: ''
}
})
const editor = ref();
let coder;
nextTick(() => {
coder = _CodeMirror.fromTextArea(editor.value, {
mode: props.mode, // 不设置的话,默认使用第一个引用
// 缩进格式
tabSize: 2,
// 显示行号
lineNumbers: true,
lineWrapping: true,
theme: "monokai",
matchTags: { bothTags: true },
foldGutter: true,
autoCloseTags: true,
autoCloseBrackets: true,
scrollbarStyle: "simple",
extraKeys: {
"Alt-F": "findPersistent",
},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "breakpoints"]
});
coder.setValue(props.content);
});
/**
* 对外提供赋值
*/
const setValue = (val: string) => {
coder.setValue(val);
};
/**
* 设置模式
*/
const setMode = (mode: string) => {
console.info(mode)
coder.setOption("mode", mode);
}
/**
* 对外提供取值
*/
const getValue = () => {
return coder.getValue();
};
defineExpose({
setValue,
getValue,
setMode,
})
</script>
4. 使用组件
引入组件, 具体名称及路径以实际项目路径为准
import mirrorTextArea from "@src/views/mirror/mirrorTextArea.vue";
<template>
<mirror-text-area
ref="mirrorRef"
:mode="resourceModalPro.mode"
:content="resourceModalPro.content"
></mirror-text-area>
</template>
<script setup lang="ts">
import { onMounted, defineComponent, ref, nextTick } from "vue";
import mirrorTextArea from "@src/views/mirror/mirrorTextArea.vue";
const resourceModalPro: any = ref({mode: "", content: "" });
/**
* 赋值方法, 取值方法, 根据具体场景调用
* nextTick(() => {
* mirrorRef.value.setValue(resourceModalPro.value.content);
* mirrorRef.value.setMode(resourceModalPro.value.mode);
* console.info(mirrorRef.value.getValue());
* });
*/
</script>
<style>
.CodeMirror {
width: 100%;
height: 600px;
font-size: 16px;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)