vue-jade-editor
a online jade editor plugin for vue.js.
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