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),其大致原理就是通过字节码注 ...
随机推荐
- Express全系列教程之(五):Express的中间件
一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...
- JVM深入:JDK8-废弃永久代(PermGen)迎来元空间(Metaspace)(转)
转载自:https://www.cnblogs.com/yulei126/p/6777323.html 1.背景 2.为什么废弃永久代(PermGen) 3.深入理解元空间(Metaspace) 4. ...
- T-SQL语言基础(2)之SQL Server体系结构
SQL Server 体系结构 SQL Server 实例 SQL Server 实例是指安装的一个 SQL Server 数据库引擎/服务.在同一台计算机上可以安装 SQL Server 的多个实例 ...
- python多进程web爬虫-提升性能利器
背景介绍: 小爬我最近给部门开发了一系列OA的爬虫工具,从selenium前端模拟进化到纯requests后台post请求爬取,效率逐步提升.刚开始能维持在0.5秒/笔.可惜当数据超过2000笔后,爬 ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
- 解决SQL Server 2008无法连接127.0.0.1的问题
电脑操作系统是Win10中文版,新装的英文版SQL Server 2008,纯默认安装,没有做任何改动. 装完SQL Server 2008之后,发现只能用默认的机器名来登录: 如果用127.0.0. ...
- 201808_summary
@Consumes @Produces分别表示入参和出参数吗 可以这样讲.但是不是很到位.是限定作用,类似于filterconsumes: 指定处理请求的提交内容类型(Content-Type),例如 ...
- 通过类创建子线程&同步锁
一.通过类创建子线程 import threading class MyThread(threading.Thread): def __init__(self,num): threading.Thre ...
- php魔术变量以及命名空间
魔术变量: PHP 向它运行的任何脚本提供了大量的预定义常量. 不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们 ...
- CentOS 7 Squid代理服务器正向代理-透明代理
Squid是Linux系统中最常用的一款开源代理服务软件,主要提供缓存加速和应用层过滤控制的功能,可以很好的实现HTTP.FTP.DNS查询以及SSL等应用的缓存代理 透明代理:提供与传统代理相同的功 ...