1.0.2 • Published 3 years ago

vue2-ace-editor4 v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

这是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
    只不过不用修改源码部分,源码部分已经修改

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago