|
|
<!DOCTYPE html><!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.md or http://ckeditor.com/license--><html><head> <meta charset="utf-8"> <title>HTML Compliant Output — CKEditor Sample</title> <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>',
/* * Allowed content rules which beside limiting allowed HTML * will also take care of transforming styles to attributes * (currently only for img - see transformation rules defined below). * * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter */ allowedContent: 'h1 h2 h3 p pre[align]; ' + 'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' + 'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',
/* * 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_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: { pluginsLoaded: configureTransformations, loaded: configureHtmlWriter } });
/* * Add missing content transformations. */ function configureTransformations( evt ) { var editor = evt.editor;
editor.dataProcessor.htmlFilter.addRules( { attributes: { style: function( value, element ) { // Return #RGB for background and border colors return CKEDITOR.tools.convertRgbToHex( value ); } } } );
// Default automatic content transformations do not yet take care of // align attributes on blocks, so we need to add our own transformation rules. function alignToAttribute( element ) { if ( element.styles[ 'text-align' ] ) { element.attributes.align = element.styles[ 'text-align' ]; delete element.styles[ 'text-align' ]; } } editor.filter.addTransformations( [ [ { element: 'p', right: alignToAttribute } ], [ { element: 'h1', right: alignToAttribute } ], [ { element: 'h2', right: alignToAttribute } ], [ { element: 'h3', right: alignToAttribute } ], [ { element: 'pre', right: alignToAttribute } ] ] ); }
/* * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor. */ function configureHtmlWriter( evt ) { var editor = evt.editor, dataProcessor = editor.dataProcessor;
// 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 }); } }
</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-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved. </p> </div></body></html>
|
