我已经使用主干制作了这个工具栏:http://take.ms/3tYhM
backbone.view:
define([
'View/Popup',
'text!Templates/Toolbar/Edit.tpl'
], function(Popup, _edit){
var Edit = Backbone.View.extend({
className: 'svs-cke',
events:{
'mousedown': 'mousedown',
'click .bold': 'toggleBold',
'click .italic': 'toggleItalic',
'click .underline': 'toggleUnderline',
'click .link': 'toggleLink',
'keypress [name="link"]': 'setUrl'
},
initialize: function(){
},
render: function(){
this.$el.append(_.template(_edit).apply(this.options));
return this.$el;
},
mousedown: function(e){
if(e.target !== this.$el.find('[name="link"]').get(0)){
e.preventDefault();
}
},
toggleBold: function(e){
document.execCommand('bold', false, null);
$(e.currentTarget).toggleClass('t-active');
},
toggleItalic: function(e){
document.execCommand('italic', false, null);
$(e.currentTarget).toggleClass('t-active');
},
toggleUnderline: function(e){
document.execCommand('underline', false, null);
$(e.currentTarget).toggleClass('t-active');
},
toggleLink: function(e){
if(this.options.nodes.url){
this.$el.find('[name="link"]').val(this.options.nodes.url);
}
this.lastRange = window.getSelection().getRangeAt(0);
this.$el.find('[name="link"]').show();
this.$el.find('[name="link"]').focus();
},
setUrl: function(e){
if(e.which == 13){
e.preventDefault();
this.$el.find('[name="link"]').blur();
window.getSelection().addRange(this.lastRange);
var url = $(e.currentTarget).val();
if(url.length > 0){
document.execCommand('createLink', false, url);
}else{
document.execCommand('unlink', false, null);
}
$(e.currentTarget).hide();
this.$el.find('.link').toggleClass('t-active');
}
}
});
return Edit;
});
我需要再添加一个按钮:'更改字体大小'什么与我的属性有关。我怎样才能以更优雅和简单的方式做到这一点?试着做这个约4天:(
在toolbar.tpl中添加:
<div class="size"><div size-class="bigger"></i></div>
在backbone.view中添加更改大小的新函数:
sizeSelect: function(e){
$(e.currentTarget).siblings('.selected').removeClass('selected');
$(e.currentTarget).toggleClass('selected');
var size = this.$el.find('.size.selected')
if(size.length){
$('[svs-size]').attr('class', size.find('div').attr('size-class'));
$('[svs-size]').trigger('sizeChange');
}
}
添加事件以保存模型:
el.bind("sizeChange", function(){
var section = el.parents('section');
var index = section.index();
var model = collection.at(index);
model.set(Helper.sectionToObj(section))
});
我的HTML:
<div svs-size class="smaller"></div>
但这对我不起作用。我做错了什么? BIG thx!