package.json

{
"name": "vue-cli",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "lizhi@camelotchina.com",
"private": true,
"scripts": {
...
},
"dependencies": {
...
},
"devDependencies": {
...

"brace": "^0.11.0",
"emmet": "git+https://github.com/cloud9ide/emmet-core.git",
...
},
"engines": {
...
},
"browserslist": [
...
]
}

component文件夹——>editor.vue文件

<template>
  <div style="width: 100%;height: 330px"></div>
</template>

<script>
  require(['emmet/emmet'], function (data) {
    window.emmet = data.emmet
  });
const ace = require('brace');
export default {
  name: 'editor',
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      editor: null,
      contentBackup: ''
    }
  },
  watch: {
    value (val) {
      if (this.contentBackup !== val) {
        this.editor.setValue(val, 1)
      }
    },
    theme: function (newTheme) {
      this.editor.setTheme('ace/theme/' + newTheme)
    },
    lang: function (newLang) {
      this.editor.getSession().setMode('ace/mode/' + newLang)
    }
  },
  mounted () {
    let vm = this
    require('brace/ext/emmet')
    require('brace/ext/language_tools')
    let editor = vm.editor = ace.edit(this.$el)
    this.$emit('init', editor)
    let staticWordCompleter = {
      getCompletions: function (editor, session, pos, prefix, callback) {
        vm.$emit('setCompletions', editor, session, pos, prefix, callback)
      }
    }
    editor.completers = [staticWordCompleter]
    editor.setOptions({
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true
    })
    editor.$blockScrolling = Infinity
    editor.setFontSize(16)
    editor.setOption('enableEmmet', true)
    editor.getSession().setMode('ace/mode/mysql')
    editor.setTheme('ace/theme/xcode')
    editor.setValue(this.value, 1)
    editor.on('change', function () {
      let content = editor.getValue()
      vm.$emit('input', content)
      vm.contentBackup = content
    })
  }
}
</script>

<style scoped>
</style>

view文件夹的 你的页面文件

<editor v-model="formDynamic" @init="editorInit" @setCompletions="setCompletions"></editor>

methods:{
  editorInit(){
    require('brace/mode/mysql')
    require('brace/theme/xcode')
  },
  setCompletions (editor, session, pos, prefix, callback) {//自动提示方法
    callback(null, this.wordList.map(function (word) {
      return {
        caption: word.vl,
        value: word.vl,
        meta: word.meta
      }
    }))
  },
}

mounted(){
  if(!!configHighlight){//输入提示
    for (let i of configHighlight.split('|')) {
      this.wordList.push({'vl': i, 'meta': '关键字'})
    }
  }
}

ace-editor线上代码编辑器的更多相关文章

  1. 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...

  2. Springboot拦截器线上代码失效

    今天想测试下线上代码,能否正常的执行未登录的拦截.所以把拦截器的代码给开放出来,但是没想到线上代码addInerceptors(InterceptorRegistry registry) 这个方法一直 ...

  3. 不停机替换线上代码? 你没听错,Arthas它能做到

    写在前边 有没有这样一种感受,自己写的代码在开发.测试环境跑的稳得一笔,可一到线上就抽风,不是缺这个就是少那个反正就是一顿报错,线上调试代码又很麻烦,让人头疼得很.阿里巴巴出了一款名叫Arthas的工 ...

  4. 如何用 fiddler 调试线上代码

    有时代码上线了,突然就碰到了坑爹的错误.或者有时看别人家线上的代码,对于一个文件想 fork 下来试试效果又不想把全部文件拉到本地,都可以使用 fiddler 的线上调试功能. 比方说我们打开携程的首 ...

  5. 利用Chrome浏览器调试线上代码

    前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境 ...

  6. git 获取线上代码并合并到本地

    //查询当前远程的版本 $ git remote -v //获取最新代码到本地(本地当前分支为[branch],获取的远端的分支为[origin/branch]) $ git fetch origin ...

  7. git让线上代码强制覆盖本地的

    git强制覆盖本地命令(分步执行): git fetch --all    git reset --hard origin/master    git pull git强制覆盖本地命令(单条执行):  ...

  8. 前端通信:SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新,代码热修复案例)

    距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...

  9. 线上应用调试利器 --Arthas

    在之前的文章中,我介绍了使用 Btrace 工具进行线上代码的debug (https://www.cnblogs.com/yougewe/p/10180483.html),其大致原理就是通过字节码注 ...

随机推荐

  1. [daily] cscope

    手册: http://cscope.sourceforge.net/cscope_vim_tutorial.html 下载 cscope_maps.vim 到 $HOME/.vim/plugin/ 目 ...

  2. redis加固

    一.背景描述 1.漏洞描述 Redis 因配置不当存在未授权访问漏洞,可以被攻击者恶意利用. 在特定条件下,如果 Redis 以 root 身份运行,黑客可以给 root 账号写入 SSH 公钥文件, ...

  3. pkg-config 详解

    转载自:https://blog.csdn.net/newchenxf/article/details/51750239 1 什么是pkg-config pkg-config是一个linux下的命令, ...

  4. 3.1.3 Spring之AOP

    三.Spring之AOP 1. 代理模式 (1) 什么是代理模式? 代理模式是面向对象编程的23种基础设计模式之一.为其他对象(代理对象)提供一种代理以控制对这个对象(源对象)的访问. 就是说,声明一 ...

  5. Repeater 实现 OnSelectedIndexChanged

    在Repeater中使用DropDownList的方法   在Repeater中使用DropDownList的方法 以下代码并不完整,只记录了关键的方法 aspx代码中 假设这是一个用户管理的系统的模 ...

  6. git 小轿车 开车了

    1.2什么是版本库? 什么是版本库?版本库又名仓库,英文名repository,你可以简单的理解一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改,删除,Git都能跟踪,以便任何时 ...

  7. .NET Core 事件总线,分布式事务解决方案:CAP 基于Kafka

    背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用的过程中也会遇到分布式事务的问题,那么 CAP 就是在这样的背景 ...

  8. Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入

    先上一个漂亮的搜索框效果图, 输入搜索文本效果, 点击搜索图标效果: //实现代码 void MainWindow::iniLineEdit() { ui->lineEdit->setPl ...

  9. Vue.js新城之勇者探秘录

    那么我们就继续来聊聊学习Vue的一些方法?以下的学习思路可以供大家作为参考: 1.视频教程带你入门:初学者如果没有MVVM模式的基础学习Vue,可能初期切换思路有比较大的难度,这个时候可以借助视频教程 ...

  10. Jmeter笔记(Ⅲ) Jmeter的非GUI操作

    在启动Jmeter时,我们会看到这样一句提示: 不要使用GUI模式(界面模式)进行负载测试,GUI模式只能用于创建测试和调试.进行负载测试时,需要时用非GUI模式. 那么为什么进行负载测试时一定要用非 ...