ok
Direktori : /home/ngwcolle/public_html/admin/vendor/ckeditor/samples/old/htmlwriter/ |
Current File : //home/ngwcolle/public_html/admin/vendor/ckeditor/samples/old/htmlwriter/outputhtml.html |
<!DOCTYPE html> <!-- Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license --> <html lang="en"> <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."> <meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities."> </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-2022, <a class="samples" href="https://cksource.com/">CKSource</a> Holding sp. z o.o. All rights reserved. </p> </div> </body> </html>