vue2-ace-editor的使用

最近開發中使用到了腳本編輯器vue2-ace-editor,這里介紹一下其簡單的用法

一、安裝

    npm install vue2-ace-editor --save

二、簡單組件封裝

<div class="editor-box">
  <ace
      ref="editor"
      :value="content"
      @init="initEditor"
      :lang="lang"
      :height="height === 0 ? '100%' : height"
      :theme="theme"
      :options="options"
      width="100%"
      v-bind="config">
  </ace>
</div>

<script>
    import ace from 'vue2-ace-editor'
    export default {
        name: 'SqlEditor',
        components: {
            ace
        },
        props: {
            content: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: 0
            },
            readOnly: {
                type: Boolean,
                default: false
            },
            theme: {
                type: String,
                default: 'monokai'
            },
            lang: {
                type: String,
                default: 'sql'
            },
            config: {
                type: Object,
                default: () => {
                    return {
                        font_size: 16,
                        sql_atom: true
                    }
                }
            }
        },
        computed: {
            options () {
                if (this.readOnly) {
                    return {
                        enableBasicAutocompletion: true,
                        enableSnippets: true,
                        enableLiveAutocompletion: this.config.sql_atom,
                        showPrintMargin: false,
                        fontSize: this.config.font_size,
                        readOnly: true
                    }
                }
                return {
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: this.config.sql_atom,
                    showPrintMargin: false,
                    fontSize: this.config.font_size
                }
            }
        },
        created () {
        },
        methods: {
            initEditor (editor) {
                require('brace/ext/language_tools')
                // 設置語言
                require('brace/mode/sql')
                require('brace/snippets/sql')
                // 設置主題 按需加載
                require('brace/theme/monokai')
                require('brace/theme/chrome')
                require('brace/theme/crimson_editor')
                // 監聽值的變化
                editor.getSession().on('change', val => {
                    this.$emit('change', editor.getValue())
                })
            }
        }
    }
</script>

三、組件使用

import Editor from '@/components/common/Editor.vue'

<editor
      ref="editors"
      :content="value"
      :theme="'crimson_editor'"
      :config="config"
      @change="editorChange"></editor>

四、sql語言格式化sql-formatter

• 安裝

npm install sql-formatter --save

• 使用

import { format } from 'sql-formatter'

// 方法
formatter () {
    const editor = this.$refs.editor.editor
    const content = editor.getValue()
    const formatContent = format(content)
    editor.setValue(formatContent)
}

擴展，ace的基礎用法和屬性