vue2-ace-editor做代码编辑器展示服务器日志的使用基本步骤

最新推荐文章于 2025-02-26 15:13:38 发布

cxmfly11

最新推荐文章于 2025-02-26 15:13:38 发布

阅读量961

点赞数

文章标签：编辑器 vue.js npm

本文链接：https://blog.youkuaiyun.com/cxmfly11/article/details/129646451

版权

一、安装

npm install --save-dev vue2-ace-editor

二、引入组件

components: {
      editor: require('vue2-ace-editor'),
    },

三、在页面上设置<editor></editor>

<editor
                v-model="resultData"
                @init="editorInit"
                lang="json"
                :options="editorOptions"
                theme="chrome"
                width="100%"
                height="700"
              >
              </editor>

四、设置editorInit方法

    editorInit: function () {
      require("brace/theme/chrome");
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/yaml");
      require("brace/mode/json");
      require("brace/mode/less");
      require("brace/snippets/json");
    },

五、代码编辑器样式editorOptions，在data里面设置

 editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        fontSize: 14,
        showPrintMargin: false, //去除编辑器里的竖线
        highlightActiveLine: false, // 高亮选中行
        scrollPastEnd: 0.1, // 超出内容的滚动范围
      },

参考：https://blog.youkuaiyun.com/weixin_44634366/article/details/105688344