当前位置：首页 > news >正文

前端编辑器JSON HTML等，vue2-ace-editor，vue3-ace-editor

news 2025/6/28 19:06:55

与框架无关
vue2-ace-editor有问题，ace拿不到（brace）
一些组件都是基于ace-builds或者brace包装的
不如直接用下面的，不如直接使用下面的
在这里插入图片描述

<template><div ref="editor" class="json-editor"></div>
</template><script>
import ace from 'ace-builds';
import 'ace-builds/webpack-resolver'; // 确保 Webpack 正确解析模块
import 'ace-builds/src-noconflict/mode-json'; // 引入 JSON 模式
import 'ace-builds/src-noconflict/theme-monokai'; // 引入 Monokai 主题export default {name: 'JsonEditor',props: {value: {type: String,default: '',},},data() {return {editor: null,};},watch: {value(newValue) {if (newValue !== this.editor.getValue()) {this.editor.setValue(newValue, 1); // 1 表示不触发 change 事件}},},mounted() {this.initEditor();},beforeDestroy() {if (this.editor) {this.editor.destroy();this.editor = null;}},methods: {initEditor() {this.editor = ace.edit(this.$refs.editor, {mode: 'ace/mode/json',theme: 'ace/theme/monokai',tabSize: 2,useWorker: false, // 禁用 worker 以避免 JSON 解析错误时的警告minLines: 10,maxLines: 30,fontSize: '14px',showPrintMargin: false,});this.editor.setValue(this.value, 1); // 初始化值this.editor.getSession().on('change', () => {this.$emit('input', this.editor.getValue());});},},
};
</script><style scoped>
.json-editor {width: 100%;height: 400px;
}
</style>

解决光标错位

.ace_editor,
.ace_editor * {font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas', monospace !important;font-size: 12px !important;font-weight: 400 !important;letter-spacing: 0 !important;
}