output_html.html 7.9 KB

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