Vue前端代码高亮编辑器Ace_vue brace

介绍

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

源码工程地址：Ace

效果图

安装

npm install brace
1

使用方式

步骤一：使用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,
        }
      })
    ])
  },
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

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

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])
      ])
    ])
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

插件地址：brace