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),其大致原理就是通过字节码注 ...
随机推荐
- [daily] cscope
手册: http://cscope.sourceforge.net/cscope_vim_tutorial.html 下载 cscope_maps.vim 到 $HOME/.vim/plugin/ 目 ...
- redis加固
一.背景描述 1.漏洞描述 Redis 因配置不当存在未授权访问漏洞,可以被攻击者恶意利用. 在特定条件下,如果 Redis 以 root 身份运行,黑客可以给 root 账号写入 SSH 公钥文件, ...
- pkg-config 详解
转载自:https://blog.csdn.net/newchenxf/article/details/51750239 1 什么是pkg-config pkg-config是一个linux下的命令, ...
- 3.1.3 Spring之AOP
三.Spring之AOP 1. 代理模式 (1) 什么是代理模式? 代理模式是面向对象编程的23种基础设计模式之一.为其他对象(代理对象)提供一种代理以控制对这个对象(源对象)的访问. 就是说,声明一 ...
- Repeater 实现 OnSelectedIndexChanged
在Repeater中使用DropDownList的方法 在Repeater中使用DropDownList的方法 以下代码并不完整,只记录了关键的方法 aspx代码中 假设这是一个用户管理的系统的模 ...
- git 小轿车 开车了
1.2什么是版本库? 什么是版本库?版本库又名仓库,英文名repository,你可以简单的理解一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改,删除,Git都能跟踪,以便任何时 ...
- .NET Core 事件总线,分布式事务解决方案:CAP 基于Kafka
背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用的过程中也会遇到分布式事务的问题,那么 CAP 就是在这样的背景 ...
- Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入
先上一个漂亮的搜索框效果图, 输入搜索文本效果, 点击搜索图标效果: //实现代码 void MainWindow::iniLineEdit() { ui->lineEdit->setPl ...
- Vue.js新城之勇者探秘录
那么我们就继续来聊聊学习Vue的一些方法?以下的学习思路可以供大家作为参考: 1.视频教程带你入门:初学者如果没有MVVM模式的基础学习Vue,可能初期切换思路有比较大的难度,这个时候可以借助视频教程 ...
- Jmeter笔记(Ⅲ) Jmeter的非GUI操作
在启动Jmeter时,我们会看到这样一句提示: 不要使用GUI模式(界面模式)进行负载测试,GUI模式只能用于创建测试和调试.进行负载测试时,需要时用非GUI模式. 那么为什么进行负载测试时一定要用非 ...