Вопрос
I have added nicEdit to my code but somehow when i select the font size and family, nicEdit does not show the selection made. Any way out and possible solution to this?
Решение
Well I tweaked the js file a bit to get the ans. All the functions are there if one just looks close enough.
Look for update function inside the var nicEditorSelect = bkClass.extend({. This function is called when any of the drop boxes' value is changed. elm parameter passed is the value. You can console.log it to see the value.
https://stackoverflow.com/questions/13439542
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianthis.setDisplay(elm)
will set the selected value for display.
Другие советы
Based on the latest nicEdit.js, here is my solution to improving the select options. I've fixed the display text to show but added a new display text for each option as a 3rd array parameter to avoid a huge Header 1 display text etc. I tweaked the widths too.
/* START CONFIG */
var nicSelectOptions = {
buttons: {
'fontFormat' : {name : __('Select Font Format'), type : 'nicEditorFontFormatSelect', command : 'formatBlock'},
'fontFamily': { name: __('Select Font Family'), type: 'nicEditorFontFamilySelect', command: 'fontname' },
'fontSize' : {name : __('Select Font Size'), type : 'nicEditorFontSizeSelect', command : 'fontsize'}
}
};
/* END CONFIG */
var nicEditorSelect = bkClass.extend({
construct : function(e, buttonName, options, nicEditor) {
this.options = options.buttons[buttonName];
this.elm = e;
this.ne = nicEditor;
this.name = buttonName;
this.selOptions = new Array();
this.buttonWidth = buttonName === "fontSize" ? 50 : 100;
this.margin = new bkElement('div').setStyle({ 'float': 'left', margin: '2px 1px 0 1px' }).appendTo(this.elm);
this.contain = new bkElement('div').setStyle({ width: this.buttonWidth + 'px', height: '20px', cursor: 'pointer', overflow: 'hidden' }).addClass('selectContain').addEvent('click', this.toggle.closure(this)).appendTo(this.margin);
this.items = new bkElement('div').setStyle({ overflow: 'hidden', zoom: 1, border: '1px solid #ccc', paddingLeft: '3px', backgroundColor: '#fff' }).appendTo(this.contain);
this.control = new bkElement('div').setStyle({ overflow: 'hidden', 'float': 'right', height: '18px', width: '16px' }).addClass('selectControl').setStyle(this.ne.getIcon('arrow', options)).appendTo(this.items);
this.txt = new bkElement('div').setStyle({ overflow: 'hidden', 'float': 'left', width: this.buttonWidth - 22 + 'px', height: '16px', marginTop: '1px', fontFamily: 'sans-serif', textAlign: 'center', fontSize: '12px' }).addClass('selectTxt').appendTo(this.items);
if (!window.opera) {
this.contain.onmousedown = this.control.onmousedown = this.txt.onmousedown = bkLib.cancelEvent;
}
this.margin.noSelect();
this.ne.addEvent('selected', this.enable.closure(this)).addEvent('blur', function(event) {
this.disable.closure(this);
this.setDisplay(elm);
});
this.disable();
this.init();
},
disable : function() {
this.isDisabled = true;
this.close();
this.contain.setStyle({opacity : 0.6});
},
enable : function(t) {
this.isDisabled = false;
this.close();
this.contain.setStyle({opacity : 1});
},
setDisplay : function(txt) {
this.txt.setContent(txt);
},
toggle : function() {
if(!this.isDisabled) {
(this.pane) ? this.close() : this.open();
}
},
open : function() {
this.pane = new nicEditorPane(this.items, this.ne, { minWidth: this.buttonWidth - 2 + 'px', padding: '0px', borderTop: 0, borderLeft: '1px solid #ccc', borderRight: '1px solid #ccc', borderBottom: '0px', backgroundColor: '#fff' });
for(var i=0;i<this.selOptions.length;i++) {
var opt = this.selOptions[i];
var itmContain = new bkElement('div').setStyle({ overflow: 'hidden', borderBottom: '1px solid #ccc', minWidth: this.buttonWidth - 2 + 'px', textAlign: 'left', overflow: 'hidden', cursor: 'pointer' });
var itm = new bkElement('div').setStyle({padding : '0px 4px'}).setContent(opt[1]).appendTo(itmContain).noSelect();
itm.addEvent('click',this.update.closure(this,opt[0],opt[2])).addEvent('mouseover',this.over.closure(this,itm)).addEvent('mouseout',this.out.closure(this,itm)).setAttributes('id',opt[0]);
this.pane.append(itmContain);
if(!window.opera) {
itm.onmousedown = bkLib.cancelEvent;
}
}
},
close : function() {
if(this.pane) {
this.pane = this.pane.remove();
}
},
over : function(opt) {
opt.setStyle({backgroundColor : '#ccc'});
},
out : function(opt) {
opt.setStyle({backgroundColor : '#fff'});
},
add : function(k,v,d) {
this.selOptions.push(new Array(k,v,d));
},
update: function (elm, elmTxt) {
this.ne.nicCommand(this.options.command, elm);
this.setDisplay(elmTxt);
this.close();
}
});
var nicEditorFontFamilySelect = nicEditorSelect.extend({
sel: { 'arial': 'Arial', 'comic sans ms': 'Comic Sans', 'courier new': 'Courier New', 'georgia': 'Georgia', 'helvetica': 'Helvetica', 'impact': 'Impact', 'times new roman': 'Times', 'trebuchet ms': 'Trebuchet', 'verdana': 'Verdana' },
init : function() {
this.setDisplay('Font');
for(itm in this.sel) {
this.add(itm, '<font face="' + itm + '">' + this.sel[itm] + '</font>', '<font face="' + itm + '">' + this.sel[itm] + '</font>');
}
}
});
var nicEditorFontSizeSelect = nicEditorSelect.extend({
sel: { 1: '8', 2: '10', 3: '12', 4: '14', 5: '18', 6: '24' },
init: function () {
this.setDisplay('Size');
for (itm in this.sel) {
this.add(itm, '<font size="' + itm + '">' + this.sel[itm] + '</font>', this.sel[itm]);
}
}
});
var nicEditorFontFormatSelect = nicEditorSelect.extend({
sel: { 'p': 'Paragraph', 'h1': 'Heading 1', 'h2': 'Heading 2', 'h3': 'Heading 3', 'h4': 'Heading 4', 'h5': 'Heading 5', 'h6': 'Heading 6', 'pre': 'Pre' },
init : function() {
this.setDisplay('Style');
for(itm in this.sel) {
var tag = itm.toUpperCase();
this.add('<' + tag + '>', '<' + itm + ' style="padding: 0px; margin: 0px;">' + this.sel[itm] + '</' + tag + '>', this.sel[itm]);
}
}
});
I also reordered the selects in the buttonList for my own preference:
/* START CONFIG */
var nicEditorConfig = bkClass.extend({
buttons : {
'bold' : {name : __('Click to Bold'), command : 'Bold', tags : ['B','STRONG'], css : {'font-weight' : 'bold'}, key : 'b'},
'italic' : {name : __('Click to Italic'), command : 'Italic', tags : ['EM','I'], css : {'font-style' : 'italic'}, key : 'i'},
'underline' : {name : __('Click to Underline'), command : 'Underline', tags : ['U'], css : {'text-decoration' : 'underline'}, key : 'u'},
'left' : {name : __('Left Align'), command : 'justifyleft', noActive : true},
'center' : {name : __('Center Align'), command : 'justifycenter', noActive : true},
'right' : {name : __('Right Align'), command : 'justifyright', noActive : true},
'justify' : {name : __('Justify Align'), command : 'justifyfull', noActive : true},
'ol' : {name : __('Insert Ordered List'), command : 'insertorderedlist', tags : ['OL']},
'ul' : {name : __('Insert Unordered List'), command : 'insertunorderedlist', tags : ['UL']},
'subscript' : {name : __('Click to Subscript'), command : 'subscript', tags : ['SUB']},
'superscript' : {name : __('Click to Superscript'), command : 'superscript', tags : ['SUP']},
'strikethrough' : {name : __('Click to Strike Through'), command : 'strikeThrough', css : {'text-decoration' : 'line-through'}},
'removeformat' : {name : __('Remove Formatting'), command : 'removeformat', noActive : true},
'indent' : {name : __('Indent Text'), command : 'indent', noActive : true},
'outdent' : {name : __('Remove Indent'), command : 'outdent', noActive : true},
'hr' : {name : __('Horizontal Rule'), command : 'insertHorizontalRule', noActive : true}
},
iconsPath : '../nicEditorIcons.gif',
buttonList: ['save', 'bold', 'italic', 'underline', 'left', 'center', 'right', 'justify', 'ol', 'ul', 'fontFormat', 'fontFamily', 'fontSize', 'indent', 'outdent', 'image', 'upload', 'link', 'unlink', 'forecolor', 'bgcolor'],
iconList : {"bgcolor":1,"forecolor":2,"bold":3,"center":4,"hr":5,"indent":6,"italic":7,"justify":8,"left":9,"ol":10,"outdent":11,"removeformat":12,"right":13,"save":24,"strikethrough":15,"subscript":16,"superscript":17,"ul":18,"underline":19,"image":20,"link":21,"unlink":22,"close":23,"arrow":25}
});
/* END CONFIG */
