nicedit가 선택된 글꼴 크기 및 패밀리를 표시하지 않습니다.

Question

내 코드에 nicEdit을 추가했지만 글꼴 크기 및 패밀리를 선택하면 nicEdit에서 선택한 사항이 표시되지 않습니다. 이것에 대한 가능한 모든 해결책과 가능한 해결책?

Answer 1

글쎄 나는 ans를 얻기 위해 js 파일을 조금 비틀었다. 모든 기능은 단지 가까이에서 보면 충분합니다. 안에 update 함수를 찾으십시오. 이 함수는 드롭 상자의 값이 변경 될 때 호출됩니다. elm 매개 변수가 전달됩니다. console.log로 값을 볼 수 있습니다.

this.setDisplay(elm) 

은 표시 할 값을 선택합니다.

Answer 2

최신 nicEdit.js을 기반으로 여기 선택 옵션을 개선하기위한 나의 해결책이 있습니다. 표시 텍스트를 고정했지만 각 옵션에 대한 새로운 표시 텍스트를 제 3 배열 매개 변수로 추가하여 거대한 헤더 1 표시 텍스트 등을 피했습니다. 너비도 조정했습니다.

/* 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&nbsp;Sans', 'courier new': 'Courier&nbsp;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&nbsp;1', 'h2': 'Heading&nbsp;2', 'h3': 'Heading&nbsp;3', 'h4': 'Heading&nbsp;4', 'h5': 'Heading&nbsp;5', 'h6': 'Heading&nbsp;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]); 
     } 
    } 
}); 

나는 또한 내 자신의 취향에 대한 buttonList의 선택을 다시 정렬 : 그래, 나는 또한 솔루션을 찾고 있어요

/* 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 */ 

Screenshot before selection

Screenshot after selection