vue2.0引入vue2-ace-editor代码编辑器

超、凢脫俗 2024-03-02 10:01 17阅读 0赞

首先安装引入相关的模块

npm install --save-dev vue2-ace-editor

下面是模板代码

<template>
      <div class="container">
        <editor
          ref="aceEditor"
          v-model="content"
          @init="editorInit"
          width="700"
          height="600"
          lang="javascript"
          :theme="theme"
          :options="{
        　　 enableBasicAutocompletion: true,
        　　 enableSnippets: true,
        　　 enableLiveAutocompletion: true,
      　　   tabSize:6,
        　　 fontSize:14,
        　　 showPrintMargin:false,   //去除编辑器里的竖线
          }"
        ></editor>
        <el-button type="primary" size="small" @click="getValue">获 取</el-button>
        <el-button type="primary" size="small" @click="pre">上一个主题</el-button>
        <el-button type="primary" size="small" @click="next">下一个主题</el-button>
      </div>
    </template>

以下是相关的js代码

<script>
      export default {
        
        data() {
        
          return {
        
            content: '',
            theme: '',
            num: 0,
            arr: [ //将brace/theme文件夹下的所有主题名字拷贝出来
              'ambiance',
              'chaos',
              'chrome',
              'clouds',
              'clouds_midnight',
              'cobalt',
              'crimson_editor',
              'dawn',
              'dracula',
              'dreamweaver',
              'eclipse',
              'github',
              'gob',
              'gruvbox',
              'idle_fingers',
              'iplastic',
              'katzenmilch',
              'kr_theme',
              'kuroir',
              'merbivore',
              'merbivore_soft',
              'monokai',
              'mono_industrial',
              'pastel_on_dark',
              'solarized_dark',
              'solarized_light',
              'sqlserver',
              'terminal',
              'textmate',
              'tomorrow',
              'tomorrow_night',
              'tomorrow_night_blue',
              'tomorrow_night_bright',
              'tomorrow_night_eighties',
              'twilight',
              'vibrant_ink',
              'xcode',
            ]
          };
        },
        components: {
        
          editor: require("vue2-ace-editor")
        },
        methods: {
        
          editorInit() {
        //初始化
            require("brace/ext/language_tools"); //language extension prerequsite...
            require("brace/mode/javascript"); //language
            // require("brace/theme/tomorrow_night");
            for (let i = 0; i < this.arr.length; i++) {
        //方便看哪个主题好看，循坏加载了所有主题，通过点击按钮切换
              require("brace/theme/" + this.arr[i])
            }
            require("brace/snippets/javascript"); //snippet
          },
          getValue() {
        //获取编辑器中的值
            console.log('编辑器中的值：' + this.$refs.aceEditor.editor.getValue())
            console.log('编辑器中第一个换行符的位置：' + this.$refs.aceEditor.editor.getValue().indexOf('\n'))
          },
          pre() {
        //切换到上一个主题
            if (this.num == 0) {
        
              return
            }
            this.num--
            this.theme = this.arr[this.num]
            console.log('主题' + this.num + '__' + this.arr[this.num])
          },
          next() {
        //切换到下一个主题
            if (this.num == this.arr.length - 1) {
        
              return
            }
            this.num++
            this.theme = this.arr[this.num]
            console.log('主题' + this.num + '__' + this.arr[this.num])
          },
        },
        mounted() {
        
          this.editorInit();
          this.theme = this.arr[0]
          console.log(this.$refs.aceEditor.editor.setValue('设置的初始值'))
        }
      };
    </script>

最终的一个运行效果

![在这里插入图片描述][a86c7d7b11f342618665c7086104d1d0.png]

[a86c7d7b11f342618665c7086104d1d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/d0667e28a4914fe9a60d3551bff9ba45.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue2.0引入vue2-ace-editor代码编辑器

首先安装引入相关的模块 npm install --save-dev vue2-ace-editor 下面是模板代码 <template> <

超、凢脫俗/ 2024年03月02日 10:01/ 0 赞/ 18 阅读

相关【Vue】Vue 中引入 ECharts

目录 1、安装 2、在 main.js 中引入 3、在需要调用的页面中的 js 使用 4、最重要的一点！ -------------------- 介绍 Echa

谁践踏了优雅/ 2023年07月11日 08:41/ 0 赞/ 9 阅读

相关【Vue】Vue 中引入 MarkDown 编辑器

MarkDown：目前应用非常广泛的文本编辑器，应用于各类博客网站编辑中参考 github 链接：[https://github.com/hinesboy/mavonEdi

た入场券/ 2023年07月10日 11:25/ 0 赞/ 3 阅读

相关 vue中使用代码编辑器 Ace editor

一、介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和Ja

ゝ一世哀愁。/ 2022年11月13日 04:17/ 0 赞/ 775 阅读

相关 vue@2.x引入sass模块

vue @2.5.2 版本引入sass模块需要安装下面两个依赖： 1、node-sass @4.14.1 2、sass-loader @7.3.1 安装node-

阳光穿透心脏的1/2处/ 2022年10月24日 13:10/ 0 赞/ 151 阅读

相关 vue(二)、vue引入bootstrap

注:想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstrap 1、引入 jquery np

素颜马尾好姑娘i/ 2022年05月14日 14:39/ 0 赞/ 943 阅读

相关【Vue】20.vue项目中引入echarts图表遇到的问题

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式

淡淡的烟草味﹌/ 2022年02月14日 18:39/ 0 赞/ 600 阅读

相关 vue引入echarts

效果图: ![1263537-20190703092539204-1883224357.jpg][] 1.安装Echarts : npm ins

喜欢ヅ旅行/ 2021年11月11日 01:40/ 0 赞/ 456 阅读

相关 Vue引入 mavon-editor 编辑器的详细步骤

Vue引入 mavon-editor 编辑器的详细步骤一、编辑器的引入如果你的项目之前没有安装过该编辑器，那就得先安装编辑器在自己的项目的根目录执行下列命令

Dear 丶/ 2021年09月07日 06:20/ 0 赞/ 1141 阅读

相关引入vue

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

叁歲伎倆/ 2021年08月19日 21:41/ 0 赞/ 492 阅读