vue-jade-editor

@githubdownload from github

a online jade editor plugin for vue.js.

demo

shortcuts

• ctrl + ] or tab: more indent
• ctrl + [: less indent
• ctrl + i: '<i>[selection]</i>'
• ctrl + b: '<b>[selection]</b>'

features

• auto indent(backspace enter)
• indent can be customized
• auto close for quote, single quote, bracket, left parenthesis
• smart tab: tab selection or single line
• 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)
• auto increase textarea height
• all methods/events extendable

get

bower install vue-jade-editor
#or 
npm install vue-jade-editor

use

direct use

<script src="vue.min.js">
<script src="vue-jade-editor.min.js">
<div id="test">
  <jadeeditor :rows="rows" :id="jid" :content.sync="content"><jadeeditor>
</div>

//Vue.use(jadeEditor) is not needed
// create instance
Vue.use(jadeEditor)
new Vue({
  el: '#test',
  data: {
    content: 'some init content'
    ,rows: 5
    ,jid: 'editor1'
  }
})

common js way

var Vue = require('vue')
var jadeEditor = require('vue-jade-editor')
Vue.use(jadeEditor)

//or direct use if window.Vue exists

// create instance
var vm = new Vue({
  el: '#test',
  data: {
    ,rows: 5
    ,content: 'some init content'
    ,jid: 'editor1'
  }
})

var htmlToInsert = 'some content'
//insert content by vm.$broadcast('je-insert-content', htmlToInsert, 'editor1')
vm.$broadcast('je-insert-content', htmlToInsert, 'editor1')

events

//insert html
vm.$broadcast('je-insert-content', 'htmlToInsert', 'editor1')

//insert <b></b>
vm.$broadcast('je-b', 'editor1')

//insert <i></i>
vm.$broadcast('je-i', 'editor1')

//more indent
vm.$broadcast('je-tab', 'editor1')

//less indent
vm.$broadcast('je-untab', 'editor1')

customize

var jadeEditor = {

  default: {

    indent: '    ' //4 spaces as indent
    ,template: 
      '<div class="jade-editor">' +
        '<textarea class="form-control" @keyup="keyup($event)" @keydown="keydown($event)">{{content}}</textarea>' +
      '</div>' +
    ,data: function() {
      return {
        _textarea: false
        ,nSelStart: 0
        ,nSelEnd: 0
      }
    }
    ,events: { /*events extendable*/ }
    ,methods: { /*methods extendable*/ }
    
  }
}

//by modify jadeEditor.default to customize the template or other params, like:
zPagenav.default.indent = '  '

test & build

git clone https://github.com/zxdong262/vue-jade-editor.git
cd vue-jade-editor
npm install
bower install
npm run test

#build
gulp build