|
|
<!DOCTYPE html><!--
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or http://ckeditor.com/license--><html><head> <title>HTML Compliant Output — CKEditor Sample</title> <meta charset="utf-8"> <script src="../../../ckeditor.js"></script> <script src="../../../samples/sample.js"></script> <link href="../../../samples/sample.css" rel="stylesheet"> <meta name="ckeditor-sample-required-plugins" content="sourcearea"> <meta name="ckeditor-sample-name" content="Output HTML"> <meta name="ckeditor-sample-group" content="Advanced Samples"> <meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code."></head><body> <h1 class="samples"> <a href="../../../samples/index.html">CKEditor Samples</a> » Producing HTML Compliant Output </h1> <div class="description"> <p> This sample shows how to configure CKEditor to output valid <a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code. Traditional HTML elements like <code><b></code>, <code><i></code>, and <code><font></code> are used in place of <code><strong></code>, <code><em></code>, and CSS styles. </p> <p> To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes. </p> <p> A snippet of the configuration code can be seen below; check the source of this page for full definition: </p><pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>', { coreStyles_bold: { element: 'b' }, coreStyles_italic: { element: 'i' },
fontSize_style: { element: 'font', attributes: { 'size': '#(size)' } }
...});</pre> </div> <form action="../../../samples/sample_posteddata.php" method="post"> <p> <label for="editor1"> Editor 1: </label> <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> <script>
CKEDITOR.replace( 'editor1', { /* * Ensure that htmlwriter plugin, which is required for this sample, is loaded. */ extraPlugins: 'htmlwriter',
/* * Style sheet for the contents */ contentsCss: 'body {color:#000; background-color#:FFF;}',
/* * Simple HTML5 doctype */ docType: '<!DOCTYPE HTML>',
/* * Core styles. */ coreStyles_bold: { element: 'b' }, coreStyles_italic: { element: 'i' }, coreStyles_underline: { element: 'u' }, coreStyles_strike: { element: 'strike' },
/* * Font face. */
// Define the way font elements will be applied to the document. // The "font" element will be used. font_style: { element: 'font', attributes: { 'face': '#(family)' } },
/* * Font sizes. */ fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7', fontSize_style: { element: 'font', attributes: { 'size': '#(size)' } } ,
/* * Font colors. */ colorButton_enableMore: true,
colorButton_foreStyle: { element: 'font', attributes: { 'color': '#(color)' } },
colorButton_backStyle: { element: 'font', styles: { 'background-color': '#(color)' } },
/* * Styles combo. */ stylesSet: [ { name: 'Computer Code', element: 'code' }, { name: 'Keyboard Phrase', element: 'kbd' }, { name: 'Sample Text', element: 'samp' }, { name: 'Variable', element: 'var' }, { name: 'Deleted Text', element: 'del' }, { name: 'Inserted Text', element: 'ins' }, { name: 'Cited Work', element: 'cite' }, { name: 'Inline Quotation', element: 'q' } ],
on: { 'instanceReady': configureHtmlOutput } });
/* * Adjust the behavior of the dataProcessor to avoid styles * and make it look like FCKeditor HTML output. */ function configureHtmlOutput( ev ) { var editor = ev.editor, dataProcessor = editor.dataProcessor, htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>. dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting behave similar to FCKeditor var dtd = CKEDITOR.dtd; for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) { dataProcessor.writer.setRules( e, { indent: true, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: !dtd[ e ][ '#' ], breakAfterClose: true }); }
// Output properties as attributes, not styles. htmlFilter.addRules( { elements: { $: function( element ) { // Output dimensions of images as width and height if ( element.name == 'img' ) { var style = element.attributes.style;
if ( style ) { // Get the width from the style. var match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style ), width = match && match[ 1 ];
// Get the height from the style. match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style ); var height = match && match[ 1 ];
if ( width ) { element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' ); element.attributes.width = width; }
if ( height ) { element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' ); element.attributes.height = height; } } }
// Output alignment of paragraphs using align if ( element.name == 'p' ) { style = element.attributes.style;
if ( style ) { // Get the align from the style. match = ( /(?:^|\s)text-align\s*:\s*(\w*);/i ).exec( style ); var align = match && match[ 1 ];
if ( align ) { element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' ); element.attributes.align = align; } } }
if ( !element.attributes.style ) delete element.attributes.style;
return element; } },
attributes: { style: function( value, element ) { // Return #RGB for background and border colors return CKEDITOR.tools.convertRgbToHex( value ); } } }); }
</script> </p> <p> <input type="submit" value="Submit"> </p> </form> <div id="footer"> <hr> <p> CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> </p> <p id="copy"> Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved. </p> </div></body></html>
|
