Vue之vue2-ace-editor代码编辑器使用方式

1、安装

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

2.1、全局加载:main.js 进行组件全局加载

import Editor from 'vue2-ace-editor'
Vue.component('editor', Editor)

2.2、组件单独加载

import Editor from 'vue2-ace-editor'
components: {
    Editor
}

3、组件引入editor代码编辑器

<editor
  height="500" 
  width="500"
  ref="editor" 
  :content="content" 
  v-model="content"
  :options="{
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      tabSize:6,
      fontSize:14,
      showPrintMargin:false,   //去除编辑器里的竖线
   }"
   :lang="'html'"
   @init="editorInit">
</editor>

 --仅用作学习记录

posted @ 2020-12-24 16:15  #青橙#  阅读(3837)  评论(0编辑  收藏  举报