ace-editor线上代码编辑器
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线上代码编辑器的更多相关文章
- 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式
如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...
- Springboot拦截器线上代码失效
今天想测试下线上代码,能否正常的执行未登录的拦截.所以把拦截器的代码给开放出来,但是没想到线上代码addInerceptors(InterceptorRegistry registry) 这个方法一直 ...
- 不停机替换线上代码? 你没听错,Arthas它能做到
写在前边 有没有这样一种感受,自己写的代码在开发.测试环境跑的稳得一笔,可一到线上就抽风,不是缺这个就是少那个反正就是一顿报错,线上调试代码又很麻烦,让人头疼得很.阿里巴巴出了一款名叫Arthas的工 ...
- 如何用 fiddler 调试线上代码
有时代码上线了,突然就碰到了坑爹的错误.或者有时看别人家线上的代码,对于一个文件想 fork 下来试试效果又不想把全部文件拉到本地,都可以使用 fiddler 的线上调试功能. 比方说我们打开携程的首 ...
- 利用Chrome浏览器调试线上代码
前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境 ...
- git 获取线上代码并合并到本地
//查询当前远程的版本 $ git remote -v //获取最新代码到本地(本地当前分支为[branch],获取的远端的分支为[origin/branch]) $ git fetch origin ...
- git让线上代码强制覆盖本地的
git强制覆盖本地命令(分步执行): git fetch --all git reset --hard origin/master git pull git强制覆盖本地命令(单条执行): ...
- 前端通信:SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新,代码热修复案例)
距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...
- 线上应用调试利器 --Arthas
在之前的文章中,我介绍了使用 Btrace 工具进行线上代码的debug (https://www.cnblogs.com/yougewe/p/10180483.html),其大致原理就是通过字节码注 ...
随机推荐
- Web开发——Photoshop(PSD格式截取)
Step1 将截取到的图片,存储为Web所用格式. Step2 在右上角选择存储格式为:PNG-24(PNG-8可能会出现白边).
- VUE-010-通过声明式导航 router-link 传递 params 参数(路由 name 识别,请求链接不显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,除了通过路由进行表单参数的传递,也可通过声明式导航 router-link 进行页面跳转和参数传递. 首先,配置页面跳转路由 ...
- Spring Boot(一):环境搭建,建立简单项目
一.基本环境搭建 1.下载IntelliJ IDEA :http://www.jetbrains.com/idea/ 2.拖到页面最下面下载旗舰版 3.新建项目 4.设置本地Maven 5.删除多于文 ...
- wordCount剖析Spark模型
- Angular系列文章之angular路由
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute. ...
- webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题
下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...
- mysql-5.7.25 源码 安装
mysql-5.7.25 源码 安装 编译 export INSTALL_PREFIX="/data/services" export MYSQL_INSTALL_PATH=&qu ...
- linux中巧用ctrl-z后台运行程序
我们知道后台运行任务时,可以用 () 和 &,但是有的时候我们会忘记加&,对于执行需要很长时间的任务来说,Ctrl+Z可能是一个比较好的把任务转入后台的方法. 当我们按下Ctrl+Z时 ...
- session 和 cookie
在web请求中,很多的时候服务器需要知道来访的客户是谁,但是HTTP协议本身是不带认证的(ftp协议需要用户密码),因此cookie和session诞生了. session是解决http协议无状态 ...
- MQ消息队列配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...