最近遇到需求，需要将代码在前端进行展示编辑，但是直接在文本展示会出现代码不整齐情况，格式化就需要嵌入代码编辑器。

老规矩废话不多说，上代码！！！！！！！！！！！

一、使用 vue-prism-editor 插件实现

npm i prismjs vue-prism-editor -S// 或者cnpm i prismjs vue-prism-editor //或者yarn add prismjs vue-prism-editor 代码实现

<template> <div> <prism-editor class="my-editor height-300" v-model="code" :highlight="highlighter" :line-numbers="lineNumbers"></prism-editor> <div @click="handleLog"> HelloWorld</div> </div></template><script>import { PrismEditor } from 'vue-prism-editor'import 'vue-prism-editor/dist/prismeditor.min.css'import { highlight, languages } from 'prismjs/components/prism-core'import 'prismjs/components/prism-clike'import 'prismjs/components/prism-javascript'import 'prismjs/themes/prism-tomorrow.css'export default { name: 'CodeEditor1', components: { PrismEditor }, data: () => ({ // 双向绑定编辑器内容值属性 code: ``, // true为编辑模式， false只展示不可编辑 lineNumbers: true }), methods: { highlighter(code) { return highlight(code, languages.js) //returns html }, handleLog(){ console.log(this.code); } }}</script><style lang="css" scoped>/* required class */.my-editor { background: #2d2d2d; color: #ccc; font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace; font-size: 14px; line-height: 1.5; padding: 5px;}/* optional */.prism-editor__textarea:focus { outline: none;}/* not required: */.height-300 { height: 1000px; width: 1000px;}</style> 效果预览

二、使用 vue2-ace-editor 插件实现

npm i vue2-ace-editor -S// 或者cnpm i vue2-ace-editor -S 代码实现

<template><div class="codeEditBox"><editor v-model="code" @init="editorInit" @input='codeChange' lang="javascript" :options="editorOptions" theme="chrome"></editor></div></template> <script>import Editor from 'vue2-ace-editor'export default {name: 'CodeEditor',components: {Editor},data() {return { // 双向绑定的编辑器内容值属性code: 'console.log("Hello World");',editorOptions: {// 设置代码编辑器的样式enableBasicAutocompletion: true, //启用基本自动完成enableSnippets: true, // 启用代码段enableLiveAutocompletion: true, //启用实时自动完成tabSize: 2, //标签大小fontSize: 14, //设置字号showPrintMargin: false //去除编辑器里的竖线}}},methods: { // 编辑内容改变时触发codeChange(val) {val //console.log(val)},editorInit() {require('brace/theme/chrome')require('brace/ext/language_tools') //language extension prerequsite...require('brace/mode/yaml')require('brace/mode/json')require('brace/mode/less')require('brace/snippets/json')require('brace/mode/lua')require('brace/snippets/lua')require('brace/mode/javascript')require('brace/snippets/javascript')}}}</script> <style scoped>.codeEditBox {width: 100%;height: 200px;}</style> vue2-ace-editor相比于vue-prism-editor可以实现代码的提示功能效果预览