深色模式
CodeEditor 编辑器
代码编辑器，用于编辑或预览代码片段。
基本用法
点击查看代码
vue
<template>
<el-form :labelWidth="100" inline>
<el-form-item label="显示边框">
<el-switch v-model="editorBorder" />
</el-form-item>
<el-form-item label="只读状态">
<el-switch v-model="editorReadonly" />
</el-form-item>
</el-form>
<vue-code-editor v-model="scriptText" style="height: 210px;" placeholder="请输入内容"
:readonly="editorReadonly" :border="editorBorder" />
</template>
<script setup lang="ts">
import { ref } from "vue";
const editorBorder = ref<boolean>(true);
const editorReadonly = ref<boolean>(false);
const scriptText = ref<string>(
"const count = 0;\n\n" +
"const increase = () => {\n" +
" count++;\n" +
"}\n"
);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
底部操作栏
点击查看代码
vue
<template>
<vue-code-editor v-model="scriptText" style="height: 210px;" footer border />
</template>
<script setup lang="ts">
import { ref } from "vue";
const scriptText = ref<string>(
"const count = 0;\n\n" +
"const increase = () => {\n" +
" count++;\n" +
"}\n"
);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
自定义缩进
点击查看代码
vue
<template>
<el-form :labelWidth="100" inline>
<el-form-item label="缩进大小">
<el-radio-group v-model="editorTabSize">
<el-radio :value="2">2</el-radio>
<el-radio :value="4">4</el-radio>
<el-radio :value="6">6</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<vue-code-editor v-model="scriptText" style="height: 210px;" :tabSize="editorTabSize" border footer />
</template>
<script setup lang="ts">
import { ref } from "vue";
const editorTabSize = ref<number>(4);
const scriptText = ref<string>(
"const count = 0;\n\n" +
"const increase = () => {\n" +
" count++;\n" +
"}\n"
);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
自定义语言
点击查看代码
vue
<template>
<el-form :labelWidth="100" inline>
<el-form-item label="语言模式">
<el-select v-model="editorLanguage" style="width: 240px;">
<el-option v-for="item in languageOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-form>
<vue-code-editor v-model="scriptText" style="height: 210px;" :language="editorLanguage" border />
</template>
<script setup lang="ts">
import { ref } from "vue";
const editorLanguage = ref<string>("javascript");
const languageOptions = ref<string[]>([
"javascript", "json", "html", "vue", "css", "less", "sass",
"markdown", "python", "java", "sql", "xml", "yaml"
]);
const scriptText = ref<string>(
"const count = 0;\n\n" +
"const increase = () => {\n" +
" count++;\n" +
"}\n"
);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
手动初始化
点击查看代码
vue
<template>
<vue-code-editor ref="editorRef" v-model="scriptText" style="height: 210px;" border lazy />
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { CodeEditorInstance } from "@editor/module.d.ts";
const editorRef = ref<CodeEditorInstance>();
const scriptText = ref<string>(
"const count = 0;\n\n" +
"const increase = () => {\n" +
" count++;\n" +
"}\n"
);
onMounted(() => {
editorRef.value?.init();
});
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用装饰器
点击查看代码
vue
<template>
<vue-code-editor v-model="scriptText" style="height: 210px;" :decorations="editorDecorations" placeholder="请输入内容" border />
</template>
<script setup lang="ts">
import { ref } from "vue";
const scriptText = ref<string>(
"默认装饰器: [[default.user.name]] \n\n" +
"自定义样式装饰器: [[custom.user.name]] \n\n" +
"自定义显示内容装饰器: [[purple.user.name]] \n\n"
);
const editorDecorations = ref<Record<string, any>[]>([
// 自定义装饰器显示内容
{
class: "cm-purple-decorator",
prefix: "purple",
formater: (placeholder: string) => {
return placeholder.split(".")[1];
}
},
// 自定义装饰器样式
{
class: "cm-custom-decorator",
prefix: "custom"
},
// 默认装饰器
{}
]);
</script>
<style lang="scss">
.cm-decorator.cm-custom-decorator {
color: #337ecc !important;
background: #d9ecff !important;
border-color: #a0cfff !important;
}
.cm-decorator.cm-purple-decorator {
color: #3451b2 !important;
background: #e9eaff !important;
border-color: #a6abff !important;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45