1 /* 2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 CKEDITOR.dialog.add( 'specialchar', function( editor ) 7 { 8 return { 9 title : editor.lang.specialChar.title, 10 minWidth : 450, 11 minHeight : 350, 12 buttons : [ CKEDITOR.dialog.cancelButton ], 13 charColumns : 17, 14 chars : 15 [ 16 '!','"','#','$','%','&',"'",'(',')','*','+','-','.','/', 17 '0','1','2','3','4','5','6','7','8','9',':',';', 18 '<','=','>','?','@', 19 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O', 20 'P','Q','R','S','T','U','V','W','X','Y','Z', 21 '[',']','^','_','`', 22 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p', 23 'q','r','s','t','u','v','w','x','y','z', 24 '{','|','}','~','€','‘','’','’','“', 25 '”','–','—','¡','¢','£', 26 '¤','¥','¦','§','¨','©','ª', 27 '«','¬','®','¯','°','±','²', 28 '³','´','µ','¶','·','¸', 29 '¹','º','»','¼','½','¾', 30 '¿','À','Á','Â','Ã','Ä', 31 'Å','Æ','Ç','È','É','Ê', 32 'Ë','Ì','Í','Î','Ï','Ð', 33 'Ñ','Ò','Ó','Ô','Õ','Ö', 34 '×','Ø','Ù','Ú','Û','Ü', 35 'Ý','Þ','ß','à','á','â', 36 'ã','ä','å','æ','ç','è', 37 'é','ê','ë','ì','í','î', 38 'ï','ð','ñ','ò','ó','ô', 39 'õ','ö','÷','ø','ù','ú', 40 'û','ü','ü','ý','þ','ÿ', 41 'Œ','œ','Ŵ','Ŷ','ŵ','ŷ','‚', 42 '‛','„','…','™','►','•', 43 '→','⇒','⇔','♦','≈' 44 ], 45 onLoad : function() 46 { 47 var columns = this.definition.charColumns, 48 chars = this.definition.chars; 49 50 var html = [ '<table style="width: 320px; height: 100%; border-collapse: separate;" align="center" cellspacing="2" cellpadding="2" border="0">' ]; 51 52 var i = 0 ; 53 while ( i < chars.length ) 54 { 55 html.push( '<tr>' ) ; 56 57 for( var j = 0 ; j < columns ; j++, i++ ) 58 { 59 if ( chars[ i ] ) 60 { 61 html.push( 62 '<td width="1%"' + 63 ' title="', chars[i].replace( /&/g, '&' ), '"' + 64 ' value="', chars[i].replace( /&/g, "&" ), '"' + 65 ' class="DarkBackground Hand">'); 66 html.push( chars[i] ); 67 } 68 else 69 html.push( '<td class="DarkBackground"> ' ); 70 71 html.push( '</td>' ); 72 } 73 html.push( '</tr>' ); 74 } 75 76 html.push( '</tbody></table>' ); 77 78 this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) ); 79 }, 80 contents : [ 81 { 82 id : 'info', 83 label : editor.lang.common.generalTab, 84 title : editor.lang.common.generalTab, 85 align : top, 86 elements : [ 87 { 88 type : 'hbox', 89 align : 'top', 90 widths : [ '320px', '90px' ], 91 children : 92 [ 93 { 94 type : 'html', 95 id : 'charContainer', 96 html : '', 97 onMouseover : function( evt ) 98 { 99 var target = evt.data.getTarget(), 100 value; 101 if ( target.getName() == 'td' && ( value = target.getAttribute( 'value' ) ) ) 102 { 103 var dialog = this.getDialog(), 104 htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement(); 105 106 dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( value ); 107 htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) ); 108 target.addClass( "LightBackground" ); 109 } 110 }, 111 onMouseout : function( evt ) 112 { 113 var target = evt.data.getTarget(); 114 if ( target.getName() == 'td' ) 115 { 116 var dialog = this.getDialog(); 117 dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( ' ' ); 118 dialog.getContentElement( 'info', 'htmlPreview' ).getElement().setHtml( ' ' ); 119 target.removeClass( "LightBackground" ); 120 } 121 }, 122 onClick : function( evt ) 123 { 124 var target = evt.data.getTarget(); 125 if ( target.getName() == 'td' && ( value = target.$.getAttribute( 'value' )) ) 126 { 127 var dialog = this.getDialog(); 128 target.removeClass( "LightBackground" ); 129 dialog.restoreSelection(); 130 dialog.getParentEditor().insertHtml( value ); 131 dialog.hide(); 132 } 133 } 134 }, 135 { 136 type : 'hbox', 137 align : 'top', 138 widths : [ '100%' ], 139 children : 140 [ 141 { 142 type : 'vbox', 143 align : 'top', 144 children : 145 [ 146 { 147 type : 'html', 148 html : '<div></div>' 149 }, 150 { 151 type : 'html', 152 id : 'charPreview', 153 style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:28px;height:40px;width:70px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;', 154 html : '<div> </div>' 155 }, 156 { 157 type : 'html', 158 id : 'htmlPreview', 159 style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:14px;height:20px;width:70px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;', 160 html : '<div> </div>' 161 } 162 ] 163 } 164 ] 165 } 166 ] 167 } 168 ] 169 } 170 ] 171 }; 172 } ); 173