add tab, untab, i, b events

README.md

@@ -25,7 +25,7 @@ npm install vue-jade-editor
 - untab keyboard shortcuts: ctrl + [
 - tab keyboard shortcuts: ctrl + ] or just tab
 - keyboard shortcuts for i and b
-- content can be modifed by vm.$broadcast('je-insert-content', htmlToInsert, id)
+- content can be modifed by `events`
 - auto increase textarea height
 
 ## test & build

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-jade-editor",
   "description": "jade online editor plugin for vue.js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "keywords": [
     "jade",
     "editor",

dist/vue-jade-editor.js

@@ -1,6 +1,6 @@
 /**
  * vue-jade-editor
- * @version v0.1.0 - 2016-05-20
+ * @version v0.2.0 - 2016-05-21
  * @link http://html5beta.com/apps/vue-jade-editor.html
  * @author ZHAO Xudong (zxdong@gmail.com)
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -79,6 +79,45 @@ jadeEditor.install = function(Vue) {
 				this.updateSyntax()
 			}
 
+			,'je-tab': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_tab({
+						preventDefault: function() {}
+					}, this.updateSyntax)
+
+			}
+			,'je-untab': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_open_bracket({
+						preventDefault: function() {}
+						,ctrlKey: true
+					}, this.updateSyntax)
+
+			}
+			,'je-i': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_i({
+						preventDefault: function() {}
+						,ctrlKey: true
+					}, this.updateSyntax)
+
+			}
+			,'je-b': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_b({
+						preventDefault: function() {}
+						,ctrlKey: true
+					}, this.updateSyntax)
+
+			}
 		}
 		,methods: {
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-jade-editor",
   "description": "jade online editor plugin for vue.js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "keywords": [
     "jade",
     "editor",

src/vue-jade-editor.js

@@ -71,6 +71,45 @@ jadeEditor.install = function(Vue) {
 				this.updateSyntax()
 			}
 
+			,'je-tab': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_tab({
+						preventDefault: function() {}
+					}, this.updateSyntax)
+
+			}
+			,'je-untab': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_open_bracket({
+						preventDefault: function() {}
+						,ctrlKey: true
+					}, this.updateSyntax)
+
+			}
+			,'je-i': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_i({
+						preventDefault: function() {}
+						,ctrlKey: true
+					}, this.updateSyntax)
+
+			}
+			,'je-b': function(id) {
+
+					if(id !== this.id) return
+
+					this.handleKeyEvt_b({
+						preventDefault: function() {}
+						,ctrlKey: true
+					}, this.updateSyntax)
+
+			}
 		}
 		,methods: {
 

test/e2e/views/index.jade

@@ -13,8 +13,12 @@ html
   body
     #app
       jadeeditor(:content.sync='content', :rows='rows', :id='jid')
-
-      button.btn.btn-warning(@click='addHtml()') add button html to editor
+      .btn-group.btn-group-sm
+        button.btn.btn-warning.je-html(@click='evt("je-insert-content", "<button>button</button>", "e1")') add button html to editor
+        button.btn.btn-warning.je-i(@click='evt("je-i", "e1")') i
+        button.btn.btn-warning.je-b(@click='evt("je-b", "e1")') b
+        button.btn.btn-warning.je-untab(@click='evt("je-untab", "e1")') &larr;
+        button.btn.btn-warning.je-tab(@click='evt("je-tab", "e1")') &rarr;
 
     script(src='/vue/dist/vue.js')
     script(src='/jquery/dist/jquery.js')
@@ -29,8 +33,9 @@ html
           ,jid: 'e1'
         }
         ,methods: {
-          addHtml: function() {
-            this.$broadcast('je-insert-content', '<button>button</button>', 'e1')
+          evt: function() {
+            var args = Array.prototype.slice.call(arguments)
+            this.$broadcast.apply(this, args)
           }
         }
 

test/unit/karma.conf.js

@@ -30,7 +30,7 @@ module.exports = function(config) {
     reporters: ['progress', 'coverage'],
 
     // web server port
-    port: 8080,
+    port: 8084,
 
     // level of logging
     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG

test/unit/test.js

@@ -75,9 +75,9 @@ describe('vue-jade-editor', function () {
 	})
 
 
-	describe('insert html event', function () {
+	describe('events', function () {
 
-		it('insert ok', function(done) {
+		it('insert html ok', function(done) {
 			var vmm = prepare({
 				content: 'init content'
 				,jid: 'cc'
@@ -92,8 +92,70 @@ describe('vue-jade-editor', function () {
 			})
 		})
 
+		it('tab', function(done) {
+			var vmm = prepare({
+				content: 'init content'
+				,jid: 'cc'
+			})
+			var dom = $('#test').find('textarea')[0]
+			dom.selectionStart = 0
+			dom.selectionEnd = 0
+			vmm.$broadcast('je-tab', 'cc')
+			Vue.nextTick(function() {
+				var pts = $('#test').find('textarea')
+				//console.log(pts)
+				expect(pts.val()).to.equal('    init content')
+				done()
+			})
+		})
+
+		it('i', function(done) {
+			var vmm = prepare({
+				content: 'init content'
+				,jid: 'cc'
+			})
+			vmm.$broadcast('je-i', 'cc')
+			Vue.nextTick(function() {
+				var pts = $('#test').find('textarea')
+				//console.log(pts)
+				expect(pts.val()).to.equal('<i></i>init content')
+				done()
+			})
+		})
+
+		it('b', function(done) {
+			var vmm = prepare({
+				content: 'init content'
+				,jid: 'cc'
+			})
+			vmm.$broadcast('je-b', 'cc')
+			Vue.nextTick(function() {
+				var pts = $('#test').find('textarea')
+				//console.log(pts)
+				expect(pts.val()).to.equal('<b></b>init content')
+				done()
+			})
+		})
+
+		it('untab', function(done) {
+			var vmm = prepare({
+				content: 'init content'
+				,jid: 'cc'
+			})
+			var dom = $('#test').find('textarea')[0]
+			dom.selectionStart = 0
+			dom.selectionEnd = 0
+			vmm.$broadcast('je-insert-content', '        ', 'cc')
+			vmm.$broadcast('je-untab', 'cc')
+			Vue.nextTick(function() {
+				var pts = $('#test').find('textarea')
+				//console.log(pts)
+				expect(pts.val()).to.equal('    init content')
+				done()
+			})
+		})
 
-		it('insert not ok with false id', function(done) {
+		it('insert html not ok with false id', function(done) {
 			var vmm = prepare({
 				content: 'init content'
 				,jid: 'cc'