| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[Summary view] [Print] [Text view]
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <!-- 3 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. 4 For licensing, see LICENSE.html or http://ckeditor.com/license 5 --> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <title>HTML compliant output - CKEditor Sample</title> 9 <meta content="text/html; charset=utf-8" http-equiv="content-type" /> 10 <script type="text/javascript" src="../ckeditor.js"></script> 11 <script src="sample.js" type="text/javascript"></script> 12 <link href="sample.css" rel="stylesheet" type="text/css" /> 13 </head> 14 <body> 15 <h1> 16 CKEditor Sample 17 </h1> 18 <!-- This <div> holds alert messages to be display in the sample page. --> 19 <div id="alerts"> 20 <noscript> 21 <p> 22 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript 23 support, like yours, you should still see the contents (HTML data) and you should 24 be able to edit it normally, without a rich editor interface. 25 </p> 26 </noscript> 27 </div> 28 <form action="sample_posteddata.php" method="post"> 29 <p> 30 This sample shows CKEditor configured to produce a legacy <strong>HTML4</strong> document. Traditional 31 HTML elements like <b>, <i>, and <font> are used in place of 32 <strong>, <em> and CSS styles.</p> 33 <p> 34 <label for="editor1"> 35 Editor 1:</label><br /> 36 <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> 37 <script type="text/javascript"> 38 //<![CDATA[ 39 40 CKEDITOR.replace( 'editor1', 41 { 42 /* 43 * Style sheet for the contents 44 */ 45 contentsCss : 'body {color:#000; background-color#:FFF;}', 46 47 /* 48 * Simple HTML5 doctype 49 */ 50 docType : '<!DOCTYPE HTML>', 51 52 /* 53 * Core styles. 54 */ 55 coreStyles_bold : { element : 'b' }, 56 coreStyles_italic : { element : 'i' }, 57 coreStyles_underline : { element : 'u'}, 58 coreStyles_strike : { element : 'strike' }, 59 60 /* 61 * Font face 62 */ 63 // Define the way font elements will be applied to the document. The "font" 64 // element will be used. 65 font_style : 66 { 67 element : 'font', 68 attributes : { 'face' : '#(family)' } 69 }, 70 71 /* 72 * Font sizes. 73 */ 74 fontSize_sizes : 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7', 75 fontSize_style : 76 { 77 element : 'font', 78 attributes : { 'size' : '#(size)' } 79 } , 80 81 /* 82 * Font colors. 83 */ 84 colorButton_enableMore : true, 85 86 colorButton_foreStyle : 87 { 88 element : 'font', 89 attributes : { 'color' : '#(color)' }, 90 overrides : [ { element : 'span', attributes : { 'class' : /^FontColor(?:1|2|3)$/ } } ] 91 }, 92 93 colorButton_backStyle : 94 { 95 element : 'font', 96 styles : { 'background-color' : '#(color)' } 97 }, 98 99 /* 100 * Styles combo. 101 */ 102 stylesSet : 103 [ 104 { name : 'Computer Code', element : 'code' }, 105 { name : 'Keyboard Phrase', element : 'kbd' }, 106 { name : 'Sample Text', element : 'samp' }, 107 { name : 'Variable', element : 'var' }, 108 109 { name : 'Deleted Text', element : 'del' }, 110 { name : 'Inserted Text', element : 'ins' }, 111 112 { name : 'Cited Work', element : 'cite' }, 113 { name : 'Inline Quotation', element : 'q' } 114 ], 115 116 on : { 'instanceReady' : configureHtmlOutput } 117 }); 118 119 /* 120 * Adjust the behavior of the dataProcessor to avoid styles 121 * and make it look like FCKeditor HTML output. 122 */ 123 function configureHtmlOutput( ev ) 124 { 125 var editor = ev.editor, 126 dataProcessor = editor.dataProcessor, 127 htmlFilter = dataProcessor && dataProcessor.htmlFilter; 128 129 // Out self closing tags the HTML4 way, like <br>. 130 dataProcessor.writer.selfClosingEnd = '>'; 131 132 // Make output formatting behave similar to FCKeditor 133 var dtd = CKEDITOR.dtd; 134 for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) 135 { 136 dataProcessor.writer.setRules( e, 137 { 138 indent : true, 139 breakBeforeOpen : true, 140 breakAfterOpen : false, 141 breakBeforeClose : !dtd[ e ][ '#' ], 142 breakAfterClose : true 143 }); 144 } 145 146 // Output properties as attributes, not styles. 147 htmlFilter.addRules( 148 { 149 elements : 150 { 151 $ : function( element ) 152 { 153 // Output dimensions of images as width and height 154 if ( element.name == 'img' ) 155 { 156 var style = element.attributes.style; 157 158 if ( style ) 159 { 160 // Get the width from the style. 161 var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ), 162 width = match && match[1]; 163 164 // Get the height from the style. 165 match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style ); 166 var height = match && match[1]; 167 168 if ( width ) 169 { 170 element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' ); 171 element.attributes.width = width; 172 } 173 174 if ( height ) 175 { 176 element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' ); 177 element.attributes.height = height; 178 } 179 } 180 } 181 182 // Output alignment of paragraphs using align 183 if ( element.name == 'p' ) 184 { 185 style = element.attributes.style; 186 187 if ( style ) 188 { 189 // Get the align from the style. 190 match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style ); 191 var align = match && match[1]; 192 193 if ( align ) 194 { 195 element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' ); 196 element.attributes.align = align; 197 } 198 } 199 } 200 201 if ( !element.attributes.style ) 202 delete element.attributes.style; 203 204 return element; 205 } 206 }, 207 208 attributes : 209 { 210 style : function( value, element ) 211 { 212 // Return #RGB for background and border colors 213 return convertRGBToHex( value ); 214 } 215 } 216 } ); 217 } 218 219 220 /** 221 * Convert a CSS rgb(R, G, B) color back to #RRGGBB format. 222 * @param Css style string (can include more than one color 223 * @return Converted css style. 224 */ 225 function convertRGBToHex( cssStyle ) 226 { 227 return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue ) 228 { 229 red = parseInt( red, 10 ).toString( 16 ); 230 green = parseInt( green, 10 ).toString( 16 ); 231 blue = parseInt( blue, 10 ).toString( 16 ); 232 var color = [red, green, blue] ; 233 234 // Add padding zeros if the hex value is less than 0x10. 235 for ( var i = 0 ; i < color.length ; i++ ) 236 color[i] = String( '0' + color[i] ).slice( -2 ) ; 237 238 return '#' + color.join( '' ) ; 239 }); 240 } 241 //]]> 242 </script> 243 </p> 244 <p> 245 <input type="submit" value="Submit" /> 246 </p> 247 </form> 248 <div id="footer"> 249 <hr /> 250 <p> 251 CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a> 252 </p> 253 <p id="copy"> 254 Copyright © 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico 255 Knabben. All rights reserved. 256 </p> 257 </div> 258 </body> 259 </html>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |