diff options
Diffstat (limited to 'samples/old/htmlwriter/outputhtml.html')
| -rwxr-xr-x | samples/old/htmlwriter/outputhtml.html | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/samples/old/htmlwriter/outputhtml.html b/samples/old/htmlwriter/outputhtml.html new file mode 100755 index 0000000..7e78164 --- /dev/null +++ b/samples/old/htmlwriter/outputhtml.html @@ -0,0 +1,231 @@ +<!DOCTYPE html> +<!-- +Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license +--> +<html> + +<head> + <meta charset="utf-8"> + <title>HTML Compliant Output — CKEditor Sample</title> + <script src="../../../ckeditor.js"></script> + <script src="../../../samples/old/sample.js"></script> + <link href="../../../samples/old/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/old/index.html">CKEditor Samples</a> » Producing HTML Compliant Output + </h1> + <div class="warning deprecated"> + This sample is not maintained anymore. Check out the <a + href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor + Examples</a>. + </div> + <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="https://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: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter.html + */ + 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="https://ckeditor.com/">https://ckeditor.com</a> + </p> + <p id="copy"> + Copyright © 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico + Knabben. All rights reserved. + </p> + </div> +</body> + +</html>
\ No newline at end of file |