下载 vue2-ace-editor 插件 (github)
npm i -S vue2-ace-editor
引入插件
// 全局注册组件
import Editor from 'vue2-ace-editor'
Vue.component('editor', Editor)
// 局部注册组件
components: {
editor: require('vue2-ace-editor'),
}
使用插件
<template>
<div class="echart-pie-wrap">
<editor ref="myEditor"
@init="editorInit"
:value="value"
:lang="language"
:theme="theme"
:options="options">
</editor>
</div>
</template>
<script>
export default {
components: {
editor: require('vue2-ace-editor'),
},
props: {
title: {
type: String,
default: "编辑器"
},
value: {
type: String,
default: ""
},
theme: {
type: String,
default: "idle_fingers"
},
language: {
type: String,
default: "html"
}
},
data() {
return {
options: {
enableBasicAutocompletion: true, // 启用基本自动完成
enableSnippets: true, // 启用代码段
enableLiveAutocompletion: true, // 启用实时自动完成
printMarginColumn: 30,
displayIndentGuides: false, // 显示参考线
enableEmmet: true, // 启用Emmet
tabSize: 6, // 标签大小
fontSize: 14, // 设置字号
useWorker: true, // 使用辅助对象
showPrintMargin: false, //去除编辑器里的竖线
enableMultiselect: true, // 选中多处
readOnly: false, // 是否只读
showFoldWidgets: true, // 显示折叠部件
fadeFoldWidgets: true, // 淡入折叠部件
wrap: true //换行
}
};
},
methods: {
editorInit: function (editor) {
require("brace/theme/iplastic");
// 代码片段
require("brace/snippets/javascript");
require("brace/snippets/dockerfile");
require("brace/snippets/python");
require("brace/snippets/php");
require("brace/snippets/html");
require("brace/snippets/css");
// 代码语言
require("brace/mode/javascript");
require("brace/mode/dockerfile");
require("brace/mode/python");
require("brace/mode/php");
require("brace/mode/html");
require("brace/mode/ruby");
require("brace/mode/css");
// 语言扩展
require("brace/ext/language_tools");
require("brace/ext/emmet");
require("brace/ext/beautify");
require("brace/ext/searchbox");
require("brace/ext/chromevox");
require("brace/ext/error_marker");
require("brace/ext/keybinding_menu");
require("brace/ext/linking");
require("brace/ext/modelist");
require("brace/ext/old_ie");
require("brace/ext/settings_menu");
require("brace/ext/spellcheck");
require("brace/ext/split");
require("brace/ext/static_highlight");
require("brace/ext/statusbar");
require("brace/ext/whitespace");
require("brace/ext/textarea");
require("brace/ext/themelist");
// editor.setReadOnly(true) // 设置只读
// 监听编辑器变化
editor.getSession().on("change", () => {
console.log("change log --> ", editor.getValue());
this.$emit("change", editor.getValue());
});
}
}
};
</script>
<style lang="scss" scoped>
.echart-pie-wrap {
width: 100%;
height: 500px;
.myEditorTop {
height: 45px;
display: flex;
align-items: center;
background-color: #333;
padding-left: 50px;
color: rgb(241, 238, 8);
font-weight: bold;
}
}
</style>
使用 beautify 格式化代码 (github)格式刷插件
npm i -S js-beautify
使用 beautify
const beautify_js = require('js-beautify');
const beautify_css = require('js-beautify').css;
const beautify_html = require('js-beautify').html;
this.content = beautify_js(this.codeText,
{
"indent_size": 2,
"html": {
"end_with_newline": true,
"js": {
"indent_size": 2
},
"css": {
"indent_size": 2
}
},
"css": {
"indent_size": 1
},
"js": {
"preserve-newlines": true
}
})