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. Express全系列教程之(五):Express的中间件

    一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...

  2. JVM深入:JDK8-废弃永久代(PermGen)迎来元空间(Metaspace)(转)

    转载自:https://www.cnblogs.com/yulei126/p/6777323.html 1.背景 2.为什么废弃永久代(PermGen) 3.深入理解元空间(Metaspace) 4. ...

  3. T-SQL语言基础(2)之SQL Server体系结构

    SQL Server 体系结构 SQL Server 实例 SQL Server 实例是指安装的一个 SQL Server 数据库引擎/服务.在同一台计算机上可以安装 SQL Server 的多个实例 ...

  4. python多进程web爬虫-提升性能利器

    背景介绍: 小爬我最近给部门开发了一系列OA的爬虫工具,从selenium前端模拟进化到纯requests后台post请求爬取,效率逐步提升.刚开始能维持在0.5秒/笔.可惜当数据超过2000笔后,爬 ...

  5. 外贸建站之图片预加载JS代码分享

    外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...

  6. 解决SQL Server 2008无法连接127.0.0.1的问题

    电脑操作系统是Win10中文版,新装的英文版SQL Server 2008,纯默认安装,没有做任何改动. 装完SQL Server 2008之后,发现只能用默认的机器名来登录: 如果用127.0.0. ...

  7. 201808_summary

    @Consumes @Produces分别表示入参和出参数吗 可以这样讲.但是不是很到位.是限定作用,类似于filterconsumes: 指定处理请求的提交内容类型(Content-Type),例如 ...

  8. 通过类创建子线程&同步锁

    一.通过类创建子线程 import threading class MyThread(threading.Thread): def __init__(self,num): threading.Thre ...

  9. php魔术变量以及命名空间

    魔术变量: PHP 向它运行的任何脚本提供了大量的预定义常量. 不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们 ...

  10. CentOS 7 Squid代理服务器正向代理-透明代理

    Squid是Linux系统中最常用的一款开源代理服务软件,主要提供缓存加速和应用层过滤控制的功能,可以很好的实现HTTP.FTP.DNS查询以及SSL等应用的缓存代理 透明代理:提供与传统代理相同的功 ...