vue2-ace-editor4

这是2升级后的，支持focus和Blur事件和自定义提示代码块。

How to use

1. Install

   npm install --save-dev vue2-ace-editor4
   

2. Require it in components of Vue options

   {
       data,
       methods,
       ...
       components: {
           editor: require('vue2-ace-editor4'),
       },
   }

3. Require the editor's mode/theme module in custom methods

   {
       data,
       methods: {
           editorInit: function () {
                       require("brace/ext/language_tools"); //language extension prerequsite...
                       require("brace/ext/searchbox");
                       require("brace/mode/html");
                       require("brace/mode/json"); //language
                       require("brace/mode/less");
                       require("brace/mode/xml");
                       require("brace/mode/yaml");
                       require("brace/mode/python");
                       require("brace/mode/javascript");
                       require("brace/mode/css");
                       require("brace/mode/text");
                       require("brace/theme/github");
                       require("brace/snippets/json"); //snippet
                       require('brace/snippets/javascript');
                       this.$refs.editor.editor.setReadOnly(this.readOnly); //这里是设置readonly属性 看个人需要
           }
       },
   }

4. Use the component in template

   <editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100" @focus="focus" @blur="blur"></editor>

   prop v-model is required

   prop lang and theme is same as ace-editor's doc

   prop height and width could be one of these: 200, 200px, 50%

自定义代码块 参考 https://blog.csdn.net/qq_41206359/article/details/104992168
只不过不用修改源码部分，源码部分已经修改