vue-jade-editor


@githubdownload from github

a online jade editor plugin for vue.js.

it is a important component of jade-press

demo


keyboard shortcuts: ctrl + ictrl + bctrl + [ctrl + ]

sync:

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