IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 代码编辑器vue2-ace-editor的使用 -> 正文阅读

[开发工具]代码编辑器vue2-ace-editor的使用

1.Install: npm install --save-dev vue2-ace-editor
2.详细代码

<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>
<script>
export default {
  data() {
    return {
      dialogVisible:false,
      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>
<style lang='scss' scoped>
</style>
  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-04-18 18:03:22  更:2022-04-18 18:05:24 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 14:53:04-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码