Vue前端代码高亮编辑器Ace

介绍

使用Brace插件实现代码高亮编辑器，方便你实现在线的代码编写工具。

源码工程地址：Ace

效果图

安装

npm install brace

使用方式

步骤一：使用ACE写一个代码高亮的编译器组件

import ace from 'brace/index'
import 'brace/mode/java'
import 'brace/theme/eclipse'
import './code_edtior.css'

export default {
  name: 'code_editor',
  props: {
    value: {
      required: true,
    },
    height: true,
    width: true,
    disable: {
      required: false,
      type: Boolean,
      default: false
    },
  },
  data: () => ({
    editor: null,
    internalChange: false
  }),
  watch: {
    height() {
      this.$nextTick(function () {
        this.editor.resize()
      })
    },
    width() {
      this.$nextTick(function () {
        this.editor.resize()
      })
    },
    value(v) {
      if (this.editor && !this.internalChange) {
        v = v && v !== null ? v : ''
        this.editor.session.setValue(v)
      }
    },
    disable(v) {
      if (this.editor) {
        this.editor.setReadOnly(v)
        v ? this.$refs.code_editor_view.classList.add('ace_content_disable') : this.$refs.code_editor_view.classList.remove('ace_content_disable')
      }
    }
  },
  methods: {
    px: function (n) {
      if (/^\d*$/.test(n)) {
        return n + "px";
      }
      return n;
    },
    copy_value() {
      this.$copyText(this.value).then(() => {
        this.$q.ok('已经复制到粘贴板！')
      }, () => {
        this.$q.err('复制失败！')
      })
    },
    onChange() {
      let error = false
      let v
      try {
        v = this.editor.getValue()
        error = false
      } catch (err) {
        error = true
      }
      if (error) {
        this.$emit("error")
      } else {
        if (this.editor) {
          this.internalChange = true
          this.$emit("input", v)
          this.$nextTick(() => {
            this.internalChange = false
          })
        }
      }
    },
    initView() {
      this.editor && this.editor.destroy()
      this.editor && this.editor.container.remove()
      this.editor = null
      let vm = this;
      let editor_div = this.$refs.code_editor_view
      let editor = vm.editor = ace.edit(editor_div)
      this.disable && editor_div.classList.add('ace_content_disable')

      this.$emit('init', editor)

      //editor.$blockScrolling = Infinity

      editor.getSession().setMode('ace/mode/java')
      editor.setTheme('ace/theme/eclipse')
      editor.getSession().setUseWrapMode(true)
      editor.setShowPrintMargin(false)
      editor.setValue(this.value)
      editor.gotoLine(1);

      editor.on('change', vm.onChange);
      if (vm.disable) {
        editor.setReadOnly(true)
      }
    },
  },

  beforeDestroy() {
    this.editor.destroy();
    this.editor.container.remove()
  },
  mounted() {
    this.initView()
  },
  render(h) {
    let height = this.height ? this.px(this.height) : '100%'
    let width = this.width ? this.px(this.width) : '100%'
    return h('div', {
      staticClass: 'col-grow',
      style: {
        border: '1px solid #eee'
      }
    }, [
      h('div', {
        staticClass: 'auto-height',
        ref: 'code_editor_view',
        style: {
          width: width,
          height: height,
        }
      })
    ])
  },
}

步骤二：在页面中引用步骤一的组件

import CodeEditor from './code_editor'

export default {
  name: 'ace_index',
  data: () => ({
    model: "package com.bin.kong.csdnspider.config;\n" +
      "\n" +
      "import org.springframework.context.annotation.Bean;\n" +
      "import org.springframework.context.annotation.Configuration;\n" +
      "import org.springframework.core.task.AsyncTaskExecutor;\n" +
      "import org.springframework.scheduling.annotation.EnableAsync;\n" +
      "import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;\n" +
      "\n" +
      "import java.util.concurrent.ThreadPoolExecutor;\n" +
      "\n" +
      "@Configuration\n" +
      "@EnableAsync\n" +
      "public class ThreadPoolConfig {\n" +
      "    private int corePoolSize = 10;//线程池维护线程的最少数量\n" +
      "\n" +
      "    private int maxPoolSize = 50;//线程池维护线程的最大数量\n" +
      "\n" +
      "    private int queueCapacity = 20; //缓存队列\n" +
      "\n" +
      "    private int keepAlive = 120;//允许的空闲时间\n" +
      "\n" +
      "    @Bean\n" +
      "    public AsyncTaskExecutor threadExecutor() {\n" +
      "        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();\n" +
      "        executor.setCorePoolSize(corePoolSize);\n" +
      "        executor.setMaxPoolSize(maxPoolSize);\n" +
      "        executor.setQueueCapacity(queueCapacity);\n" +
      "        executor.setThreadNamePrefix(\"threadExecutor-\");\n" +
      "        executor.setRejectedExecutionHandler(new ThreadPoolExecutor.CallerRunsPolicy()); //对拒绝task的处理策略\n" +
      "        executor.setKeepAliveSeconds(keepAlive);\n" +
      "        executor.initialize();\n" +
      "        return executor;\n" +
      "    }\n" +
      "}\n"
  }),
  render(h) {
    return h('div', {
      staticClass: 'q-pa-sm'
    }, [
      h(CodeEditor, {
        on: {
          input: (v) => {
            this.model = v
          }
        },
        props: {
          value: this.model,
          disable: false,
          width: '100%',
          height: '600px'
        }
      }),
      h('div',{
        staticClass: 'font-13 q-mt-md'
      },[
        h('span',{
        staticClass:'text-weight-bold'
        },['文本内容：']),
        h('pre', {
        }, [this.model])
      ])
    ])
  }
}

插件地址：brace