vue-ace-editor 基础功能详解

简介：ace是一个智能语法提示和高亮显示插件，而vue-ace-editor、ng2-ace-editor等这样的npm包都是对这个插件的封装。这里主要介绍vue-ace-editor | vue2-ace-editor-support-chinese在vue项目中的使用。步骤：安装、引入：npm install --save-dev vue-ace-editor...

刘汪

17312人浏览 · 2019-03-14 17:19:46

刘汪 · 2019-03-14 17:19:46 发布

简介：ace是一个智能语法提示和高亮显示插件，而vue-ace-editor、ng2-ace-editor等这样的npm包都是对这个插件的封装。这里主要介绍vue-ace-editor | vue2-ace-editor-support-chinese在vue项目中的使用。
步骤：
1. 安装、引入：npm install --save-dev vue-ace-editor
2. 使用：
  1. v-model：双向绑定，不多说。
  2. @setCompletions：设置自定义提示字符集。
  3. @init：editor组件初始化需要引入的模块。
    1. mode下面是各种语法环境，比如mysql，sqlserver，java，javascript等等
    2. theme下面是主题。
    3. 剩下2个是智能提示弹窗用的工具模块。
3. 注意：vue-ace-editor组件根目录下的index.js需要注意的地方。mounted方法中，要用push，不然自定义字符集和预设字符集没法同时共存。有些情况下，智能提示弹窗始终出不来，试试降一降这个组件的版本。可能和vue版本冲突，我遇到过，0.0.3不行，0.0.2就行了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^