Ticket #6924: 6924_2.patch

File 6924_2.patch, 79.5 KB (added by Wiktor Walc, 9 years ago)
  • ajax.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Ajax - CKEditor Sample</title>
     8        <title>Ajax &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    5151</head>
    5252<body>
    5353        <h1>
    54                 CKEditor Sample
     54                CKEditor Sample &mdash; Create and Destroy Editor Instances for Ajax Applications
    5555        </h1>
     56        <div class="description">
     57        <p>
     58                This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
     59                area will be displayed in a <code>&lt;div&gt;</code> element.
     60        </p>
     61        <p>
     62                For details of how to create this setup check the source code of this sample page
     63                for JavaScript code responsible for the creation and destruction of a CKEditor instance.
     64        </p>
     65        </div>
     66       
    5667        <!-- This <div> holds alert messages to be display in the sample page. -->
    5768        <div id="alerts">
    5869                <noscript>
     
    6374                        </p>
    6475                </noscript>
    6576        </div>
     77        <p>Click the buttons to create and remove a CKEditor instance.</p>
    6678        <p>
    6779                <input onclick="createEditor();" type="button" value="Create Editor" />
    6880                <input onclick="removeEditor();" type="button" value="Remove Editor" />
     
    8092        <div id="footer">
    8193                <hr />
    8294                <p>
    83                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     95                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    8496                </p>
    8597                <p id="copy">
    8698                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • api.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>API usage - CKEditor Sample</title>
     8        <title>API Usage &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    3737        // Check the active editing mode.
    3838        if ( oEditor.mode == 'wysiwyg' )
    3939        {
    40                 // Insert the desired HTML.
     40                // Insert HTML code.
     41                // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
    4142                oEditor.insertHtml( value );
    4243        }
    4344        else
     
    5455        if ( oEditor.mode == 'wysiwyg' )
    5556        {
    5657                // Insert as plain text.
     58                // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertText
    5759                oEditor.insertText( value );
    5860        }
    5961        else
     
    6668        var oEditor = CKEDITOR.instances.editor1;
    6769        var value = document.getElementById( 'htmlArea' ).value;
    6870
    69         // Set the editor contents (replace the actual one).
     71        // Set editor contents (replace current contents).
     72        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData
    7073        oEditor.setData( value );
    7174}
    7275
    7376function GetContents()
    7477{
    75         // Get the editor instance that we want to interact with.
     78        // Get the editor instance that you want to interact with.
    7679        var oEditor = CKEDITOR.instances.editor1;
    7780
    78         // Get the editor contents
     81        // Get editor contents
     82        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
    7983        alert( oEditor.getData() );
    8084}
    8185
     
    8892        if ( oEditor.mode == 'wysiwyg' )
    8993        {
    9094                // Execute the command.
     95                // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
    9196                oEditor.execCommand( commandName );
    9297        }
    9398        else
     
    98103{
    99104        // Get the editor instance that we want to interact with.
    100105        var oEditor = CKEDITOR.instances.editor1;
     106        // Checks whether the current editor contents present changes when compared
     107        // to the contents loaded into the editor at startup
     108        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#checkDirty
    101109        alert( oEditor.checkDirty() );
    102110}
    103111
     
    105113{
    106114        // Get the editor instance that we want to interact with.
    107115        var oEditor = CKEDITOR.instances.editor1;
     116        // Resets the "dirty state" of the editor (see CheckDirty())
     117        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#resetDirty
    108118        oEditor.resetDirty();
    109119        alert( 'The "IsDirty" status has been reset' );
    110120}
     
    115125</head>
    116126<body>
    117127        <h1>
    118                 CKEditor Sample
     128                CKEditor Sample &mdash; Using CKEditor JavaScript API
    119129        </h1>
     130        <div class="description">
     131        <p>
     132                This sample shows how to use the
     133                <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html">CKEditor JavaScript API</a>
     134                to interact with the editor at runtime.
     135        </p>
     136        <p>
     137                For details on how to create this setup check the source code of this sample page.
     138        </p>
     139        </div>
     140
    120141        <!-- This <div> holds alert messages to be display in the sample page. -->
    121142        <div id="alerts">
    122143                <noscript>
     
    128149                </noscript>
    129150        </div>
    130151        <form action="sample_posteddata.php" method="post">
    131                 <p>
    132                         This sample shows how to use the CKEditor JavaScript API to interact with the editor
    133                         at runtime.</p>
    134                 <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
     152                <textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    135153
    136154                <script type="text/javascript">
    137155                //<![CDATA[
     
    147165                        <input onclick="SetContents();" type="button" value="Set Editor Contents" />
    148166                        <input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)" />
    149167                        <br />
    150                         <textarea cols="80" id="htmlArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML&lt;/p&gt;</textarea>
     168                        <textarea cols="100" id="htmlArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML&lt;/p&gt;</textarea>
    151169                        <br />
    152170                        <br />
    153171                        <input onclick="InsertText();" type="button" value="Insert Text" />
    154172                        <br />
    155                         <textarea cols="80" id="txtArea" rows="3">   First line with some leading whitespaces.
     173                        <textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.
    156174
    157 Second line of text preceding by two line-breaks.</textarea>
     175Second line of text preceded by two line breaks.</textarea>
    158176                        <br />
    159177                        <input onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command" />
    160178                        <input onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command" />
     
    167185        <div id="footer">
    168186                <hr />
    169187                <p>
    170                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     188                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    171189                </p>
    172190                <p id="copy">
    173191                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • api_dialog.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Using API to customize dialogs - CKEditor Sample</title>
     8        <title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    107107</head>
    108108<body>
    109109        <h1>
    110                 CKEditor Sample
     110                CKEditor Sample &mdash; Using CKEditor Dialog API
    111111        </h1>
     112        <div class="description">
     113        <p>
     114                This sample shows how to use the
     115                <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html">CKEditor Dialog API</a>
     116                to customize CKEditor dialog windows without changing the original editor code.
     117                The following customizations are being done in the example below:
     118        </p>
     119        <ol>
     120                <li><strong>Adding dialog window tabs</strong> &ndash; "My Tab" in the "Link" dialog window.</li>
     121                <li><strong>Removing a dialog window tab</strong> &ndash; "Target" tab from the "Link" dialog window.</li>
     122                <li><strong>Adding dialog window fields</strong> &ndash; "My Custom Field" in the "Link" dialog window.</li>
     123                <li><strong>Removing dialog window fields</strong> &ndash; "Link Type" and "Browser Server" in the "Link"
     124                        dialog window.</li>
     125                <li><strong>Setting default values for dialog window fields</strong> &ndash; "URL" field in the
     126                        "Link" dialog window. </li>
     127                <li><strong>Creating a custom dialog window</strong> &ndash; "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>
     128        </ol>
     129        </p>
     130        <p>
     131For details on how to create this setup check the source code of this sample page.
     132        </p>
     133        </div>
     134       
     135       
    112136        <!-- This <div> holds alert messages to be display in the sample page. -->
    113137        <div id="alerts">
    114138                <noscript>
     
    121145        </div>
    122146        <!-- This <fieldset> holds the HTML that you will usually find in your
    123147             pages. -->
    124         <p>
    125                 This sample shows how to use the dialog API to customize dialogs whithout changing
    126                 the original editor code. The following customizations are being done::</p>
    127         <ol>
    128                 <li><strong>Add dialog pages</strong> ("My Tab" in the Link dialog).</li>
    129                 <li><strong>Remove a dialog tab</strong> ("Target" tab from the Link dialog).</li>
    130                 <li><strong>Add dialog fields</strong> ("My Custom Field" into the Link dialog).</li>
    131                 <li><strong>Remove dialog fields</strong> ("Link Type" and "Browser Server" the Link
    132                         dialog).</li>
    133                 <li><strong>Set default values for dialog fields</strong> (for the "URL" field in the
    134                         Link dialog). </li>
    135                 <li><strong>Create a custom dialog</strong> ("My Dialog" button).</li>
    136         </ol>
    137148        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    138149        <script type="text/javascript">
    139150                //<![CDATA[
     
    181192        <div id="footer">
    182193                <hr />
    183194                <p>
    184                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     195                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    185196                </p>
    186197                <p id="copy">
    187198                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • asp/index.html

     
    9393        <div id="footer">
    9494                <hr />
    9595                <p>
    96                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     96                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    9797                </p>
    9898                <p id="copy">
    9999                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
  • assets/_posteddata.php

     
    77?>
    88<html xmlns="http://www.w3.org/1999/xhtml">
    99<head>
    10         <title>Sample - CKEditor</title>
     10        <title>Sample &mdash; CKEditor</title>
    1111        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    1212        <link type="text/css" rel="stylesheet" href="sample.css" />
    1313</head>
    1414<body>
    1515        <h1>
    16                 CKEditor - Posted Data
     16                CKEditor &mdash; Posted Data
    1717        </h1>
    1818        <table border="1" cellspacing="0" id="outputSample">
    1919                <colgroup><col width="100" /></colgroup>
     
    4949        <div id="footer">
    5050                <hr />
    5151                <p>
    52                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     52                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    5353                </p>
    5454                <p id="copy">
    5555                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
  • autogrow.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>AutoGrow Plugin - CKEditor Sample</title>
     8        <title>AutoGrow Plugin &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Using AutoGrow Plugin
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to configure CKEditor instances to use the
     25                <strong>autogrow</strong> plugin that lets the editor window expand and shrink
     26                depending on the amount and size of content entered in the editing area.
     27        </p>
     28        <p>
     29                In its default implementation the <strong>AutoGrow feature</strong> can expand the
     30                CKEditor window infinitely in order to avoid introducing scrollbars to the editing area.
     31        </p>
     32        <p>
     33                It is also possible to set a maximum height for the editor window. Once CKEditor
     34                editing area reaches the value in pixels specified in the <code>autoGrow_maxHeight</code>
     35                attribute, scrollbars will be added and the editor window will no longer expand.
     36        </p>   
     37        <p>
     38                To add a CKEditor instance using the <strong>autogrow</strong> plugin and its
     39                <code>autoGrow_maxHeight</code> attribute, insert the following JavaScript call to your code:
     40        </p>
     41        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     42        {
     43                <strong>extraPlugins : 'autogrow',</strong>
     44                autoGrow_maxHeight : 800
     45        });</pre>
     46        <p>
     47                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     48                the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor. The maximum height should
     49                be given in pixels.
     50        </p>
     51        </div>
    2252        <!-- This <div> holds alert messages to be display in the sample page. -->
    2353        <div id="alerts">
    2454                <noscript>
     
    3161        </div>
    3262        <form action="sample_posteddata.php" method="post">
    3363                <p>
    34                         In this sample the AutoGrow plugin is available. It makes the editor grow to fit the size of the content.</p>
    35                 <p>
    3664                        <label for="editor1">
    37                                 With default configuration:</label><br />
     65                                CKEditor using the <strong>autogrow</strong> plugin with its default configuration:</label>
    3866                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    3967                        <script type="text/javascript">
    4068                        //<![CDATA[
     
    4876                </p>
    4977                <p>
    5078                        <label for="editor2">
    51                                 With maximum height set to 400:</label><br />
     79                                CKEditor using the <strong>autogrow</strong> plugin with maximum height set to 400:</label>
    5280                        <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    5381                        <script type="text/javascript">
    5482                        //<![CDATA[
     
    6896        <div id="footer">
    6997                <hr />
    7098                <p>
    71                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     99                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    72100                </p>
    73101                <p id="copy">
    74102                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • divreplace.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Replace DIV - CKEditor Sample</title>
     8        <title>Replace DIV &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    7575</head>
    7676<body>
    7777        <h1>
    78                 CKEditor Sample
     78                CKEditor Sample &mdash; Replace DIV with CKEditor on the Fly
    7979        </h1>
     80        <div class="description">
     81        <p>
     82                This sample shows how to automatically replace <code>&lt;div&gt;</code> elements
     83                with a CKEditor instance on the fly, following user's doubleclick. The content
     84                that was previously placed inside the <code>&lt;div&gt;</code> element will now
     85                be moved into CKEditor editing area.
     86        </p>
     87        <p>
     88                For details on how to create this setup check the source code of this sample page.
     89        </p>
     90        </div>
    8091        <!-- This <div> holds alert messages to be display in the sample page. -->
    8192        <div id="alerts">
    8293                <noscript>
     
    8899                </noscript>
    89100        </div>
    90101        <p>
    91                 Double-click on any of the following DIVs to transform them into editor instances.</p>
     102                Double-click on any of the following <code>&lt;div&gt;</code> elements to transform them into
     103                editor instances.</p>
    92104        <div class="editable">
    93105                <h3>
    94106                        Part 1</h3>
     
    130142        <div id="footer">
    131143                <hr />
    132144                <p>
    133                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     145                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    134146                </p>
    135147                <p id="copy">
    136148                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • enterkey.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>ENTER Key Configuration - CKEditor Sample</title>
     8        <title>ENTER Key Configuration &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    4040</head>
    4141<body>
    4242        <h1>
    43                 CKEditor Sample
     43                CKEditor Sample &mdash; ENTER Key Configuration
    4444        </h1>
     45        <div class="description">
     46        <p>
     47                This sample shows how to configure the <em>Enter</em> and <em>Shift+Enter</em> keys
     48                to perform actions specified in the
     49                <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode"><code>enterMode</code></a>
     50                and <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.shiftEnterMode"><code>shiftEnterMode</code></a>
     51                parameters, respectively.
     52                You can choose from the following options:
     53        </p>
     54        <ul>
     55                <li><strong><code>ENTER_P</code></strong> &ndash; new <code>&lt;p&gt;</code> paragraphs are created;</li>
     56                <li><strong><code>ENTER_BR</code></strong> &ndash; lines are broken with <code>&lt;br&gt;</code> elements;</li>
     57                <li><strong><code>ENTER_DIV</code></strong> &ndash; new <code>&lt;div&gt;</code> blocks are created.</li>
     58        </ul>
     59        <p>
     60                The sample code below shows how to configure CKEditor to create a <code>&lt;div&gt;</code> block when <em>Enter</em> key is pressed.
     61        </p>
     62        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     63        {
     64                <strong>enterMode : CKEDITOR.ENTER_DIV</strong>
     65        });</pre>
     66        <p>
     67                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     68                the <code>&lt;textarea&gt;</code> element to be replaced.
     69        </p>
     70        </div>
     71
    4572        <!-- This <div> holds alert messages to be display in the sample page. -->
    4673        <div id="alerts">
    4774                <noscript>
     
    5380                </noscript>
    5481        </div>
    5582        <div style="float: left; margin-right: 20px">
    56                 When ENTER is pressed:<br />
     83                When <em>Enter</em> is pressed:<br />
    5784                <select id="xEnter" onchange="changeEnter();">
    5885                        <option selected="selected" value="1">Create new &lt;P&gt; (recommended)</option>
    5986                        <option value="3">Create new &lt;DIV&gt;</option>
     
    6188                </select>
    6289        </div>
    6390        <div style="float: left">
    64                 When SHIFT + ENTER is pressed:<br />
     91                When <em>Shift+Enter</em> is pressed:<br />
    6592                <select id="xShiftEnter" onchange="changeEnter();">
    6693                        <option value="1">Create new &lt;P&gt;</option>
    6794                        <option value="3">Create new &lt;DIV&gt;</option>
     
    81108        <div id="footer">
    82109                <hr />
    83110                <p>
    84                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     111                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    85112                </p>
    86113                <p id="copy">
    87114                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • fullpage.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Full Page Editing - CKEditor Sample</title>
     8        <title>Full Page Editing &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Full Page Editing
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to configure CKEditor to edit entire HTML pages, from the
     25                <code>&lt;html&gt;</code> tag to the <code>&lt;/html&gt;</code> tag.
     26        </p>
     27        <p>     
     28                CKEditor is inserted with a JavaScript call using the following code:
     29        </p>
     30        <pre>CKEDITOR.replace( 'editor1',
     31        {
     32                <strong>fullPage : true</strong>
     33        });</pre>
     34        </div>
     35       
    2236        <!-- This <div> holds alert messages to be display in the sample page. -->
    2337        <div id="alerts">
    2438                <noscript>
     
    3044                </noscript>
    3145        </div>
    3246        <form action="sample_posteddata.php" method="post">
    33                 <p>
    34                         In this sample the editor is configured to edit entire HTML pages, from the &lt;html&gt;
    35                         tag to &lt;/html&gt;.</p>
    36                 <p>
    3747                        <label for="editor1">
    38                                 Editor 1:</label><br />
     48                                Editor 1:</label>
    3949                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;html&gt;&lt;head&gt;&lt;title&gt;CKEditor Sample&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</textarea>
    4050                        <script type="text/javascript">
    4151                        //<![CDATA[
     
    5565        <div id="footer">
    5666                <hr />
    5767                <p>
    58                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     68                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    5969                </p>
    6070                <p id="copy">
    6171                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • index.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Samples List - CKEditor</title>
     8        <title>CKEditor Samples</title>
     9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    910        <link type="text/css" rel="stylesheet" href="sample.css" />
    1011</head>
    1112<body>
    1213        <h1>
    13                 CKEditor Samples List
     14                CKEditor Samples Site
    1415        </h1>
    1516        <h2>
    1617                Basic Samples
    1718        </h2>
    1819        <ul>
    19                 <li><a href="replacebyclass.html">Replace textareas by class name</a></li>
    20                 <li><a href="replacebycode.html">Replace textareas by code</a></li>
    21                 <li><a href="fullpage.html">Full page support (editing from &lt;html&gt; to &lt;/html&gt;)</a></li>
     20                <li>
     21                        <a href="replacebyclass.html">Replace textarea elements by class name</a><br />
     22                        Automatic replacement of all textarea elements of a given class with a CKEditor instance.
     23                </li>
     24                <li><a href="replacebycode.html">Replace textarea elements by code</a><br />
     25                        Replacement of textarea elements with CKEditor instances by using a JavaScript call.
     26                </li>
     27                <li><a href="fullpage.html">Full page support</a><br />
     28                        CKEditor inserted with a JavaScript call and used to edit the whole page from <code>&lt;html&gt;</code> to <code>&lt;/html&gt;</code>.
     29                </li>
    2230        </ul>
    2331        <h2>
    2432                Basic Customization
    2533        </h2>
    2634        <ul>
    27                 <li><a href="skins.html">Skins</a></li>
    28                 <li><a href="ui_color.html">User Interface Color</a></li>
    29                 <li><a href="ui_languages.html">User Interface Languages</a></li>
     35                <li><a href="skins.html">Skins</a><br />
     36                        Changing the CKEditor skin by adjusting a single configuration option.
     37                </li>
     38                <li><a href="ui_color.html">User Interface color</a><br />
     39                        Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.
     40                </li>
     41                <li><a href="ui_languages.html">User Interface languages</a><br />
     42                        Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.
     43                </li>
     44                <li><a href="autogrow.html">AutoGrow plugin</a><br />
     45                        Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.
     46                </li>
    3047        </ul>
    3148        <h2>
    3249                Advanced Samples
    3350        </h2>
    3451        <ul>
    35                 <li><a href="divreplace.html">Replace DIV elements on the fly</a>&nbsp; </li>
    36                 <li><a href="ajax.html">Create and destroy editor instances for Ajax applications</a></li>
    37                 <li><a href="api.html">Basic usage of the API</a></li>
    38                 <li><a href="api_dialog.html">Using the JavaScript API to customize dialogs</a></li>
    39                 <li><a href="enterkey.html">Using the "Enter" key in CKEditor</a></li>
    40                 <li><a href="sharedspaces.html">Shared toolbars</a></li>
    41                 <li><a href="jqueryadapter.html">jQuery adapter example</a></li>
    42                 <li><a href="output_xhtml.html">Output XHTML</a></li>
    43                 <li><a href="output_html.html">Output HTML</a></li>
    44                 <li><a href="output_for_flash.html">Output for Flash</a></li>
    45                 <li><a href="autogrow.html">AutoGrow plugin</a></li>
    46                 <li><a href="placeholder.html">Placeholder plugin</a></li>
     52                <li><a href="divreplace.html">Replace DIV elements on the fly</a><br />
     53                        Transforming a <code>div</code> element into an instance of CKEditor with a mouse click.       
     54                </li>
     55                <li><a href="ajax.html">Create and destroy editor instances for Ajax applications</a><br />
     56                        Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.
     57                </li>
     58                <li><a href="api.html">Basic usage of the API</a><br />
     59                        Using the CKEditor JavaScript API to interact with the editor at runtime.
     60                </li>
     61                <li><a href="api_dialog.html">Using the JavaScript API to customize dialog windows</a><br />
     62                        Using the dialog windows API to customize dialog windows without changing the original editor code.
     63                </li>
     64                <li><a href="enterkey.html">Using the "Enter" key in CKEditor</a><br />
     65                         Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.
     66                </li>
     67                <li><a href="sharedspaces.html">Shared toolbars</a><br />
     68                        Displaying multiple editor instances that share the toolbar and/or the elements path.
     69                </li>
     70                <li><a href="jqueryadapter.html">jQuery adapter example</a><br />
     71                        Using the jQuery adapter to configure CKEditor.
     72                </li>
     73                <li><a href="output_xhtml.html">Output XHTML</a><br />
     74                        Configuring CKEditor to produce XHTML 1.1 compliant code.
     75                </li>
     76                <li><a href="output_html.html">Output HTML</a><br />
     77                        Configuring CKEditor to produce legacy HTML 4 code.
     78                </li>
     79                <li><a href="output_for_flash.html">Output for Flash</a><br />
     80                        Configuring CKEditor to produce HTML code that can be used with Adobe Flash.
     81                </li>
     82                <li><a href="placeholder.html">Placeholder plugin</a><br />
     83                        Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.
     84                </li>
    4785        </ul>
    4886        <div id="footer">
    4987                <hr />
    5088                <p>
    51                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     89                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    5290                </p>
    5391                <p id="copy">
    5492                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
  • jqueryadapter.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>jQuery adapter - CKEditor Sample</title>
     8        <title>jQuery Adapter &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    1111        <!-- CKReleaser %REMOVE_LINE%
     
    4040</head>
    4141<body>
    4242        <h1>
    43                 CKEditor Sample
     43                CKEditor Sample &mdash; Using jQuery Adapter
    4444        </h1>
     45        <div class="description">
     46        <p>
     47                This sample shows how to load CKEditor and configure it using the
     48                <a href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter">jQuery adapter</a>.
     49                In this case jQuery adapter is responsible for transforming a <code>&lt;textarea&gt;</code>
     50                element into a CKEditor instance and setting the configuration of the toolbar.
     51        </p>
     52        <p>
     53                CKEditor instance with custom configuration set in jQuery can be inserted with the   
     54                following JavaScript code:
     55        </p>
     56        <pre>$(function()
     57{
     58        var config = {
     59                skin:'v2'
     60        };
     61
     62        $('.<em>textarea_class</em>').ckeditor(config);
     63});</pre>
     64        <p>
     65        Note that <code><em>textarea_class</em></code> in the code above is the
     66        <code>class</code> attribute of the <code>&lt;textarea&gt;</code> element to be replaced with
     67        CKEditor. Any other jQuery selector can be used to match the target element.
     68        </p>
     69        </div>
     70               
    4571        <!-- This <div> holds alert messages to be display in the sample page. -->
    4672        <div id="alerts">
    4773                <noscript>
     
    5783        <form action="sample_posteddata.php" method="post">
    5884        <p>
    5985                <label for="editor1">
    60                         Editor 1:</label><br />
     86                        Editor 1:</label>
    6187                <textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    6288        </p>
    6389        <p>
     
    6793        <div id="footer">
    6894                <hr />
    6995                <p>
    70                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     96                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    7197                </p>
    7298                <p id="copy">
    7399                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • output_for_flash.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Output for Flash</title>
     8        <title>Output for Flash &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    3333        </head>
    3434<body onload="init()">
    3535        <h1>
    36                 CKEditor Sample
     36                CKEditor Sample &mdash; Producing Flash Compliant HTML Output
    3737        </h1>
     38        <div class="description">
     39        <p>
     40                This sample shows how to configure CKEditor to output
     41                HTML code that can be used with
     42                <a href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
     43                Adobe Flash</a>.
     44                The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
     45                <code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
     46        </p>
     47        <p>
     48                To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
     49                JavaScript call, and define CKEditor features to use HTML elements and attributes.
     50        </p>
     51        <p>
     52                For details on how to create this setup check the source code of this sample page.
     53        </p>
     54        </div>
     55        <p>
     56                To see how it works, create some content in the editing area of CKEditor on the left
     57                and send it to the Flash object on the right side of the page by using the
     58                <strong>Send to Flash</strong> button.
     59        </p>
     60
    3861        <!-- This <div> holds alert messages to be display in the sample page. -->
    3962        <div id="alerts">
    4063                <noscript>
     
    4568                        </p>
    4669                </noscript>
    4770        </div>
    48 
    49         <div>
    50                 This sample shows CKEditor configured to produce HTML code that can be used with
    51                 <a href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
    52                         Flash</a>.
    53         </div>
    5471        <hr />
    5572        <table width="100%" cellpadding="0" cellspacing="0">
    5673                <tr>
     
    250267        <div id="footer">
    251268                <hr />
    252269                <p>
    253                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     270                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    254271                </p>
    255272                <p id="copy">
    256273                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • output_html.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>HTML compliant output - CKEditor Sample</title>
     8        <title>HTML Compliant Output &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Producing HTML Compliant Output
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to configure CKEditor to output valid
     25                <a href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
     26                Traditional HTML elements like <code>&lt;b&gt;</code>,
     27                <code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
     28                <code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code> and CSS styles.
     29        </p>
     30        <p>
     31                To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
     32                JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
     33        </p>
     34        <p>
     35                A snippet of the configuration code can be seen below; check the source of this page for
     36                full definition:
     37        </p>
     38        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     39        {
     40                coreStyles_bold : { element : 'b' },
     41                coreStyles_italic : { element : 'i' },
     42
     43                fontSize_style :
     44                        {
     45                                element         : 'font',
     46                                attributes      : { 'size' : '#(size)' }
     47                        }
     48                       
     49                // ...
     50        });</pre>
     51        </div>
     52
    2253        <!-- This <div> holds alert messages to be display in the sample page. -->
    2354        <div id="alerts">
    2455                <noscript>
     
    3162        </div>
    3263        <form action="sample_posteddata.php" method="post">
    3364                <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>
    3865                        <label for="editor1">
    39                                 Editor 1:</label><br />
     66                                Editor 1:</label>
    4067                        <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>
    4168                        <script type="text/javascript">
    4269                        //<![CDATA[
     
    252279        <div id="footer">
    253280                <hr />
    254281                <p>
    255                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     282                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    256283                </p>
    257284                <p id="copy">
    258285                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • output_xhtml.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>XHTML compliant output - CKEditor Sample</title>
     8        <title>XHTML Compliant Output &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Producing XHTML Compliant Output
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to configure CKEditor to output valid
     25                <a href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> code.
     26                Deprecated elements (<code>&lt;font&gt;</code>, <code>&lt;u&gt;</code>) or attributes
     27                (<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.
     28        </p>
     29        <p>
     30                To add a CKEditor instance outputting valid XHTML code, load the editor using a standard
     31                JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.
     32        </p>
     33        <p>
     34                A snippet of the configuration code can be seen below; check the source of this page for
     35                full definition:
     36        </p>
     37        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     38        {
     39                contentsCss : 'assets/output_xhtml.css',
     40
     41                coreStyles_bold : { element : 'span', attributes : {'class': 'Bold'} },
     42                coreStyles_italic : { element : 'span', attributes : {'class': 'Italic'}},
     43
     44                // ...
     45        });</pre>
     46        </div>
     47
    2248        <!-- This <div> holds alert messages to be display in the sample page. -->
    2349        <div id="alerts">
    2450                <noscript>
     
    3157        </div>
    3258        <form action="sample_posteddata.php" method="post">
    3359                <p>
    34                         This sample shows CKEditor configured to produce <strong>XHTML 1.1</strong> compliant
    35                         HTML. Deprecated elements or attributes, like the &lt;font&gt; and &lt;u&gt; elements
    36                         or the "style" attribute, are avoided.</p>
    37                 <p>
    3860                        <label for="editor1">
    39                                 Editor 1:</label><br />
     61                                Editor 1:</label>
    4062                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;span class="Bold"&gt;sample text&lt;/span&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    4163                        <script type="text/javascript">
    4264                        //<![CDATA[
     
    152174        <div id="footer">
    153175                <hr />
    154176                <p>
    155                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     177                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    156178                </p>
    157179                <p id="copy">
    158180                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • php/advanced.php

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Sample - CKEditor</title>
     8        <title>Setting Configuration Options &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    1010        <link href="../sample.css" rel="stylesheet" type="text/css"/>
    1111</head>
    1212<body>
    1313        <h1>
    14                 CKEditor Sample
     14                CKEditor Sample &mdash; Setting Configuration Options
    1515        </h1>
     16        <p>
     17                This sample shows how to insert CKEditor instance with custom configuration options.
     18        </p>
     19        <p>
     20                To set <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html">configuration options</a>, use <code>config</code> property. To set attributes of <code>&lt;textarea&gt;</code> element (which is displayed instead of CKEditor in unsupported browsers), use <code>textareaAttributes</code> property.
     21        </p>
     22        <pre>
     23&lt;?php
     24// Include CKEditor class.
     25include_once "ckeditor/ckeditor.php";
     26
     27// Create class instance.
     28$CKEditor = new CKEditor();
     29
     30// Path to CKEditor directory
     31$CKEditor->basePath = '/ckeditor/';
     32
     33// Set global configuration (used by every instance of CKEditor).
     34$CKEditor-><strong>config['width']</strong> = 600;
     35
     36// Change default textarea attributes
     37$CKEditor-><strong>textareaAttributes</strong> = array("cols" => 80, "rows" => 10);
     38
     39// The initial value to be displayed in the editor.
     40$initialValue = 'This is some sample text.';
     41
     42// Create first instance.
     43$CKEditor->editor("textarea_id", $initialValue);
     44?&gt;</pre>
     45        <p>
     46                Note that <code><em>textarea_id</em></code> in the code above is the <code>name</code> attribute of
     47                the <code>&lt;textarea&gt;</code> element to be created.
     48        </p>
     49
    1650        <!-- This <div> holds alert messages to be display in the sample page. -->
    1751        <div id="alerts">
    1852                <noscript>
     
    2357                        </p>
    2458                </noscript>
    2559        </div>
    26         <!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
    27         <fieldset title="Output">
    28                 <legend>Output</legend>
    29                 <form action="../sample_posteddata.php" method="post">
    30                         <p>
    31                                 <label>Editor 1:</label><br/>
    32                         </p>
     60        <form action="../sample_posteddata.php" method="post">
     61                        <label>Editor 1:</label>
    3362<?php
    3463// Include CKEditor class.
    3564include("../../ckeditor.php");
     
    5988
    6089echo $code;
    6190?>
    62                         <p>
    63                                 <label>Editor 2:</label><br/>
    64                         </p>
     91                                <br />
     92                                <label>Editor 2:</label>
    6593<?php
    6694// Configuration that will be used only by the second editor.
    6795$config['toolbar'] = array(
     
    74102// Create second instance.
    75103echo $CKEditor->editor("editor2", $initialValue, $config);
    76104?>
    77                         <p>
    78                                 <input type="submit" value="Submit"/>
    79                         </p>
    80                 </form>
    81         </fieldset>
     105                <p>
     106                        <input type="submit" value="Submit"/>
     107                </p>
     108        </form>
    82109        <div id="footer">
    83110                <hr />
    84111                <p>
    85                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     112                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    86113                </p>
    87114                <p id="copy">
    88115                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • php/events.php

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Sample - CKEditor</title>
     8        <title>Adding Event Handlers &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    1010        <link href="../sample.css" rel="stylesheet" type="text/css"/>
    1111</head>
    1212<body>
    1313        <h1>
    14                 CKEditor Sample
     14                CKEditor Sample &mdash; Adding Event Handlers
    1515        </h1>
     16        <div class="description">
     17        <p>
     18                This sample shows how to add event handlers to CKEditor with PHP.
     19        </p>
     20        <p>
     21                A snippet of the configuration code can be seen below; check the source of this page for
     22                full definition:
     23        </p>
     24        <pre>&lt;?php
     25// Include CKEditor class.
     26include("ckeditor/ckeditor.php");
     27
     28// Create class instance.
     29$CKEditor = new CKEditor();
     30
     31// Path to CKEditor directory
     32$CKEditor->basePath = '/ckeditor/';
     33
     34// The initial value to be displayed in the editor.
     35$initialValue = 'This is some sample text';
     36
     37// Add event handler, <em>instanceReady</em> is fired when editor is loaded.
     38$CKEditor-><strong>addEventHandler</strong>('instanceReady', 'function (evt) {
     39        alert("Loaded editor: " + evt.editor.name);
     40}');
     41
     42// Create editor.
     43$CKEditor->editor("editor1", $initialValue);
     44</pre>
     45        </div>
    1646        <!-- This <div> holds alert messages to be display in the sample page. -->
    1747        <div id="alerts">
    1848                <noscript>
     
    2353                        </p>
    2454                </noscript>
    2555        </div>
    26         <!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
    27         <fieldset title="Output">
    28                 <legend>Output</legend>
    29                 <form action="../sample_posteddata.php" method="post">
    30                         <p>
    31                                 <label>Editor 1:</label><br/>
    32                         </p>
     56        <form action="../sample_posteddata.php" method="post">
     57                <label>Editor 1:</label>
    3358<?php
    3459
    3560/**
     
    90115// the 'instanceReady' listener defined a couple of lines above.
    91116$CKEditor->clearEventHandlers();
    92117?>
    93                         <p>
    94                                 <label>Editor 2:</label><br/>
    95                         </p>
     118                <br />
     119                <label>Editor 2:</label>
    96120<?php
    97121// Configuration that will be used only by the second editor.
    98122$config['width'] = '600';
     
    111135// Create second instance.
    112136$CKEditor->editor("editor2", $initialValue, $config, $events);
    113137?>
    114                         <p>
    115                                 <input type="submit" value="Submit"/>
    116                         </p>
    117                 </form>
    118         </fieldset>
     138                <p>
     139                        <input type="submit" value="Submit"/>
     140                </p>
     141        </form>
    119142        <div id="footer">
    120143                <hr />
    121144                <p>
    122                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     145                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    123146                </p>
    124147                <p id="copy">
    125148                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • php/index.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  <meta content="text/html; charset=utf-8" http-equiv="content-type" />
     9        <title>CKEditor Samples - PHP Integration</title>
     10        <link type="text/css" rel="stylesheet" href="../sample.css" />
     11</head>
     12<body>
     13        <h1>
     14                CKEditor Samples List for PHP
     15        </h1>
     16        <h2>
     17                Basic Samples
     18        </h2>
     19        <ul>
     20                <li><a href="replace.php">Replace existing textareas by code</a><br />
     21                Replacement of selected textarea elements with CKEditor instances by using a JavaScript call.</li>
     22                <li><a href="replaceAll.php">Replace all textareas by code</a><br />
     23                Replacement of all textarea elements with CKEditor instances by using a JavaScript call.</li>
     24                <li><a href="standalone.php">Create instances in PHP</a><br />
     25                Creating a CKEditor instance (no initial textarea element is required).</li>
     26        </ul>
     27        <h2>
     28                Advanced Samples
     29        </h2>
     30        <ul>
     31                <li><a href="advanced.php">Setting configuration options</a><br />
     32                Creating CKEditor instance with custom configuration options.</li>
     33                <li><a href="events.php">Listening to events</a><br />
     34                Creating event handlers.
     35                </li>
     36        </ul>
     37        <div id="footer">
     38                <hr />
     39                <p>
     40                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     41                </p>
     42                <p id="copy">
     43                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
     44                </p>
     45        </div>
     46</body>
     47</html>
  • php/replace.php

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Sample - CKEditor</title>
     8        <title>Replace Textarea Elements &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    1010        <link href="../sample.css" rel="stylesheet" type="text/css"/>
    1111</head>
    1212<body>
    1313        <h1>
    14                 CKEditor Sample
     14                CKEditor Sample &mdash;  Replace Textarea Elements Using PHP Code
    1515        </h1>
     16        <div class="description">
     17        <p>
     18                This sample shows how to replace <code>&lt;textarea&gt;</code> element
     19                with a CKEditor instance by using a PHP code.
     20        </p>
     21        <p>
     22                To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
     23                after the <code>&lt;textarea&gt;</code> element:
     24        </p>
     25        <pre>
     26&lt;?php
     27// Include CKEditor class.
     28include_once "ckeditor/ckeditor.php";
     29
     30// Create class instance.
     31$CKEditor = new CKEditor();
     32
     33// Path to CKEditor directory.
     34$CKEditor->basePath = '/ckeditor/';
     35
     36// Replace textarea with id (or name) "textarea_id".
     37$CKEditor->replace("textarea_id");
     38?&gt;</pre>
     39        <p>
     40                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     41                the <code>&lt;textarea&gt;</code> element to be replaced.
     42        </p>
     43        </div>
    1644        <!-- This <div> holds alert messages to be display in the sample page. -->
    1745        <div id="alerts">
    1846                <noscript>
     
    2351                        </p>
    2452                </noscript>
    2553        </div>
    26         <!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
    27         <fieldset title="Output">
    28                 <legend>Output</legend>
    29                 <form action="../sample_posteddata.php" method="post">
    30                         <p>
    31                                 <label for="editor1">
    32                                         Editor 1:</label><br/>
    33                                 <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    34                         </p>
    35                         <p>
    36                                 <input type="submit" value="Submit"/>
    37                         </p>
    38                 </form>
    39         </fieldset>
     54        <form action="../sample_posteddata.php" method="post">
     55                <p>
     56                        <label for="editor1">
     57                                Editor 1:</label>
     58                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
     59                </p>
     60                <p>
     61                        <input type="submit" value="Submit"/>
     62                </p>
     63        </form>
    4064        <div id="footer">
    4165                <hr />
    4266                <p>
    43                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     67                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    4468                </p>
    4569                <p id="copy">
    4670                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • php/replaceall.php

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Sample - CKEditor</title>
     8        <title>Replace All Textarea Elements &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    1010        <link href="../sample.css" rel="stylesheet" type="text/css"/>
    1111</head>
    1212<body>
    1313        <h1>
    14                 CKEditor Sample
     14                CKEditor Sample &mdash; Replace All Textarea Elements Using PHP Code
    1515        </h1>
     16        <div class="description">
     17        <p>
     18                This sample shows how to replace all <code>&lt;textarea&gt;</code> elements
     19                with CKEditor by using a PHP code.
     20        </p>
     21        <p>
     22                To replace all <code>&lt;textarea&gt;</code> elements, place the following call at any point
     23                after the last <code>&lt;textarea&gt;</code> element:
     24        </p>
     25        <pre>
     26&lt;?php
     27// Include CKEditor class.
     28include("ckeditor/ckeditor.php");
     29
     30// Create class instance.
     31$CKEditor = new CKEditor();
     32
     33// Path to CKEditor directory.
     34$CKEditor->basePath = '/ckeditor/';
     35
     36// Replace all textareas with CKEditor.
     37$CKEditor->replaceAll();
     38?&gt;</pre>
     39        </div>
    1640        <!-- This <div> holds alert messages to be display in the sample page. -->
    1741        <div id="alerts">
    1842                <noscript>
     
    2347                        </p>
    2448                </noscript>
    2549        </div>
    26         <!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
    27         <fieldset title="Output">
    28                 <legend>Output</legend>
    29                 <form action="../sample_posteddata.php" method="post">
    30                         <p>
    31                                 <label for="editor1">
    32                                         Editor 1:</label><br/>
    33                                 <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    34                         </p>
    35                         <p>
    36                                 <label for="editor2">
    37                                         Editor 2:</label><br/>
    38                                 <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    39                         </p>
    40                         <p>
    41                                 <input type="submit" value="Submit"/>
    42                         </p>
    43                 </form>
    44         </fieldset>
     50        <form action="../sample_posteddata.php" method="post">
     51                <p>
     52                        <label for="editor1">
     53                                Editor 1:</label>
     54                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
     55                </p>
     56                <p>
     57                        <label for="editor2">
     58                                Editor 2:</label>
     59                        <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
     60                </p>
     61                <p>
     62                        <input type="submit" value="Submit"/>
     63                </p>
     64        </form>
    4565        <div id="footer">
    4666                <hr />
    4767                <p>
    48                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     68                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    4969                </p>
    5070                <p id="copy">
    5171                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • php/standalone.php

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Sample - CKEditor</title>
     8        <title>Creating CKEditor Instances &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    1010        <link href="../sample.css" rel="stylesheet" type="text/css"/>
    1111</head>
    1212<body>
    1313        <h1>
    14                 CKEditor Sample
     14                CKEditor Sample &mdash; Creating CKEditor Instances
    1515        </h1>
     16        <div class="description">
     17        <p>
     18                This sample shows how to create a CKEditor instance with PHP.
     19        </p>
     20        <pre>
     21&lt;?php
     22include_once "ckeditor/ckeditor.php";
     23
     24// Create class instance.
     25$CKEditor = new CKEditor();
     26
     27// Set path to CKEditor directory
     28$CKEditor->basePath = '/ckeditor/';
     29
     30// Create textarea element and attach CKEditor to it.
     31$CKEditor->editor("textarea_id", "This is some sample text");
     32?&gt;</pre>
     33        <p>
     34                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> and <code>name</code> attribute of
     35                the <code>&lt;textarea&gt;</code> element that will be created.
     36        </p>
     37        </div>
    1638        <!-- This <div> holds alert messages to be display in the sample page. -->
    1739        <div id="alerts">
    1840                <noscript>
     
    2446                </noscript>
    2547        </div>
    2648        <!-- This <fieldset> holds the HTML that you will usually find in your pages. -->
    27         <fieldset title="Output">
    28                 <legend>Output</legend>
    29                 <form action="../sample_posteddata.php" method="post">
    30                         <p>
    31                                 <label for="editor1">
    32                                         Editor 1:</label><br/>
    33                         </p>
    34                         <p>
    35                         <?php
    36                                 // Include CKEditor class.
    37                                 include_once "../../ckeditor.php";
    38                                 // The initial value to be displayed in the editor.
    39                                 $initialValue = '<p>This is some <strong>sample text</strong>.</p>';
    40                                 // Create class instance.
    41                                 $CKEditor = new CKEditor();
    42                                 // Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
    43                                 //   $CKEditor->basePath = '/ckeditor/'
    44                                 // If not set, CKEditor will try to detect the correct path.
    45                                 $CKEditor->basePath = '../../';
    46                                 // Create textarea element and attach CKEditor to it.
    47                                 $CKEditor->editor("editor1", $initialValue);
    48                         ?>
    49                                 <input type="submit" value="Submit"/>
    50                         </p>
    51                 </form>
    52         </fieldset>
     49        <form action="../sample_posteddata.php" method="post">
     50                <p>
     51                        <label for="editor1">
     52                                Editor 1:</label>
     53                </p>
     54                <p>
     55                <?php
     56                        // Include CKEditor class.
     57                        include_once "../../ckeditor.php";
     58                        // The initial value to be displayed in the editor.
     59                        $initialValue = '<p>This is some <strong>sample text</strong>.</p>';
     60                        // Create class instance.
     61                        $CKEditor = new CKEditor();
     62                        // Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
     63                        //   $CKEditor->basePath = '/ckeditor/'
     64                        // If not set, CKEditor will try to detect the correct path.
     65                        $CKEditor->basePath = '../../';
     66                        // Create textarea element and attach CKEditor to it.
     67                        $CKEditor->editor("editor1", $initialValue);
     68                ?>
     69                        <input type="submit" value="Submit"/>
     70                </p>
     71        </form>
    5372        <div id="footer">
    5473                <hr />
    5574                <p>
    56                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     75                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    5776                </p>
    5877                <p id="copy">
    5978                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • placeholder.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Placeholder Plugin - CKEditor Sample</title>
     8        <title>Placeholder Plugin &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Using the Placeholder Plugin
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to configure CKEditor instances to use the
     25                <strong>placeholder</strong> plugin that lets you insert read-only elements
     26                into your content. To enter and modify read-only text, use the
     27                <strong>Create Placeholder</strong> button and the matching dialog window.
     28        </p>
     29        <p>
     30                To add a CKEditor instance that uses the <strong>placeholder</strong> plugin and a related
     31                <strong>Create Placeholder</strong> toolbar button, insert the following JavaScript
     32                call to your code:
     33        </p>
     34        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     35        {
     36                <strong>extraPlugins : 'placeholder',</strong>
     37                toolbar : [ [ 'Source', 'Bold' ], [<strong>'CreatePlaceholder'</strong>] ]
     38        });</pre>
     39        <p>
     40                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     41                the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
     42        </p>
     43        </div>
    2244        <!-- This <div> holds alert messages to be display in the sample page. -->
    2345        <div id="alerts">
    2446                <noscript>
     
    3153        </div>
    3254        <form action="sample_posteddata.php" method="post">
    3355                <p>
    34                         In this sample the Placeholder plugin is available.<br />
    35                         It replaces text in the format of <code>[[text]]</code> to uneditable sections, and lets the user edit them and create new ones using a dialog.</p>
    36                 <p>
    3756                        <label for="editor1">
    38                                 With default configuration:</label><br />
     57                                CKEditor using the <strong>placeholder</strong> plugin with its default configuration:</label>
    3958                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;</textarea>
    4059                        <script type="text/javascript">
    4160                        //<![CDATA[
     
    5574        <div id="footer">
    5675                <hr />
    5776                <p>
    58                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     77                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    5978                </p>
    6079                <p id="copy">
    6180                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • replacebyclass.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Replace Textareas by Class Name - CKEditor Sample</title>
     8        <title>Replace Textareas by Class Name &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Replace Textarea Elements by Class Name
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
     25                of a given class with a CKEditor instance.
     26        </p>
     27        <p>
     28                To replace a <code>&lt;textarea&gt;</code> element, simply assign it the <code>ckeditor</code>
     29                class, as in the code below:
     30        </p>
     31        <pre>&lt;textarea <strong>class="ckeditor</strong>" name="editor1"&gt;&lt;/textarea&gt;</pre>
     32        <p>
     33                Note that other <code>&lt;textarea&gt;</code> attributes (like <code>id</code> or <code>name</code>) need to be adjusted to your document.
     34        </p>
     35        </div>
     36       
    2237        <!-- This <div> holds alert messages to be display in the sample page. -->
    2338        <div id="alerts">
    2439                <noscript>
     
    3247        <form action="sample_posteddata.php" method="post">
    3348                <p>
    3449                        <label for="editor1">
    35                                 Editor 1:</label><br />
     50                                Editor 1:</label>
    3651                        <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    3752                </p>
    3853                <p>
     
    4257        <div id="footer">
    4358                <hr />
    4459                <p>
    45                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     60                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    4661                </p>
    4762                <p id="copy">
    4863                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • replacebycode.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Replace Textarea by Code - CKEditor Sample</title>
     8        <title>Replace Textarea by Code &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Replace Textarea Elements Using JavaScript Code
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
     25                with a CKEditor instance by using a JavaScript call.
     26        </p>
     27        <p>
     28                To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
     29                after the <code>&lt;textarea&gt;</code> element or inside a <code>&lt;script&gt;</code> element located
     30                in the <code>&lt;head&gt;</code> section of the page, in a <code>window.onload</code> event handler:
     31        </p>
     32        <pre>CKEDITOR.replace( '<em>textarea_id</em>' );</pre>
     33        <p>
     34                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     35                the <code>&lt;textarea&gt;</code> element to be replaced.
     36        </p>
     37        </div>
     38       
    2239        <!-- This <div> holds alert messages to be display in the sample page. -->
    2340        <div id="alerts">
    2441                <noscript>
     
    3249        <form action="sample_posteddata.php" method="post">
    3350                <p>
    3451                        <label for="editor1">
    35                                 Editor 1:</label><br />
     52                                Editor 1:</label>
    3653                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    3754                        <script type="text/javascript">
    3855                        //<![CDATA[
     
    5067                </p>
    5168                <p>
    5269                        <label for="editor2">
    53                                 Editor 2:</label><br />
     70                                Editor 2:</label>
    5471                        <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    5572                        <script type="text/javascript">
    5673                        //<![CDATA[
     
    7390        <div id="footer">
    7491                <hr />
    7592                <p>
    76                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     93                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    7794                </p>
    7895                <p id="copy">
    7996                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • sample.css

     
    33For licensing, see LICENSE.html or http://ckeditor.com/license
    44*/
    55
     6html, body, h1, h2, h3, h4, h5, h6, div, span, blockquote, p, address, form, fieldset, img, ul, ol, dl, dt, dd, li, hr, table, td, th, strong, em, sup, sub, dfn, ins, del, q, cite, var, samp, code, kbd, tt, pre {
     7        border: 0 none;
     8        line-height: 1.5em;
     9        margin: 0;
     10        padding: 0;
     11}
     12
     13body {
     14        padding:10px 30px;     
     15}
     16
     17input, textarea, select, option, optgroup, button, td, th {
     18        font-size: 100%;
     19}
     20
     21pre,
     22code,
     23kbd,
     24samp,
     25tt{
     26  font-family: monospace,monospace;
     27  font-size: 1em;
     28}
     29
     30b, strong {
     31        font-weight:bold;
     32}
     33
     34i, cite, em, var, dfn, blockquote {
     35        font-style:italic;
     36}
     37
     38p, ul, ol, blockquote, address, form, table, pre, dl, h1, h2, h3, h4, h5, h6 {
     39        margin-bottom:15px;
     40}
     41
     42ul ul, ul ol, ol ul, ol ol {
     43        margin-bottom:0;
     44}
     45
     46ul {
     47        list-style-type:disc;
     48}
     49
     50ol {
     51        list-style-type:decimal;
     52}
     53
     54li {
     55        margin-left:40px;
     56}
     57
     58a {
     59        text-decoration:none;
     60}
     61
     62a:hover {
     63        text-decoration:underline;
     64}
     65
     66.clear {
     67        clear:both;
     68}
     69
    670fieldset
    771{
    872        margin: 0;
    973        padding: 10px;
    1074}
    1175
     76body, input, textarea {
     77        color: #333333;
     78        font-family: Arial, Helvetica, sans-serif;
     79}
     80
     81body {
     82        font-size: 75%;
     83}
     84
     85a {
     86        color:#189DE1;
     87}
     88
     89h1 {
     90        color:#0782C1;
     91        font-size:200%;
     92        font-weight:normal;
     93}
     94
     95h2 {
     96        color:#000000;
     97        font-size:130%;
     98}
     99
    12100form
    13101{
    14102        margin: 0;
     
    20108        background-color: #F7F7F7;
    21109        border: 1px solid #D7D7D7;
    22110        overflow: auto;
    23         margin: 0;
    24111        padding: 0.25em;
    25112}
    26113
     
    79166        white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    80167        word-wrap: break-word; /* IE */
    81168}
     169
     170.description {
     171        border: 1px dotted #B7B7B7;
     172        margin-bottom: 10px;
     173        padding: 10px 10px 0;
     174}
     175
     176label {
     177        display: block;
     178        margin-bottom:6px;
     179}
     180
  • sharedspaces.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Shared toolbars - CKEditor Sample</title>
     8        <title>Shared Toolbars &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    2929</head>
    3030<body>
    3131        <h1>
    32                 CKEditor Sample
     32                CKEditor Sample &mdash; Shared Toolbars
    3333        </h1>
     34        <div class="description">
     35        <p>
     36                This sample shows how to configure multiple CKEditor instances to share some parts of the interface.
     37                You can choose to share the toolbar (<code>topSpace</code>), the elements path
     38                (<code>bottomSpace</code>), or both.
     39        </p>
     40        <p>
     41                CKEditor instances with shared spaces can be inserted with a JavaScript call using the following code:
     42        </p>
     43        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     44        {
     45                <strong>sharedSpaces :
     46                {
     47                        top : 'topSpace',
     48                        bottom : 'bottomSpace'
     49                }</strong>
     50        });</pre>
     51        <p>
     52                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     53                the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
     54        </p>
     55        </div>
    3456        <!-- This <div> holds alert messages to be display in the sample page. -->
    3557        <div id="alerts">
    3658                <noscript>
     
    4668        <form action="sample_posteddata.php" id="editorsForm" method="post">
    4769                <p>
    4870                        <label for="editor1">
    49                                 Editor 1 (uses the shared toolbar and element path):</label><br />
     71                                Editor 1 (uses the shared toolbar and elements path):</label>
    5072                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    5173                </p>
    5274                <p>
    5375                        <label for="editor2">
    54                                 Editor 2 (uses the shared toolbar and element path):</label><br />
     76                                Editor 2 (uses the shared toolbar and elements path):</label>
    5577                        <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    5678                </p>
    5779                <p>
    5880                        <label for="editor3">
    59                                 Editor 3 (uses the shared toolbar only):</label><br />
     81                                Editor 3 (uses the shared toolbar only):</label>
    6082                        <textarea cols="80" id="editor3" name="editor3" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    6183                </p>
    6284                <p>
    6385                        <label for="editor4">
    64                                 Editor 4 (no shared spaces):</label><br />
     86                                Editor 4 (no shared spaces):</label>
    6587                        <textarea cols="80" id="editor4" name="editor4" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    6688                </p>
    6789                <p>
     
    7395        <div id="footer">
    7496                <hr />
    7597                <p>
    76                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     98                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    7799                </p>
    78100                <p id="copy">
    79101                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • skins.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>Skins - CKEditor Sample</title>
     8        <title>Skins &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; Skins
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
     25                with a CKEditor instance using a specific <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.skin">skin</a>.
     26        </p>
     27        <p>
     28                CKEditor with a specified skin (in this case, the "Office 2003" skin) is inserted with a JavaScript call using the following code: 
     29        </p>
     30        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     31        {
     32                <strong>skin : 'office2003'</strong>
     33        });</pre>
     34        <p>
     35                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     36                the <code>&lt;textarea&gt;</code> element to be replaced.
     37        </p>
     38        </div>
     39       
    2240        <!-- This <div> holds alert messages to be display in the sample page. -->
    2341        <div id="alerts">
    2442                <noscript>
     
    3048                </noscript>
    3149        </div>
    3250        <form action="sample_posteddata.php" method="post">
     51        <h2>&quot;Kama&quot; skin</h2>
     52        <p>The default skin used in CKEditor. No additional configuration is required.</p>
    3353                <p>
    34                         "Kama" skin:<br />
    3554                        <textarea cols="80" id="editor_kama" name="editor_kama" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    3655                        <script type="text/javascript">
    3756                        //<![CDATA[
     
    4463                        //]]>
    4564                        </script>
    4665                </p>
     66        <h2>&quot;Office 2003&quot; skin</h2>
     67<pre>CKEDITOR.replace( '<em>textarea_id</em>',
     68        {
     69                <strong>skin : 'office2003'</strong>
     70        });</pre>
    4771                <p>
    48                         "Office 2003" skin:<br />
    4972                        <textarea cols="80" id="editor_office2003" name="editor_office2003" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    5073                        <script type="text/javascript">
    5174                        //<![CDATA[
     
    5881                        //]]>
    5982                        </script>
    6083                </p>
    61                 <p>
    62                         "V2" skin:<br />
     84                <h2>&quot;V2&quot; skin</h2>
     85<pre>CKEDITOR.replace( '<em>textarea_id</em>',
     86        {
     87                <strong>skin : 'v2'</strong>
     88        });</pre>
    6389                        <textarea cols="80" id="editor_v2" name="editor_v2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    6490                        <script type="text/javascript">
    6591                        //<![CDATA[
     
    76102        <div id="footer">
    77103                <hr />
    78104                <p>
    79                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     105                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    80106                </p>
    81107                <p id="copy">
    82108                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • ui_color.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>UI Color Setting Tool - CKEditor Sample</title>
     8        <title>UI Color Picker &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1717</head>
    1818<body>
    1919        <h1>
    20                 CKEditor Sample
     20                CKEditor Sample &mdash; UI Color Picker
    2121        </h1>
     22        <div class="description">
     23        <p>
     24                This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
     25                with a CKEditor instance with an option to change the color of its user interface.
     26        </p>
     27        <h2>Setting the user interface color</h2>
     28        <p>
     29        To specify the color of the user interface set the <code>uiColor</code> property: 
     30        </p>
     31        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     32        {
     33                <strong>uiColor: '#EE0000'</strong>
     34        });</pre>
     35        <p>
     36                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     37                the <code>&lt;textarea&gt;</code> element to be replaced.
     38        </p>
     39        <h2>Enabling the color picker</h2>
     40        <p>
     41                If a dedicated <strong>uicolor</strong> plugin and <strong>UIColor</strong> button is added to CKEditor toolbar,
     42                the user will also be able to pick the color of the UI from the color palette available
     43                in the <strong>UI Color Picker</strong> dialog window. 
     44        </p>
     45        <p>
     46                To insert a CKEditor instance with <strong>uicolor</strong> plugin,
     47                use the following JavaScript call:
     48        </p>
     49        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     50        {
     51                <strong>extraPlugins : 'uicolor',</strong>
     52                toolbar : [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]
     53        });</pre>
     54        </div>
    2255        <!-- This <div> holds alert messages to be display in the sample page. -->
    2356        <div id="alerts">
    2457                <noscript>
     
    3063                </noscript>
    3164        </div>
    3265        <p>
    33                 Click the UI Color Picker button to test your color preferences at runtime.</p>
     66                Click the <strong>UI Color Picker</strong> button to test your color preferences at runtime.
     67        </p>
     68        <p>
     69                This editor instance includes the <strong>UI Color Picker</strong> toolbar button, but the
     70                default UI color is not defined, so the editor uses the skin color.
     71        </p>
    3472        <form action="sample_posteddata.php" method="post">
    3573        <p>
    3674                <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
     
    5391                </script>
    5492        </p>
    5593        <p>
     94                This editor instance includes the <strong>UI Color Picker</strong> toolbar button, and the
     95                default UI color was defined, so the skin color is not used.
     96        </p>
     97        <p>
    5698                <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
    5799                <script type="text/javascript">
    58100                //<![CDATA[
     
    80122        <div id="footer">
    81123                <hr />
    82124                <p>
    83                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     125                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    84126                </p>
    85127                <p id="copy">
    86128                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
  • ui_languages.html

     
    55-->
    66<html xmlns="http://www.w3.org/1999/xhtml">
    77<head>
    8         <title>User Interface Globalization - CKEditor Sample</title>
     8        <title>User Interface Globalization &mdash; CKEditor Sample</title>
    99        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    1010        <!-- CKReleaser %REMOVE_LINE%
    1111        <script type="text/javascript" src="../ckeditor.js"></script>
     
    1919</head>
    2020<body>
    2121        <h1>
    22                 CKEditor Sample
     22                CKEditor Sample &mdash; User Interface Languages
    2323        </h1>
     24        <div class="description">
     25        <p>
     26                This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
     27                with a CKEditor instance with an option to change the language of its user interface.
     28        </p>
     29        <p>
     30                It pulls the language list from CKEditor <code>_languages.js</code> file that contains the list of supported languages and creates
     31                a drop-down list that lets the user change the UI language.
     32        </p>
     33        <p>
     34By default, CKEditor automatically localizes the editor to the language of the user. The User Interface language can be controlled with two configuration options: <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.language"><code>language</code></a>
     35and <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.defaultLanguage"><code>defaultLanguage</code></a>.
     36        </p>
     37        <p>
     38        To specify the user interface language, set the <code>language</code> property: 
     39        </p>
     40        <pre>CKEDITOR.replace( '<em>textarea_id</em>',
     41        {
     42                // Load the German interface.
     43                <strong>language: 'de'</strong>
     44        });</pre>
     45        <p>
     46                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
     47                the <code>&lt;textarea&gt;</code> element to be replaced.
     48        </p>
     49        </div>
    2450        <!-- This <div> holds alert messages to be display in the sample page. -->
    2551        <div id="alerts">
    2652                <noscript>
     
    97123        <div id="footer">
    98124                <hr />
    99125                <p>
    100                         CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     126                        CKEditor - The text editor for the Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
    101127                </p>
    102128                <p id="copy">
    103129                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy