前端vue中实现嵌入代码编辑器

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

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

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

• index.php/tags-98.html" >安装

  npm i prismjs vue-prism-editor -S// 或者cnpm i prismjs vue-prism-editor //或者yarn add prismjs vue-prism-editor

  • 代码实现

                 HelloWorld  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);    }  }}/* 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;}

    • 效果预览

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

      • 安装

        npm i vue2-ace-editor -S// 或者cnpm i vue2-ace-editor -S

        • 代码实现

           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')}}} .codeEditBox {width: 100%;height: 200px;}

          • vue2-ace-editor相比于vue-prism-editor可以实现代码的提示功能
          • 效果预览