Ticket #5024: 5024_5.patch

File 5024_5.patch, 7.6 KB (added by Alfonso Martínez de Lizarrondo, 14 years ago)

HTML sample

  • _samples/index.html

     
    4040                <li><a href="sharedspaces.html">Shared toolbars</a></li>
    4141                <li><a href="jqueryadapter.html">jQuery adapter example</a></li>
    4242                <li><a href="output_xhtml.html">Output XHTML</a></li>
     43                <li><a href="output_html.html">Output HTML</a></li>
    4344        </ul>
    4445        <div id="footer">
    4546                <hr />

  • _samples/output_html.html

     
     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2<!--
     3Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     4For 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 - CKEditor Sample</title>
     9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
     10        <!-- CKReleaser %REMOVE_LINE%
     11        <script type="text/javascript" src="../ckeditor.js"></script>
     12        CKReleaser %REMOVE_START% -->
     13        <script type="text/javascript" src="../ckeditor_source.js"></script>
     14        <!-- CKReleaser %REMOVE_END% -->
     15        <script src="sample.js" type="text/javascript"></script>
     16        <link href="sample.css" rel="stylesheet" type="text/css" />
     17</head>
     18<body>
     19        <h1>
     20                CKEditor Sample
     21        </h1>
     22        <!-- This <div> holds alert messages to be display in the sample page. -->
     23        <div id="alerts">
     24                <noscript>
     25                        <p>
     26                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
     27                                support, like yours, you should still see the contents (HTML data) and you should
     28                                be able to edit it normally, without a rich editor interface.
     29                        </p>
     30                </noscript>
     31        </div>
     32        <form action="sample_posteddata.php" method="post">
     33                <p>
     34                        This sample shows CKEditor configured to produce a legacy <strong>HTML4</strong> document. Traditional
     35                        HTML elements like &lt;b&gt;, &lt;i&gt;, and &lt;font&gt; are used in place of
     36                        &lt;strong&gt;, &lt;em&gt; and CSS styles.</p>
     37                <p>
     38                        <label for="editor1">
     39                                Editor 1:</label><br />
     40                        <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>
     41                        <script type="text/javascript">
     42                        //<![CDATA[
     43
     44                                CKEDITOR.replace( 'editor1',
     45                                        {
     46                                                /*
     47                                                 * Style sheet for the contents
     48                                                 */
     49                                                contentsCss : 'body {color:#000; background-color#FFF;}',
     50
     51                                                /*
     52                                                 * Simple HTML5 doctype
     53                                                 */
     54                                                docType : '<!DOCTYPE HTML>',
     55
     56                                                /*
     57                                                 * Core styles.
     58                                                 */
     59                                                coreStyles_bold : { element : 'b' },
     60                                                coreStyles_italic       : { element : 'i' },
     61                                                coreStyles_underline    : { element : 'u'},
     62                                                coreStyles_strike       : { element : 'strike' },
     63
     64                                                /*
     65                                                 * Font face
     66                                                 */
     67                                                // Define the way font elements will be applied to the document. The "font"
     68                                                // element will be used.
     69                                                font_style :
     70                                                {
     71                                                                element         : 'font',
     72                                                                attributes              : { 'face' : '#(family)' }
     73                                                },
     74
     75                                                /*
     76                                                 * Font sizes.
     77                                                 */
     78                                                fontSize_sizes : 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
     79                                                fontSize_style :
     80                                                        {
     81                                                                element         : 'font',
     82                                                                attributes      : { 'size' : '#(size)' }
     83                                                        } ,
     84
     85                                                /*
     86                                                 * Font colors.
     87                                                 */
     88                                                colorButton_enableMore : true,
     89
     90                                                colorButton_foreStyle :
     91                                                        {
     92                                                                element : 'font',
     93                                                                attributes : { 'color' : '#(color)' },
     94                                                                overrides       : [ { element : 'span', attributes : { 'class' : /^FontColor(?:1|2|3)$/ } } ]
     95                                                        },
     96
     97                                                colorButton_backStyle :
     98                                                        {
     99                                                                element : 'font',
     100                                                                styles  : { 'background-color' : '#(color)' }
     101                                                        },
     102
     103                                                /*
     104                                                 * Styles combo.
     105                                                 */
     106                                                stylesSet :
     107                                                                [
     108                                                                        { name : 'Computer Code', element : 'code' },
     109                                                                        { name : 'Keyboard Phrase', element : 'kbd' },
     110                                                                        { name : 'Sample Text', element : 'samp' },
     111                                                                        { name : 'Variable', element : 'var' },
     112
     113                                                                        { name : 'Deleted Text', element : 'del' },
     114                                                                        { name : 'Inserted Text', element : 'ins' },
     115                                                                       
     116                                                                        { name : 'Cited Work', element : 'cite' },
     117                                                                        { name : 'Inline Quotation', element : 'q' }
     118                                                                ],
     119
     120                                                on : { 'instanceReady' : configureHtmlOutput }
     121                                        });
     122
     123/*
     124 * Adjust the behavior of the dataProcessor to avoid styles
     125 * and make it look like FCKeditor HTML output.
     126 */
     127function configureHtmlOutput( ev )
     128{
     129        var editor = ev.editor,
     130                dataProcessor = editor.dataProcessor,
     131                htmlFilter = dataProcessor && dataProcessor.htmlFilter;
     132
     133        // Out self closing tags the HTML4 way, like <br>.
     134        dataProcessor.writer.selfClosingEnd = '>';
     135
     136        // Make output formatting behave similar to FCKeditor
     137        var dtd = CKEDITOR.dtd;
     138        for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
     139        {
     140                dataProcessor.writer.setRules( e,
     141                        {
     142                                indent : true,
     143                                breakBeforeOpen : true,
     144                                breakAfterOpen : false,
     145                                breakBeforeClose : !dtd[ e ][ '#' ],
     146                                breakAfterClose : true
     147                        });
     148        }
     149
     150        // Output properties as attributes, not styles.
     151        htmlFilter.addRules(
     152                {
     153                        elements :
     154                        {
     155                                $ : function( element )
     156                                {
     157                                        // Output dimensions of images as width and height
     158                                        if ( element.name == 'img' )
     159                                        {
     160                                                var style = element.attributes.style;
     161
     162                                                if ( style )
     163                                                {
     164                                                        // Get the width from the style.
     165                                                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
     166                                                                width = match && match[1];
     167
     168                                                        // Get the height from the style.
     169                                                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
     170                                                        var height = match && match[1];
     171
     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
     178                                                        if ( height )
     179                                                        {
     180                                                                element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
     181                                                                element.attributes.height = height;
     182                                                        }
     183                                                }
     184                                        }
     185
     186                                        // Output alignment of paragraphs using align
     187                                        if ( element.name == 'p' )
     188                                        {
     189                                                var style = element.attributes.style;
     190
     191                                                if ( style )
     192                                                {
     193                                                        // Get the align from the style.
     194                                                        var match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style ),
     195                                                                align = match && match[1];
     196
     197                                                        if ( align )
     198                                                        {
     199                                                                element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
     200                                                                element.attributes.align = align;
     201                                                        }
     202                                                }
     203                                        }
     204
     205                                        if ( element.attributes.style == '' )
     206                                                delete element.attributes.style;
     207
     208                                        return element;
     209                                }
     210                        }
     211                } );
     212}
     213
     214                        //]]>
     215                        </script>
     216                </p>
     217                <p>
     218                        <input type="submit" value="Submit" />
     219                </p>
     220        </form>
     221        <div id="footer">
     222                <hr />
     223                <p>
     224                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     225                </p>
     226                <p id="copy">
     227                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
     228                        Knabben. All rights reserved.
     229                </p>
     230        </div>
     231</body>
     232</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy