init

Author: leozhang2018

README.md

@@ -0,0 +1,94 @@
+# vue2-ace-bind
+
+A Vue2 component for binding the [ace editor][1]
+
+## Install
+
+### NPM
+
+```bash
+npm install vue2-ace-bind --save-dev
+```
+
+### YARN
+
+```bash
+yarn add vue2-ace-bind -D
+```
+
+## How to use
+
+### Import the component firstly
+
+```javascript
+import aceEditor from "vue2-ace-bind";
+```
+
+### Then import the language mode and theme which you want to use
+
+```javascript
+import javascript from "brace/mode/javascript"
+import sh from "brace/mode/sh"
+```
+
+```javascript
+import xcode from "brace/theme/xcode"
+import terminal from "brace/theme/terminal"
+```
+
+The default config mode is bash and theme is terminal
+
+Ace-editor's mode and theme list is here:
+
+- [Mode][2]
+- [Theme][3]
+
+Register the `component`.
+
+```javascript
+components: {
+  editor
+}
+
+```
+
+### Use the component in `template`
+
+```javascript
+<editor :content="variable"></editor>
+```
+
+The content is required,other props have the following defaults:
+
+```javascript
+lang: sh
+theme: terminal
+height: 100%
+width: 100%
+options: {}
+```
+
+if you want to configure the ace-editor,just define options in data.
+
+```javascript
+<editor :content="variable" :options="options" ></editor>
+```
+
+```javascript
+option: {
+    showLineNumbers: false,
+    showFoldWidgets: true,
+    showGutter: false,
+    displayIndentGuides: false,
+    showPrintMargin: false
+    ....
+}
+
+```
+
+The official doc is here: [Configuring ACE][4].
+
+  [1]: https://ace.c9.io/
+  [2]: https://github.com/ajaxorg/ace/tree/master/lib/ace/mode
+  [3]: https://github.com/ajaxorg/ace/tree/master/lib/ace/theme
+  [4]: https://github.com/ajaxorg/ace/wiki/Configuring-Ace

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vue2-ace-bind",
+  "version": "0.0.1",
+  "description": "A simple vuejs 2 binding for ace-edit",
+  "main": "vue2-ace.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leozhang2018/vue2-ace-bind.git"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "ace-editor"
+  ],
+  "author": "leozhang2018",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/leozhang2018/vue2-ace-bind/issues"
+  },
+  "homepage": "https://github.com/leozhang2018/vue2-ace-bind#readme",
+  "dependencies": {
+    "brace": "^0.8.0",
+    "emmet": "git+https://github.com/cloud9ide/emmet-core.git#41973fcc70392864c7a469cf5dcd875b88b93d4a"
+  }
+}

vue2-ace.js

@@ -0,0 +1,65 @@
+var ace = require('brace');
+
+require(['emmet/emmet'], function (data) {
+    window.emmet = data.emmet;
+});
+
+module.exports = {
+    template: "<div :style=\"{height: height ? px(height) : '100%',width: width ? px(width) : '100%'}\"></div>",
+    props: {
+        value: {
+            type: String,
+            required: true
+        },
+        lang: String,
+        theme: String,
+        height: true,
+        width: true,
+        options: {
+            type: Object,
+            default: function () { return {}; }
+        }
+    },
+    data: function () {
+        return {
+            editor: null,
+            contentSwap: ""
+        }
+    },
+    methods: {
+        px: function (n) {
+            if (/^\d*$/.test(n)) {
+                return n + "px";
+            }
+            return n;
+        }
+    },
+    watch: {
+        value: function (val) {
+            if (this.contentSwap !== val)
+                this.editor.setValue(val, 1);
+        }
+    },
+    mounted: function () {
+        var vm = this;
+        var lang = this.lang || 'sh';
+        var theme = this.theme || 'terminal';
+        require('brace/ext/emmet');
+        var editor = vm.editor = ace.edit(this.$el);
+        this.$emit('init', editor);
+
+        editor.$blockScrolling = Infinity;
+        editor.setOptions(this.options);
+        editor.getSession().setMode('ace/mode/' + lang);
+        editor.setTheme('ace/theme/' + theme);
+        editor.setValue(this.value, 1);
+
+        editor.on('change', function () {
+            var content = editor.getValue();
+            vm.$emit('input', content);
+            vm.contentSwap = content;
+        });
+
+
+    }
+}