下载vue2-brace-editor源代码,先执行npm install安装项目依赖

在ace.component.vue组件的methods添加setCustomPrompts方法

修改完源码后,执行npm run build,生成dist目录下的vue-ace.min.js压缩文件

在自己的项目中引入vue-ace.min.js,放在static目录下(static中的文件,打包时会自动加入最终的打包目录)

在自己项目的aceEditor组件中,通过handleSetCompleteData调用setCustomPrompts

handleSetCompleteData(data){
this.$refs['MyAceEditor'].setCustomPrompts(data);
},

最后在业务代码中,传入需要自定义提示的代码数据, 通过调用handleSetCompleteData传入

// let completeData = [
// {meta: '表名', caption: 'table1', value: 'table1', score: 5},
// {meta: '表名', caption: 'table2', value: 'table2', score: 5},
// {meta: '表名', caption: 'table3', value: 'table3', score: 5},
// {meta: '库名', caption: 'moni_general1', value: 'moni_general1', score: 5},
// {meta: '库名', caption: 'moni_general2', value: 'moni_general2', score: 5},
// {meta: '库名', caption: 'moni_genera3', value: 'moni_genera3', score: 5},
// ]
// this.$refs['aceEditor'].handleSetCompleteData(completeData)

vue2-brace-editor代码编辑器添加自定义代码提示(修改源码)的更多相关文章

  1. 前端代码编辑器ace 语法提示 代码提示

    本文主要是介绍ace编辑器的语法提示,自动完成.其实没什么可特别介绍的,有始有终吧,把项目中使用到的ace的功能都介绍下. { enableBasicAutocompletion: false, // ...

  2. 【代码管理】GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git分支 标签 过滤 Git版本工作流

    GitHub操作总结 : 总结看不明白就看下面的详细讲解. . 作者 :万境绝尘  转载请注明出处 : http://blog.csdn.net/shulianghan/article/details ...

  3. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  4. 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  5. ACE代码编辑器,代码提示,添加自定义数据

    //设置自动提示代码 var setCompleteData = function(data) { var langTools = ace.require("ace/ext/language ...

  6. 【示例代码】HTML+JS 画图板源码分享

    一个有趣的画图板, 用了 HTML5中的本地存储.下载.canvas 等技术,这个项目中用到了canvas 的很多基础功能,初学者可以学习一下 . 建议开发童鞋使用统一开发环境UDE来进行查看.调试. ...

  7. IDEA定位到类的代码区域(查看类的源码)

    经常需要查看某一个类中的成员变量和方法,那么怎么进入到这个类的源码区域呢?在IDEA中只需要使用快捷键: ctrl+shift+t 就可以快速定位到这个类的源码.

  8. 吾日三省吾身 java核心代码 高并发集群 spring源码&思想

    阿里面试题    未解决https://my.oschina.net/wuweixiang/blog/1863322 java基础  有答案  https://www.cnblogs.com/xdp- ...

  9. Linux内核驱动学习(二)添加自定义菜单到内核源码menuconfig

    文章目录 目标 drivers/Kconfig demo下的Kconfig 和 Makefile Kconfig Makefile demo_gpio.c 目标 Kernel:Linux 4.4 我编 ...

随机推荐

  1. 完美解决前端跨域之 easyXDM 的使用和解析

    前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...

  2. leetcode 102二叉树的层序遍历

    5月20更新: 使用借助队列实现bfs,定义len记录队列的尺寸直接进行遍历层序 /** * Definition for a binary tree node. * struct TreeNode ...

  3. Could not parse configuration: /hibernate.cfg.xml

    hibernate需要联网验证dtd,错误原因:未联网或网速不行

  4. BurpSuite(一)工具介绍

    , 本章目标: 1. 安装并配置好Burpsuite 2. 了解其各个模块功能 Burpsuite介绍 Burp Suite 是用于攻击web应用程序的集成平台.它包含了许多工具,并为这些工具设计了许 ...

  5. linux配置多个ip

    linux配置多个ip /sbin/ifconfig eth0:1 172.19.121.180 broadcast 172.19.121.255  netmask 255.255.255.0 up ...

  6. cocos2dx[3.2](5) 屏幕适配

    1.两个分辨率 1.1.窗口分辨率 在AppDelegate.cpp中有个设置窗口分辨率的函数.该函数是设置了我们预想设备的屏幕大小,也就是应用程序窗口的大小. // glView->setFr ...

  7. 【神经网络与深度学习】【Qt开发】【VS开发】从caffe-windows-visual studio2013到Qt5.7使用caffemodel进行分类的移植过程

    [神经网络与深度学习][CUDA开发][VS开发]Caffe+VS2013+CUDA7.5+cuDNN配置成功后的第一次训练过程记录<二> 标签:[神经网络与深度学习] [CUDA开发] ...

  8. 模版include的用法

    from flask import Flask,render_template app = Flask(__name__) @app.route('/') def hello_world(): ret ...

  9. Akka系列(九):Akka分布式之Akka Remote

    前言.... Akka作为一个天生用于构建分布式应用的工具,当然提供了用于分布式组件即Akka Remote,那么我们就来看看如何用Akka Remote以及Akka Serialization来构建 ...

  10. udb

    1/  配置升级 高可用实例创建时默认是 一主一备  所以可以在线升级, 先升级备库 然后升级主库 所以可以在线升级 只是主备切换的时候有闪断会影响20s左右 有单独创建的从库  那就是一主一备 + ...