vue2-ace-editor自定义语法提示

最新推荐文章于 2024-08-13 14:51:21 发布

原创

最新推荐文章于 2024-08-13 14:51:21 发布 · 2.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #ace #editor #语法提示

本文介绍如何使用 Vue2 和 AceEditor 实现自定义语法提示功能，通过添加额外的 JavaScript 库来增强编辑器的功能，使其支持基本的自动补全、实时自动补全、代码片段等功能。

vue2-ace-editor自定义语法提示

前言：网上找了很多不是很系统，这里发一个我自己成功的一个例子

代码：

<!-- editor -->
<template>
  <AceEditor
    v-model="value"
    @init="init"
    :enableBasicAutocompletion="true"
    :enableLiveAutocompletion="true"
    :enableSnippets="true"
    :options="cmOptions"
    lang="xml" theme="monokai"
    width="100%" height="100%"
  />
</template>

<script>
import AceEditor from "vue2-ace-editor";
// 语法提示工具
import 'brace/ext/language_tools' //language extension prerequsite...
import 'brace/ext/searchbox' //language extension prerequsite...
import 'brace/mode/xml'
import 'brace/snippets/xml' //snippet
import 'brace/theme/monokai'
import 'brace/ext/emmet'

export default {
   
   
  name: "editor",
  props: {
   
   
    content: {
   
   
      type: String,
      required: false,
      default: (