You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

90 lines
2.0 KiB

10 months ago
  1. vue2-ace-editor
  2. ====================
  3. [![npm](https://img.shields.io/npm/v/vue2-ace-editor.svg)](https://www.npmjs.com/package/vue2-ace-editor)
  4. A packaging of [ace](https://ace.c9.io/)
  5. Demo here: https://github.com/chairuosen/vue-ace-editor-demo/tree/vue2
  6. ## IMPORTANT
  7. emmet support for html is removed after 0.0.6. because its code cannot works with strict mode.
  8. if you want to use it. require emmet by your own.
  9. ```
  10. npm install emmet@git+https://github.com/cloud9ide/emmet-core.git#41973fcc70392864c7a469cf5dcd875b88b93d4a
  11. ```
  12. ```js
  13. require(['emmet/emmet'],function (data) { // this is huge. so require it async is better
  14. window.emmet = data.emmet;
  15. });
  16. ```
  17. ## How to use
  18. 1. Install
  19. ```
  20. npm install --save-dev vue2-ace-editor
  21. ```
  22. 2. Require it in `components` of Vue options
  23. ```js
  24. {
  25. data,
  26. methods,
  27. ...
  28. components: {
  29. editor: require('vue2-ace-editor'),
  30. },
  31. }
  32. ```
  33. 3. Require the editor's mode/theme module in custom methods
  34. ```js
  35. {
  36. data,
  37. methods: {
  38. editorInit: function () {
  39. require('brace/ext/language_tools') //language extension prerequsite...
  40. require('brace/mode/html')
  41. require('brace/mode/javascript') //language
  42. require('brace/mode/less')
  43. require('brace/theme/chrome')
  44. require('brace/snippets/javascript') //snippet
  45. }
  46. },
  47. }
  48. ```
  49. 4. Use the component in template
  50. ```html
  51. <editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100"></editor>
  52. ```
  53. prop `v-model` is required
  54. prop `lang` and `theme` is same as [ace-editor's doc](https://github.com/ajaxorg/ace)
  55. prop `height` and `width` could be one of these: `200`, `200px`, `50%`
  56. 5. Access the ACE's instance
  57. `<editor ref='myEditor'>`
  58. `let editor = this.$refs.myEditor.editor`
  59. or
  60. ```
  61. editorInit: function (editor) {
  62. }
  63. ```