提交 35c6d5bb 编写于 作者: NoSubject's avatar NoSubject

Merge branch 'fix/documenteditor_edit' into 'wrdp'

公文编辑器可配置编辑器属性

See merge request o2oa/o2oa!4722
<?xml version="1.0" encoding="UTF-8"?>
<svg width="443px" height="129px" viewBox="0 0 443 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="products-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group">
<path d="M192.234,50.622 C191.867998,48.9546583 191.268171,47.4601733 190.4345,46.1385 C189.600829,44.8168267 188.584173,43.7086711 187.3845,42.814 C186.184827,41.9193289 184.863174,41.238169 183.4195,40.7705 C181.975826,40.302831 180.461008,40.069 178.875,40.069 C175.987652,40.069 173.50701,40.6179945 171.433,41.716 C169.35899,42.8140055 167.661173,44.2678243 166.3395,46.0775 C165.017827,47.8871757 164.041836,49.9306553 163.4115,52.208 C162.781164,54.4853447 162.466,56.8236547 162.466,59.223 C162.466,61.5816785 162.781164,63.9098218 163.4115,66.2075 C164.041836,68.5051782 165.017827,70.5588243 166.3395,72.3685 C167.661173,74.1781757 169.35899,75.6319945 171.433,76.73 C173.50701,77.8280055 175.987652,78.377 178.875,78.377 C180.908344,78.377 182.738325,78.0110037 184.365,77.279 C185.991675,76.5469963 187.394661,75.550673 188.574,74.29 C189.753339,73.029327 190.708996,71.5551751 191.441,69.8675 C192.173004,68.1798249 192.640666,66.3600098 192.844,64.408 L196.992,64.408 C196.707332,67.0920134 196.077005,69.5116559 195.101,71.667 C194.124995,73.8223441 192.864341,75.6523258 191.319,77.157 C189.773659,78.6616742 187.953844,79.8206626 185.8595,80.634 C183.765156,81.4473374 181.437013,81.854 178.875,81.854 C175.458983,81.854 172.459846,81.2338395 169.8775,79.9935 C167.295154,78.7531605 165.150009,77.0960104 163.442,75.022 C161.733991,72.9479896 160.453004,70.5486803 159.599,67.824 C158.744996,65.0993197 158.318,62.2323484 158.318,59.223 C158.318,56.2136516 158.744996,53.3466803 159.599,50.622 C160.453004,47.8973197 161.733991,45.4878438 163.442,43.3935 C165.150009,41.2991562 167.295154,39.6318395 169.8775,38.3915 C172.459846,37.1511605 175.458983,36.531 178.875,36.531 C180.94901,36.531 182.972157,36.8359969 184.9445,37.446 C186.916843,38.0560031 188.706159,38.9608273 190.3125,40.1605 C191.918841,41.3601727 193.260828,42.8343246 194.3385,44.583 C195.416172,46.3316754 196.097332,48.3446553 196.382,50.622 L192.234,50.622 Z M203.516,37.446 L207.664,37.446 L207.664,60.87 L232.979,37.446 L238.591,37.446 L219.132,55.441 L239.506,81 L234.138,81 L216.021,58.308 L207.664,66.055 L207.664,81 L203.516,81 L203.516,37.446 Z M243.224,37.446 L273.297,37.446 L273.297,40.984 L247.372,40.984 L247.372,56.722 L271.65,56.722 L271.65,60.26 L247.372,60.26 L247.372,77.462 L273.602,77.462 L273.602,81 L243.224,81 L243.224,37.446 Z M306.539,81 L303.001,81 L303.001,75.022 L302.879,75.022 C302.472331,76.0386717 301.872504,76.9739957 301.0795,77.828 C300.286496,78.6820043 299.381672,79.4038304 298.365,79.9935 C297.348328,80.5831696 296.260506,81.040665 295.1015,81.366 C293.942494,81.691335 292.793672,81.854 291.655,81.854 C289.255655,81.854 287.171509,81.4168377 285.4025,80.5425 C283.633491,79.6681623 282.159339,78.4685076 280.98,76.9435 C279.800661,75.4184924 278.926336,73.6495101 278.357,71.6365 C277.787664,69.6234899 277.503,67.4986779 277.503,65.262 C277.503,63.0253221 277.787664,60.9005101 278.357,58.8875 C278.926336,56.8744899 279.800661,55.1055076 280.98,53.5805 C282.159339,52.0554924 283.633491,50.8456711 285.4025,49.951 C287.171509,49.0563289 289.255655,48.609 291.655,48.609 C292.834339,48.609 293.983161,48.7513319 295.1015,49.036 C296.219839,49.3206681 297.266995,49.7578304 298.243,50.3475 C299.219005,50.9371696 300.083163,51.6589957 300.8355,52.513 C301.587837,53.3670043 302.167331,54.3633276 302.574,55.502 L302.696,55.502 L302.696,37.446 L306.539,37.446 L306.539,81 Z M281.346,65.262 C281.346,66.8886748 281.539165,68.5051586 281.9255,70.1115 C282.311835,71.7178414 282.921829,73.151327 283.7555,74.412 C284.589171,75.672673 285.65666,76.699496 286.958,77.4925 C288.25934,78.285504 289.824991,78.682 291.655,78.682 C293.688344,78.682 295.406493,78.285504 296.8095,77.4925 C298.212507,76.699496 299.351162,75.672673 300.2255,74.412 C301.099838,73.151327 301.730165,71.7178414 302.1165,70.1115 C302.502835,68.5051586 302.696,66.8886748 302.696,65.262 C302.696,63.6353252 302.502835,62.0188414 302.1165,60.4125 C301.730165,58.8061586 301.099838,57.372673 300.2255,56.112 C299.351162,54.851327 298.212507,53.824504 296.8095,53.0315 C295.406493,52.238496 293.688344,51.842 291.655,51.842 C289.824991,51.842 288.25934,52.238496 286.958,53.0315 C285.65666,53.824504 284.589171,54.851327 283.7555,56.112 C282.921829,57.372673 282.311835,58.8061586 281.9255,60.4125 C281.539165,62.0188414 281.346,63.6353252 281.346,65.262 Z M314.1,37.446 L317.943,37.446 L317.943,43.607 L314.1,43.607 L314.1,37.446 Z M314.1,49.524 L317.943,49.524 L317.943,81 L314.1,81 L314.1,49.524 Z M331.604,49.524 L338.009,49.524 L338.009,52.757 L331.604,52.757 L331.604,73.985 C331.604,75.245673 331.776832,76.2318298 332.1225,76.9435 C332.468168,77.6551702 333.332326,78.0516663 334.715,78.133 C335.813006,78.133 336.910995,78.0720006 338.009,77.95 L338.009,81.183 C337.439664,81.183 336.870336,81.2033331 336.301,81.244 C335.731664,81.2846669 335.162336,81.305 334.593,81.305 C332.030987,81.305 330.241672,80.8068383 329.225,79.8105 C328.208328,78.8141617 327.720333,76.9740134 327.761,74.29 L327.761,52.757 L322.271,52.757 L322.271,49.524 L327.761,49.524 L327.761,40.069 L331.604,40.069 L331.604,49.524 Z M357.038,51.842 C355.207991,51.842 353.601674,52.2283295 352.219,53.001 C350.836326,53.7736705 349.687505,54.790327 348.7725,56.051 C347.857495,57.311673 347.166169,58.7451586 346.6985,60.3515 C346.230831,61.9578414 345.997,63.5946583 345.997,65.262 C345.997,66.9293417 346.230831,68.5661586 346.6985,70.1725 C347.166169,71.7788414 347.857495,73.212327 348.7725,74.473 C349.687505,75.733673 350.836326,76.7503295 352.219,77.523 C353.601674,78.2956705 355.207991,78.682 357.038,78.682 C358.868009,78.682 360.474326,78.2956705 361.857,77.523 C363.239674,76.7503295 364.388495,75.733673 365.3035,74.473 C366.218505,73.212327 366.909831,71.7788414 367.3775,70.1725 C367.845169,68.5661586 368.079,66.9293417 368.079,65.262 C368.079,63.5946583 367.845169,61.9578414 367.3775,60.3515 C366.909831,58.7451586 366.218505,57.311673 365.3035,56.051 C364.388495,54.790327 363.239674,53.7736705 361.857,53.001 C360.474326,52.2283295 358.868009,51.842 357.038,51.842 Z M357.038,48.609 C359.437345,48.609 361.562157,49.0563289 363.4125,49.951 C365.262843,50.8456711 366.818327,52.0453258 368.079,53.55 C369.339673,55.0546742 370.29533,56.8134899 370.946,58.8265 C371.59667,60.8395101 371.922,62.9846553 371.922,65.262 C371.922,67.5393447 371.59667,69.6844899 370.946,71.6975 C370.29533,73.7105101 369.339673,75.4693258 368.079,76.974 C366.818327,78.4786742 365.262843,79.6681623 363.4125,80.5425 C361.562157,81.4168377 359.437345,81.854 357.038,81.854 C354.638655,81.854 352.513843,81.4168377 350.6635,80.5425 C348.813157,79.6681623 347.257673,78.4786742 345.997,76.974 C344.736327,75.4693258 343.78067,73.7105101 343.13,71.6975 C342.47933,69.6844899 342.154,67.5393447 342.154,65.262 C342.154,62.9846553 342.47933,60.8395101 343.13,58.8265 C343.78067,56.8134899 344.736327,55.0546742 345.997,53.55 C347.257673,52.0453258 348.813157,50.8456711 350.6635,49.951 C352.513843,49.0563289 354.638655,48.609 357.038,48.609 Z M377.836,49.524 L381.374,49.524 L381.374,56.905 L381.496,56.905 C382.472005,54.3429872 383.986823,52.3706736 386.0405,50.988 C388.094177,49.6053264 390.544319,48.9749994 393.391,49.097 L393.391,52.94 C391.642325,52.8586663 390.056341,53.0924973 388.633,53.6415 C387.20966,54.1905027 385.979505,54.9733283 384.9425,55.99 C383.905495,57.0066718 383.102336,58.216493 382.533,59.6195 C381.963664,61.022507 381.679,62.5576583 381.679,64.225 L381.679,81 L377.836,81 L377.836,49.524 Z M432.242,67.153 L432.242,43.912 L432.12,43.912 L416.016,67.153 L432.242,67.153 Z M412.539,66.665 L432.303,38.3 L435.78,38.3 L435.78,67.153 L442.185,67.153 L442.185,70.386 L435.78,70.386 L435.78,81 L432.242,81 L432.242,70.386 L412.539,70.386 L412.539,66.665 Z" id="ckeditor-4-txt" fill="#32373C"></path>
<path d="M91.3990305,18.4275908 C89.708134,21.8370406 88.7575758,25.6787251 88.7575758,29.7424242 C88.7575758,43.8256854 100.174315,55.2424242 114.257576,55.2424242 C114.439555,55.2424242 114.62109,55.240518 114.80216,55.2367244 L114.80216,90.9505846 C114.80216,95.2377717 112.514973,99.199296 108.80216,101.342889 L63.6969697,127.384383 C59.9841568,129.527977 55.4097826,129.527977 51.6969697,127.384383 L6.59177944,101.342889 C2.87896651,99.199296 0.591779435,95.2377717 0.591779435,90.9505846 L0.591779435,38.8675972 C0.591779435,34.5804101 2.87896651,30.6188859 6.59177944,28.4752923 L51.6969697,2.43379858 C55.4097826,0.290205045 59.9841568,0.290205045 63.6969697,2.43379858 L91.3990305,18.4275908 Z M32.8787879,42.2424242 C31.2219336,42.2424242 29.8787879,43.58557 29.8787879,45.2424242 L29.8787879,46.6741182 C29.8787879,48.3309725 31.2219336,49.6741182 32.8787879,49.6741182 L83.5454545,49.6741182 C85.2023088,49.6741182 86.5454545,48.3309725 86.5454545,46.6741182 L86.5454545,45.2424242 C86.5454545,43.58557 85.2023088,42.2424242 83.5454545,42.2424242 L32.8787879,42.2424242 Z M32.8787879,60.7203179 C31.2219336,60.7203179 29.8787879,62.0634637 29.8787879,63.7203179 L29.8787879,65.1520119 C29.8787879,66.8088662 31.2219336,68.1520119 32.8787879,68.1520119 L69.6110283,68.1520119 C71.2678826,68.1520119 72.6110283,66.8088662 72.6110283,65.1520119 L72.6110283,63.7203179 C72.6110283,62.0634637 71.2678826,60.7203179 69.6110283,60.7203179 L32.8787879,60.7203179 Z M32.8787879,79.1982116 C31.2219336,79.1982116 29.8787879,80.5413574 29.8787879,82.1982116 L29.8787879,83.6299056 C29.8787879,85.2867599 31.2219336,86.6299056 32.8787879,86.6299056 L83.5454545,86.6299056 C85.2023088,86.6299056 86.5454545,85.2867599 86.5454545,83.6299056 L86.5454545,82.1982116 C86.5454545,80.5413574 85.2023088,79.1982116 83.5454545,79.1982116 L32.8787879,79.1982116 Z M114.757576,50.2424242 C103.159596,50.2424242 93.7575758,40.840404 93.7575758,29.2424242 C93.7575758,17.6444445 103.159596,8.24242424 114.757576,8.24242424 C126.355556,8.24242424 135.757576,17.6444445 135.757576,29.2424242 C135.757576,40.840404 126.355556,50.2424242 114.757576,50.2424242 Z M118.332146,34.5716487 L120.545455,34.5716487 L120.545455,31.2467386 L118.309328,31.2467386 L118.309328,20.6363636 L113.722988,20.6363636 L107.151515,31.1244992 L107.151515,34.5716487 L114.749781,34.5716487 L114.749781,37.9454545 L118.332146,37.9454545 L118.332146,34.5716487 Z M114.772598,24.841397 L114.772598,31.2467386 L110.870786,31.2467386 L114.704145,24.841397 L114.772598,24.841397 Z" id="ckeditor-4" fill="#0287D0"></path>
</g>
</g>
</svg>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="../ckeditor.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/samples.css">
<link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body id="main">
<nav class="navigation-a">
<div class="grid-container">
<ul class="navigation-a-left grid-width-70">
<li><a href="https://ckeditor.com/ckeditor-4/">Project Homepage</a></li>
<li><a href="https://github.com/ckeditor/ckeditor-dev/issues">I found a bug</a></li>
<li><a href="https://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
</ul>
<ul class="navigation-a-right grid-width-30">
<li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
</ul>
</div>
</nav>
<header class="header-a">
<div class="grid-container">
<h1 class="header-a-logo grid-width-30">
<a href="index.html"><img src="img/logo.svg" onerror="this.src='img/logo.png'; this.onerror=null;" alt="CKEditor Sample"></a>
</h1>
<nav class="navigation-b grid-width-70">
<ul>
<li><a href="index.html" class="button-a button-a-background">Start</a></li>
<li><a href="toolbarconfigurator/index.html" class="button-a">Toolbar configurator <span class="balloon-a balloon-a-nw">Edit your toolbar now!</span></a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="adjoined-top">
<div class="grid-container">
<div class="content grid-width-100">
<h1>Congratulations!</h1>
<p>
If you can see CKEditor below, it means that the installation succeeded.
You can now try out your new editor version, see its features, and when you are ready to move on, check some of the <a href="#sample-customize">most useful resources</a> recommended below.
</p>
</div>
</div>
</div>
<div class="adjoined-bottom">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Hello world!</h1>
<p>I'm an instance of <a href="https://ckeditor.com">CKEditor</a>.</p>
</div>
</div>
</div>
</div>
<div class="grid-container">
<div class="content grid-width-100">
<section id="sample-customize">
<h2>Customize Your Editor</h2>
<p>Modular build and <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html">numerous configuration options</a> give you nearly endless possibilities to customize CKEditor. Replace the content of your <code><a href="../config.js">config.js</a></code> file with the following code and refresh this page (<strong>remember to clear the browser cache</strong>.html)!</p>
<pre class="cm-s-neo CodeMirror"><code><span style="padding-right: 0.1px;"><span class="cm-variable">CKEDITOR</span>.<span class="cm-property">editorConfig</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>( <span class="cm-def">config</span> ) {</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">language</span> <span class="cm-operator">=</span> <span class="cm-string">'es'</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">uiColor</span> <span class="cm-operator">=</span> <span class="cm-string">'#F7B42C'</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">height</span> <span class="cm-operator">=</span> <span class="cm-number">300</span>;</span>
<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">toolbarCanCollapse</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span>
<span style="padding-right: 0.1px;">};</span></code></pre>
</section>
<section>
<h2>Toolbar Configuration</h2>
<p>If you want to reorder toolbar buttons or remove some of them, check <a href="toolbarconfigurator/index.html">this handy tool</a>!</p>
</section>
<section>
<h2>More Samples!</h2>
<p>Visit the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">CKEditor Examples</a> for a huge collection of samples showcasing editor features, with source code readily available to copy and use in your own implementation.</p>
</section>
<section>
<h2>Developer's Guide</h2>
<p>The most important resource for all developers working with CKEditor, integrating it with their websites and applications, and customizing to their needs. You can start from here:</p>
<ul>
<li><a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html">Getting Started</a> &ndash; Explains most crucial editor concepts and practices as well as the installation process and integration with your website.</li>
<li><a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_installation.html">Advanced Installation Concepts</a> &ndash; Describes how to upgrade, install additional components (plugins, skins.html), or create a custom build.</li>
</ul>
<p>When you have the basics sorted out, feel free to browse some more advanced sections like:</p>
<ul>
<li><a href="https://ckeditor.com/docs/ckeditor4/latest/features/index.html">Features Overview</a> &ndash; Descriptions and samples of various editor features.</li>
<li><a href="https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_intro.html">Plugin SDK</a>, <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_intro.html">Widget SDK</a>, and <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/skin_sdk_intro.html">Skin SDK</a> &ndash; Useful when you want to create your own editor components.</li>
</ul>
</section>
<section>
<h2>CKEditor JavaScript API</h2>
<p>CKEditor boasts a rich <a href="https://ckeditor.com/docs/ckeditor4/latest/api/index.html">JavaScript API</a> that you can use to adjust the editor to your needs and integrate it with your website or application.</p>
</section>
</div>
</div>
</main>
<footer class="footer-a grid-container">
<div class="grid-container">
<p class="grid-width-100">
CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p class="grid-width-100" id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> &ndash; Frederico Knabben. All rights reserved.
</p>
</div>
</footer>
<script>
initSample();
</script>
</body>
</html>
/**
* Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* exported initSample */
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
CKEDITOR.tools.enableHtml5Elements( document );
// The trick to keep the editor in the sample quite small
// unless user specified own height.
CKEDITOR.config.height = 150;
CKEDITOR.config.width = 'auto';
var initSample = ( function() {
var wysiwygareaAvailable = isWysiwygareaAvailable(),
isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );
return function() {
var editorElement = CKEDITOR.document.getById( 'editor' );
// :(((
if ( isBBCodeBuiltIn ) {
editorElement.setHtml(
'Hello world!\n\n' +
'I\'m an instance of [url=https://ckeditor.com]CKEditor[/url].'
);
}
// Depending on the wysiwygarea plugin availability initialize classic or inline editor.
if ( wysiwygareaAvailable ) {
CKEDITOR.replace( 'editor' );
} else {
editorElement.setAttribute( 'contenteditable', 'true' );
CKEDITOR.inline( 'editor' );
// TODO we can consider displaying some info box that
// without wysiwygarea the classic editor may not work.
}
};
function isWysiwygareaAvailable() {
// If in development mode, then the wysiwygarea must be available.
// Split REV into two strings so builder does not replace it :D.
if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
return true;
}
return !!CKEDITOR.plugins.get( 'wysiwygarea' );
}
} )();
/*
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
var SF=function(){function d(a){return(a=a.attributes?a.attributes.getNamedItem("class"):null)?a.value.split(" "):[]}function c(a){var e=document.createAttribute("class");e.value=a.join(" ");return e}var b={attachListener:function(a,e,b){if(a.addEventListener)a.addEventListener(e,b,!1);else if(a.attachEvent)a.attachEvent("on"+e,function(){b.apply(a,arguments)});else throw Error("Could not attach event.");}};b.indexOf=function(){var a=Array.prototype.indexOf;return"function"===a?function(e,b){return a.call(e,
b)}:function(a,b){for(var c=a.length,d=0;d<c;d++)if(a[d]===b)return d;return-1}}();b.accept=function(a,e){var c;a.children?(c=a.children,e(a)):"number"===typeof a.length&&(c=a);for(var d=c?c.length||0:0;d--;)b.accept(c[d],e)};b.getByClass=function(){var a=document.getElementsByClassName;return"function"===typeof a?function(e,b){"string"===typeof e&&(b=e,e=document);return a.call(e,b)}:function(a,c){"string"===typeof a&&(c=a,a=document.getElementsByTagName("html")[0]);var d=[];b.accept(a,function(a){b.classList.contains(a,
c)&&d.push(a)});return d}}();b.classList={};b.classList.add=function(a,b){var f=d(a);f.push(b);a.attributes.setNamedItem(c(f))};b.classList.remove=function(a,e){var f=d(a,e),n=b.indexOf(f,e);-1!==n&&(f.splice(n,1),a.attributes.setNamedItem(c(f)))};b.classList.contains=function(a,c){return-1!==b.indexOf(d(a),c)};b.classList.toggle=function(a,b){this.contains(a,b)?this.remove(a,b):this.add(a,b)};return b}();"use strict";
(function(){function d(c){for(var b in c)delete c[b]}SF.modal=function(c){function b(a){27==a.keyCode&&f.close()}c.modalClass="modal content";c.closeClass="modal-close";c.modalStyles=d;c.closeStyles=d;var a=c.afterCreate,e=c.afterClose;c.afterCreate=function(c){a&&a(c);window.addEventListener("keydown",b)};c.afterClose=function(a){e&&e(a);window.removeEventListener("keydown",b)};var f=(new picoModal(c)).afterCreate(c.afterCreate).afterClose(c.afterClose);return f}})();"use strict";
(function(){for(var d=SF.getByClass("toggler"),c=d.length;c--;)SF.attachListener(d[c],"click",function(){var b=SF.classList.contains(this,"icon-toggler-expanded")||SF.classList.contains(this,"icon-toggler-collapsed"),a=document.getElementById(this.getAttribute("data-for"));SF.classList.toggle(this,"collapsed");SF.classList.contains(this,"collapsed")?(SF.classList.add(a,"collapsed"),b&&(SF.classList.remove(this,"icon-toggler-expanded"),SF.classList.add(this,"icon-toggler-collapsed"))):(SF.classList.remove(a,
"collapsed"),b&&(SF.classList.remove(this,"icon-toggler-collapsed"),SF.classList.add(this,"icon-toggler-expanded")))})})();"use strict";(function(){for(var d=SF.getByClass("tree-a"),c=d.length;c--;)SF.attachListener(d[c],"click",function(b){b=b.target||b.srcElement;"H2"!==b.nodeName||SF.classList.contains(b,"tree-a-no-sub")||SF.classList.toggle(b,"tree-a-active")})})();
(function(d,c){function b(a){return"object"===typeof Node?a instanceof Node:a&&"object"===typeof a&&"number"===typeof a.nodeType}function a(){var a=[];return{watch:a.push.bind(a),trigger:function(b){for(var c=!0,d={preventDefault:function(){c=!1}},e=0;e<a.length;e++)a[e](b,d);return c}}}function e(a){this.elem=a}function f(a,b){return e.div().clazz("pico-overlay").clazz(a("overlayClass","")).stylize({display:"block",position:"fixed",top:"0px",left:"0px",height:"100%",width:"100%",zIndex:1E4}).stylize(a("overlayStyles",
{opacity:.5,background:"#000"})).onClick(function(){a("overlayClose",!0)&&b()})}function n(a,b){var c=a("width","auto");"number"===typeof c&&(c=""+c+"px");return e.div().clazz("pico-content").clazz(a("modalClass","")).stylize({display:"block",position:"fixed",zIndex:10001,left:"50%",top:"50px",width:c,"-ms-transform":"translateX(-50%)","-moz-transform":"translateX(-50%)","-webkit-transform":"translateX(-50%)","-o-transform":"translateX(-50%)",transform:"translateX(-50%)"}).stylize(a("modalStyles",
{backgroundColor:"white",padding:"20px",borderRadius:"5px"})).html(a("content")).attr("role","dialog").onClick(function(a){(new e(a.target)).anyAncestor(function(a){return/\bpico-close\b/.test(a.elem.className)})&&b()})}function p(a){return function(){return a().elem}}function k(c){function e(a,b){var d=c[a];"function"===typeof d&&(d=d(b));return void 0===d?b:d}function k(){l().hide();m().hide();v.trigger(h)}function q(){w.trigger(h)&&k()}function g(a){return function(){a.apply(this,arguments);return h}}
function r(a){if(!t){var c=n(e,q),b=f(e,q),d;d=e("closeButton",!0)?c.child().html(e("closeHtml","\x26#xD7;")).clazz("pico-close").clazz(e("closeClass")).stylize(e("closeStyles",{borderRadius:"2px",cursor:"pointer",height:"15px",width:"15px",position:"absolute",top:"5px",right:"5px",fontSize:"16px",textAlign:"center",lineHeight:"15px",background:"#CCC"})):void 0;t={modal:c,overlay:b,close:d};x.trigger(h)}return t[a]}if("string"===typeof c||b(c))c={content:c};var x=a(),y=a(),z=a(),w=a(),v=a(),t,m=r.bind(d,
"modal"),l=r.bind(d,"overlay"),u=r.bind(d,"close"),h={modalElem:p(m),closeElem:p(u),overlayElem:p(l),show:function(){y.trigger(h)&&(l().show(),u(),m().show(),z.trigger(h));return this},close:g(q),forceClose:g(k),destroy:function(){m=m().destroy();l=l().destroy();u=void 0},options:function(a){c=a},afterCreate:g(x.watch),beforeShow:g(y.watch),afterShow:g(z.watch),beforeClose:g(w.watch),afterClose:g(v.watch)};return h}e.div=function(a){var b=c.createElement("div");(a||c.body).appendChild(b);return new e(b)};
e.prototype={child:function(){return e.div(this.elem)},stylize:function(a){a=a||{};"undefined"!==typeof a.opacity&&(a.filter="alpha(opacity\x3d"+100*a.opacity+")");for(var b in a)a.hasOwnProperty(b)&&(this.elem.style[b]=a[b]);return this},clazz:function(a){this.elem.className+=" "+a;return this},html:function(a){b(a)?this.elem.appendChild(a):this.elem.innerHTML=a;return this},onClick:function(a){this.elem.addEventListener("click",a);return this},destroy:function(){c.body.removeChild(this.elem)},hide:function(){this.elem.style.display=
"none"},show:function(){this.elem.style.display="block"},attr:function(a,b){this.elem.setAttribute(a,b);return this},anyAncestor:function(a){for(var b=this.elem;b;){if(a(new e(b)))return!0;b=b.parentNode}return!1}};"function"===typeof d.define&&d.define.amd?d.define(function(){return k}):d.picoModal=k})(window,document);
\ No newline at end of file
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Ajax &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
<script>
var editor, html = '';
function createEditor() {
if ( editor )
return;
// Create a new editor inside the <div id="editor">, setting its value to html
var config = {};
editor = CKEDITOR.appendTo( 'editor', config, html );
}
function removeEditor() {
if ( !editor )
return;
// Retrieve the editor contents. In an Ajax application, this data would be
// sent to the server or used in any other way.
document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
document.getElementById( 'contents' ).style.display = '';
// Destroy the editor.
editor.destroy();
editor = null;
}
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Create and Destroy Editor Instances for Ajax Applications
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/saveajax.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
area will be displayed in a <code>&lt;div&gt;</code> element.
</p>
<p>
For details of how to create this setup check the source code of this sample page
for JavaScript code responsible for the creation and destruction of a CKEditor instance.
</p>
</div>
<p>Click the buttons to create and remove a CKEditor instance.</p>
<p>
<input onclick="createEditor();" type="button" value="Create Editor">
<input onclick="removeEditor();" type="button" value="Remove Editor">
</p>
<!-- This div will hold the editor. -->
<div id="editor">
</div>
<div id="contents" style="display: none">
<p>
Edited Contents:
</p>
<!-- This div will be used to display the editor contents. -->
<div id="editorcontents">
</div>
</div>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>API Usage &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
<script>
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
// Show the editor name and description in the browser status bar.
document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
// Show this sample buttons.
document.getElementById( 'eButtons' ).style.display = 'block';
});
function InsertHTML() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml
editor.insertHtml( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function InsertText() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'txtArea' ).value;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert as plain text.
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertText
editor.insertText( value );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function SetContents() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var value = document.getElementById( 'htmlArea' ).value;
// Set editor contents (replace current contents).
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-setData
editor.setData( value );
}
function GetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor1;
// Get editor contents
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-getData
alert( editor.getData() );
}
function ExecuteCommand( commandName ) {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Execute the command.
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-execCommand
editor.execCommand( commandName );
}
else
alert( 'You must be in WYSIWYG mode!' );
}
function CheckDirty() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Checks whether the current editor contents present changes when compared
// to the contents loaded into the editor at startup
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-checkDirty
alert( editor.checkDirty() );
}
function ResetDirty() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
// Resets the "dirty state" of the editor (see CheckDirty())
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-resetDirty
editor.resetDirty();
alert( 'The "IsDirty" status has been reset' );
}
function Focus() {
CKEDITOR.instances.editor1.focus();
}
function onFocus() {
document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
}
function onBlur() {
document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
}
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/api.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html">CKEditor JavaScript API</a>
to interact with the editor at runtime.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<!-- This <div> holds alert messages to be display in the sample page. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
</p>
</noscript>
</div>
<form action="../../../samples/sample_posteddata.php" method="post">
<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="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', {
on: {
focus: onFocus,
blur: onBlur,
// Check for availability of corresponding plugins.
pluginsLoaded: function( evt ) {
var doc = CKEDITOR.document, ed = evt.editor;
if ( !ed.getCommand( 'bold' ) )
doc.getById( 'exec-bold' ).hide();
if ( !ed.getCommand( 'link' ) )
doc.getById( 'exec-link' ).hide();
}
}
});
</script>
<p id="eMessage">
</p>
<div id="eButtons" style="display: none">
<input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">
<input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">
<input onclick="Focus();" type="button" value="Focus">
<br><br>
<input onclick="InsertHTML();" type="button" value="Insert HTML">
<input onclick="SetContents();" type="button" value="Set Editor Contents">
<input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">
<br>
<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 code.&lt;/p&gt;</textarea>
<br>
<br>
<input onclick="InsertText();" type="button" value="Insert Text">
<br>
<textarea cols="100" id="txtArea" rows="3"> First line with some leading whitespaces.
Second line of text preceded by two line breaks.</textarea>
<br>
<br>
<input onclick="CheckDirty();" type="button" value="checkDirty()">
<input onclick="ResetDirty();" type="button" value="resetDirty()">
</div>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Append To Page Element Using JavaScript Code &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Append To Page Element Using JavaScript Code
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<div id="section1">
<div class="description">
<p>
The <code><a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-appendTo">CKEDITOR.appendTo()</a></code> method serves to to place editors inside existing DOM elements. Unlike <code><a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-replace">CKEDITOR.replace()</a></code>,
a target container to be replaced is no longer necessary. A new editor
instance is inserted directly wherever it is desired.
</p>
<pre class="samples">CKEDITOR.appendTo( '<em>container_id</em>',
{ /* Configuration options to be used. */ }
'Editor content to be used.'
);</pre>
</div>
<script>
// This call can be placed at any point after the
// DOM element to append CKEditor to or inside the <head><script>
// in a window.onload event handler.
// Append a CKEditor instance using the default configuration and the
// provided content to the <div> element of ID "section1".
CKEDITOR.appendTo( 'section1',
null,
'<p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>'
);
</script>
</div>
<br>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
/*
* Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*
* Styles used by the XHTML 1.1 sample page (xhtml.html).
*/
/**
* Basic definitions for the editing area.
*/
body
{
font-family: Arial, Verdana, sans-serif;
font-size: 80%;
color: #000000;
background-color: #ffffff;
padding: 5px;
margin: 0px;
}
/**
* Core styles.
*/
.Bold
{
font-weight: bold;
}
.Italic
{
font-style: italic;
}
.Underline
{
text-decoration: underline;
}
.StrikeThrough
{
text-decoration: line-through;
}
.Subscript
{
vertical-align: sub;
font-size: smaller;
}
.Superscript
{
vertical-align: super;
font-size: smaller;
}
/**
* Font faces.
*/
.FontComic
{
font-family: 'Comic Sans MS';
}
.FontCourier
{
font-family: 'Courier New';
}
.FontTimes
{
font-family: 'Times New Roman';
}
/**
* Font sizes.
*/
.FontSmaller
{
font-size: smaller;
}
.FontLarger
{
font-size: larger;
}
.FontSmall
{
font-size: 8pt;
}
.FontBig
{
font-size: 14pt;
}
.FontDouble
{
font-size: 200%;
}
/**
* Font colors.
*/
.FontColor1
{
color: #ff9900;
}
.FontColor2
{
color: #0066cc;
}
.FontColor3
{
color: #ff0000;
}
.FontColor1BG
{
background-color: #ff9900;
}
.FontColor2BG
{
background-color: #0066cc;
}
.FontColor3BG
{
background-color: #ff0000;
}
/**
* Indentation.
*/
.Indent1
{
margin-left: 40px;
}
.Indent2
{
margin-left: 80px;
}
.Indent3
{
margin-left: 120px;
}
/**
* Alignment.
*/
.JustifyLeft
{
text-align: left;
}
.JustifyRight
{
text-align: right;
}
.JustifyCenter
{
text-align: center;
}
.JustifyFull
{
text-align: justify;
}
/**
* Other.
*/
code
{
font-family: courier, monospace;
background-color: #eeeeee;
padding-left: 1px;
padding-right: 1px;
border: #c0c0c0 1px solid;
}
kbd
{
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
}
blockquote
{
color: #808080;
}
<!DOCTYPE html>
<?php
/*
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
?>
<html>
<head>
<meta charset="utf-8">
<title>Sample &mdash; CKEditor</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1 class="samples">
CKEditor &mdash; Posted Data
</h1>
<table border="1" cellspacing="0" id="outputSample">
<colgroup><col width="120"></colgroup>
<thead>
<tr>
<th>Field&nbsp;Name</th>
<th>Value</th>
</tr>
</thead>
<?php
if (!empty($_POST))
{
foreach ( $_POST as $key => $value )
{
if ( ( !is_string($value) && !is_numeric($value) ) || !is_string($key) )
continue;
if ( get_magic_quotes_gpc() )
$value = htmlspecialchars( stripslashes((string)$value) );
else
$value = htmlspecialchars( (string)$value );
?>
<tr>
<th style="vertical-align: top"><?php echo htmlspecialchars( (string)$key ); ?></th>
<td><pre class="samples"><?php echo $value; ?></pre></td>
</tr>
<?php
}
}
?>
</table>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
/*
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
var CKEDITOR_LANGS=function(){var c={af:"Afrikaans",ar:"Arabic",az:"Azerbaijani",bg:"Bulgarian",bn:"Bengali/Bangla",bs:"Bosnian",ca:"Catalan",cs:"Czech",cy:"Welsh",da:"Danish",de:"German","de-ch":"German (Switzerland)",el:"Greek",en:"English","en-au":"English (Australia)","en-ca":"English (Canadian)","en-gb":"English (United Kingdom)",eo:"Esperanto",es:"Spanish","es-mx":"Spanish (Mexico)",et:"Estonian",eu:"Basque",fa:"Persian",fi:"Finnish",fo:"Faroese",fr:"French","fr-ca":"French (Canada)",gl:"Galician",
gu:"Gujarati",he:"Hebrew",hi:"Hindi",hr:"Croatian",hu:"Hungarian",id:"Indonesian",is:"Icelandic",it:"Italian",ja:"Japanese",ka:"Georgian",km:"Khmer",ko:"Korean",ku:"Kurdish",lt:"Lithuanian",lv:"Latvian",mk:"Macedonian",mn:"Mongolian",ms:"Malay",nb:"Norwegian Bokmal",nl:"Dutch",no:"Norwegian",oc:"Occitan",pl:"Polish",pt:"Portuguese (Portugal)","pt-br":"Portuguese (Brazil)",ro:"Romanian",ru:"Russian",si:"Sinhala",sk:"Slovak",sq:"Albanian",sl:"Slovenian",sr:"Serbian (Cyrillic)","sr-latn":"Serbian (Latin)",
sv:"Swedish",th:"Thai",tr:"Turkish",tt:"Tatar",ug:"Uighur",uk:"Ukrainian",vi:"Vietnamese",zh:"Chinese Traditional","zh-cn":"Chinese Simplified"},b=[],a;for(a in CKEDITOR.lang.languages)b.push({code:a,name:c[a]||a});b.sort(function(a,b){return a.name<b.name?-1:1});return b}();
\ No newline at end of file
/**
* Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.dialog.add( 'myDialog', function() {
return {
title: 'My Dialog',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab1',
label: 'First Tab',
title: 'First Tab',
elements: [
{
id: 'input1',
type: 'text',
label: 'Text Field'
},
{
id: 'select1',
type: 'select',
label: 'Select Field',
items: [
[ 'option1', 'value1' ],
[ 'option2', 'value2' ]
]
}
]
},
{
id: 'tab2',
label: 'Second Tab',
title: 'Second Tab',
elements: [
{
id: 'button1',
type: 'button',
label: 'Button Field'
}
]
}
]
};
} );
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link rel="stylesheet" href="../../../samples/old/sample.css">
<meta name="ckeditor-sample-name" content="Using the JavaScript API to customize dialog windows">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Using the dialog windows API to customize dialog windows without changing the original editor code.">
<style>
.cke_button__mybutton_icon
{
display: none !important;
}
.cke_button__mybutton_label
{
display: inline !important;
}
</style>
<script>
CKEDITOR.on( 'instanceCreated', function( ev ){
var editor = ev.editor;
// Listen for the "pluginsLoaded" event, so we are sure that the
// "dialog" plugin has been loaded and we are able to do our
// customizations.
editor.on( 'pluginsLoaded', function() {
// If our custom dialog has not been registered, do that now.
if ( !CKEDITOR.dialog.exists( 'myDialog' ) ) {
// We need to do the following trick to find out the dialog
// definition file URL path. In the real world, you would simply
// point to an absolute path directly, like "/mydir/mydialog.js".
var href = document.location.href.split( '/' );
href.pop();
href.push( 'assets/my_dialog.js' );
href = href.join( '/' );
// Finally, register the dialog.
CKEDITOR.dialog.add( 'myDialog', href );
}
// Register the command used to open the dialog.
editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
// Add the a custom toolbar buttons, which fires the above
// command..
editor.ui.add( 'MyButton', CKEDITOR.UI_BUTTON, {
label: 'My Dialog',
command: 'myDialogCmd'
});
});
});
// When opening a dialog, its "definition" is created for it, for
// each editor instance. The "dialogDefinition" event is then
// fired. We should use this event to make customizations to the
// definition of existing dialogs.
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if ( dialogName == 'myDialog' && ev.editor.name == 'editor2' ) {
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'tab1' );
// Add a new text field to the "tab1" tab page.
infoTab.add( {
type: 'text',
label: 'My Custom Field',
id: 'customField',
'default': 'Sample!',
validate: function() {
if ( ( /\d/ ).test( this.getValue() ) )
return 'My Custom Field must not contain digits';
}
});
// Remove the "select1" field from the "tab1" tab.
infoTab.remove( 'select1' );
// Set the default value for "input1" field.
var input1 = infoTab.get( 'input1' );
input1[ 'default' ] = 'www.example.com';
// Remove the "tab2" tab page.
dialogDefinition.removeContents( 'tab2' );
// Add a new tab to the "Link" dialog.
dialogDefinition.addContents( {
id: 'customTab',
label: 'My Tab',
accessKey: 'M',
elements: [
{
id: 'myField1',
type: 'text',
label: 'My Text Field'
},
{
id: 'myField2',
type: 'text',
label: 'Another Text Field'
}
]
});
// Provide the focus handler to start initial focus in "customField" field.
dialogDefinition.onFocus = function() {
var urlField = this.getContentElement( 'tab1', 'customField' );
urlField.select();
};
}
});
var config = {
extraPlugins: 'dialog',
toolbar: [ [ 'MyButton' ] ]
};
</script>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Using CKEditor Dialog API
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to use the
<a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dialog.html">CKEditor Dialog API</a>
to customize CKEditor dialog windows without changing the original editor code.
The following customizations are being done in the example below:
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>A custom dialog is added to the editors using the <code>pluginsLoaded</code> event, from an external <a target="_blank" href="assets/my_dialog.js">dialog definition file</a>:</p>
<ol>
<li><strong>Creating a custom dialog window</strong> &ndash; "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>
<li><strong>Creating a custom button</strong> &ndash; Add button to open the dialog with "My Dialog" toolbar button.</li>
</ol>
<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="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor1', config );
</script>
<p>The below editor modify the dialog definition of the above added dialog using the <code>dialogDefinition</code> event:</p>
<ol>
<li><strong>Adding dialog tab</strong> &ndash; Add new tab "My Tab" to dialog window.</li>
<li><strong>Removing a dialog window tab</strong> &ndash; Remove "Second Tab" page from the dialog window.</li>
<li><strong>Adding dialog window fields</strong> &ndash; Add "My Custom Field" to the dialog window.</li>
<li><strong>Removing dialog window field</strong> &ndash; Remove "Select Field" selection field from the dialog window.</li>
<li><strong>Setting default values for dialog window fields</strong> &ndash; Set default value of "Text Field" text field. </li>
<li><strong>Setup initial focus for dialog window</strong> &ndash; Put initial focus on "My Custom Field" text field. </li>
</ol>
<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="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script>
// Replace the <textarea id="editor1"> with an CKEditor instance.
CKEDITOR.replace( 'editor2', config );
</script>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Replace DIV &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
<style>
div.editable
{
border: solid 2px transparent;
padding-left: 15px;
padding-right: 15px;
}
div.editable:hover
{
border-color: black;
}
</style>
<script>
// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;
window.onload = function() {
// Listen to the double click event.
if ( window.addEventListener )
document.body.addEventListener( 'dblclick', onDoubleClick, false );
else if ( window.attachEvent )
document.body.attachEvent( 'ondblclick', onDoubleClick );
};
function onDoubleClick( ev ) {
// Get the element which fired the event. This is not necessarily the
// element to which the event has been attached.
var element = ev.target || ev.srcElement;
// Find out the div that holds this element.
var name;
do {
element = element.parentNode;
}
while ( element && ( name = element.nodeName.toLowerCase() ) &&
( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' );
if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
replaceDiv( element );
}
var editor;
function replaceDiv( div ) {
if ( editor )
editor.destroy();
editor = CKEDITOR.replace( div );
}
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Replace DIV with CKEditor on the Fly
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to automatically replace <code>&lt;div&gt;</code> elements
with a CKEditor instance on the fly, following user's doubleclick. The content
that was previously placed inside the <code>&lt;div&gt;</code> element will now
be moved into CKEditor editing area.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>
Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
editor instances.
</p>
<div class="editable">
<h3>
Part 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
</div>
<div class="editable">
<h3>
Part 2
</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
<p>
Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
</p>
</div>
<div class="editable">
<h3>
Part 3
</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</p>
</div>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>ENTER Key Configuration &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link href="../../../samples/old/sample.css" rel="stylesheet">
<meta name="ckeditor-sample-name" content="Using the &quot;Enter&quot; key in CKEditor">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Configuring the behavior of &lt;em&gt;Enter&lt;/em&gt; and &lt;em&gt;Shift+Enter&lt;/em&gt; keys.">
<script>
var editor;
function changeEnter() {
// If we already have an editor, let's destroy it first.
if ( editor )
editor.destroy( true );
// Create the editor again, with the appropriate settings.
editor = CKEDITOR.replace( 'editor1', {
extraPlugins: 'enterkey',
enterMode: Number( document.getElementById( 'xEnter' ).value ),
shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )
});
}
window.onload = changeEnter;
</script>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; ENTER Key Configuration
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/enterkey.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to configure the <em>Enter</em> and <em>Shift+Enter</em> keys
to perform actions specified in the
<a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-enterMode"><code>enterMode</code></a>
and <a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-shiftEnterMode"><code>shiftEnterMode</code></a>
parameters, respectively.
You can choose from the following options:
</p>
<ul class="samples">
<li><strong><code>ENTER_P</code></strong> &ndash; new <code>&lt;p&gt;</code> paragraphs are created;</li>
<li><strong><code>ENTER_BR</code></strong> &ndash; lines are broken with <code>&lt;br&gt;</code> elements;</li>
<li><strong><code>ENTER_DIV</code></strong> &ndash; new <code>&lt;div&gt;</code> blocks are created.</li>
</ul>
<p>
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.
</p>
<pre class="samples">
CKEDITOR.replace( '<em>textarea_id</em>', {
<strong>enterMode: CKEDITOR.ENTER_DIV</strong>
});</pre>
<p>
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
the <code>&lt;textarea&gt;</code> element to be replaced.
</p>
</div>
<div style="float: left; margin-right: 20px">
When <em>Enter</em> is pressed:<br>
<select id="xEnter" onchange="changeEnter();">
<option selected="selected" value="1">Create a new &lt;P&gt; (recommended)</option>
<option value="3">Create a new &lt;DIV&gt;</option>
<option value="2">Break the line with a &lt;BR&gt;</option>
</select>
</div>
<div style="float: left">
When <em>Shift+Enter</em> is pressed:<br>
<select id="xShiftEnter" onchange="changeEnter();">
<option value="1">Create a new &lt;P&gt;</option>
<option value="3">Create a new &lt;DIV&gt;</option>
<option selected="selected" value="2">Break the line with a &lt;BR&gt; (recommended)</option>
</select>
</div>
<br style="clear: both">
<form action="../../../samples/sample_posteddata.php" method="post">
<p>
<br>
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.</textarea>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
var swfobject=function(){function w(){if(!u){try{var a=d.getElementsByTagName("body")[0].appendChild(d.createElement("span"));a.parentNode.removeChild(a)}catch(b){return}u=!0;for(var a=z.length,c=0;c<a;c++)z[c]()}}function M(a){u?a():z[z.length]=a}function N(a){if("undefined"!=typeof n.addEventListener)n.addEventListener("load",a,!1);else if("undefined"!=typeof d.addEventListener)d.addEventListener("load",a,!1);else if("undefined"!=typeof n.attachEvent)U(n,"onload",a);else if("function"==typeof n.onload){var b=
n.onload;n.onload=function(){b();a()}}else n.onload=a}function V(){var a=d.getElementsByTagName("body")[0],b=d.createElement("object");b.setAttribute("type","application/x-shockwave-flash");var c=a.appendChild(b);if(c){var f=0;(function(){if("undefined"!=typeof c.GetVariable){var g=c.GetVariable("$version");g&&(g=g.split(" ")[1].split(","),e.pv=[parseInt(g[0],10),parseInt(g[1],10),parseInt(g[2],10)])}else if(10>f){f++;setTimeout(arguments.callee,10);return}a.removeChild(b);c=null;E()})()}else E()}
function E(){var a=r.length;if(0<a)for(var b=0;b<a;b++){var c=r[b].id,f=r[b].callbackFn,g={success:!1,id:c};if(0<e.pv[0]){var d=p(c);if(d)if(!A(r[b].swfVersion)||e.wk&&312>e.wk)if(r[b].expressInstall&&F()){g={};g.data=r[b].expressInstall;g.width=d.getAttribute("width")||"0";g.height=d.getAttribute("height")||"0";d.getAttribute("class")&&(g.styleclass=d.getAttribute("class"));d.getAttribute("align")&&(g.align=d.getAttribute("align"));for(var h={},d=d.getElementsByTagName("param"),k=d.length,l=0;l<
k;l++)"movie"!=d[l].getAttribute("name").toLowerCase()&&(h[d[l].getAttribute("name")]=d[l].getAttribute("value"));G(g,h,c,f)}else W(d),f&&f(g);else v(c,!0),f&&(g.success=!0,g.ref=H(c),f(g))}else v(c,!0),f&&((c=H(c))&&"undefined"!=typeof c.SetVariable&&(g.success=!0,g.ref=c),f(g))}}function H(a){var b=null;(a=p(a))&&"OBJECT"==a.nodeName&&("undefined"!=typeof a.SetVariable?b=a:(a=a.getElementsByTagName("object")[0])&&(b=a));return b}function F(){return!B&&A("6.0.65")&&(e.win||e.mac)&&!(e.wk&&312>e.wk)}
function G(a,b,c,f){B=!0;I=f||null;O={success:!1,id:c};var g=p(c);if(g){"OBJECT"==g.nodeName?(y=J(g),C=null):(y=g,C=c);a.id="SWFObjectExprInst";if("undefined"==typeof a.width||!/%$/.test(a.width)&&310>parseInt(a.width,10))a.width="310";if("undefined"==typeof a.height||!/%$/.test(a.height)&&137>parseInt(a.height,10))a.height="137";d.title=d.title.slice(0,47)+" - Flash Player Installation";f=e.ie&&e.win?"ActiveX":"PlugIn";f="MMredirectURL\x3d"+n.location.toString().replace(/&/g,"%26")+"\x26MMplayerType\x3d"+
f+"\x26MMdoctitle\x3d"+d.title;b.flashvars="undefined"!=typeof b.flashvars?b.flashvars+("\x26"+f):f;e.ie&&e.win&&4!=g.readyState&&(f=d.createElement("div"),c+="SWFObjectNew",f.setAttribute("id",c),g.parentNode.insertBefore(f,g),g.style.display="none",function(){4==g.readyState?g.parentNode.removeChild(g):setTimeout(arguments.callee,10)}());K(a,b,c)}}function W(a){if(e.ie&&e.win&&4!=a.readyState){var b=d.createElement("div");a.parentNode.insertBefore(b,a);b.parentNode.replaceChild(J(a),b);a.style.display=
"none";(function(){4==a.readyState?a.parentNode.removeChild(a):setTimeout(arguments.callee,10)})()}else a.parentNode.replaceChild(J(a),a)}function J(a){var b=d.createElement("div");if(e.win&&e.ie)b.innerHTML=a.innerHTML;else if(a=a.getElementsByTagName("object")[0])if(a=a.childNodes)for(var c=a.length,f=0;f<c;f++)1==a[f].nodeType&&"PARAM"==a[f].nodeName||8==a[f].nodeType||b.appendChild(a[f].cloneNode(!0));return b}function K(a,b,c){var f,g=p(c);if(e.wk&&312>e.wk)return f;if(g)if("undefined"==typeof a.id&&
(a.id=c),e.ie&&e.win){var q="",h;for(h in a)a[h]!=Object.prototype[h]&&("data"==h.toLowerCase()?b.movie=a[h]:"styleclass"==h.toLowerCase()?q+=' class\x3d"'+a[h]+'"':"classid"!=h.toLowerCase()&&(q+=" "+h+'\x3d"'+a[h]+'"'));h="";for(var k in b)b[k]!=Object.prototype[k]&&(h+='\x3cparam name\x3d"'+k+'" value\x3d"'+b[k]+'" /\x3e');g.outerHTML='\x3cobject classid\x3d"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+q+"\x3e"+h+"\x3c/object\x3e";D[D.length]=a.id;f=p(a.id)}else{k=d.createElement("object");k.setAttribute("type",
"application/x-shockwave-flash");for(var l in a)a[l]!=Object.prototype[l]&&("styleclass"==l.toLowerCase()?k.setAttribute("class",a[l]):"classid"!=l.toLowerCase()&&k.setAttribute(l,a[l]));for(q in b)b[q]!=Object.prototype[q]&&"movie"!=q.toLowerCase()&&(a=k,h=q,l=b[q],c=d.createElement("param"),c.setAttribute("name",h),c.setAttribute("value",l),a.appendChild(c));g.parentNode.replaceChild(k,g);f=k}return f}function P(a){var b=p(a);b&&"OBJECT"==b.nodeName&&(e.ie&&e.win?(b.style.display="none",function(){if(4==
b.readyState){var c=p(a);if(c){for(var f in c)"function"==typeof c[f]&&(c[f]=null);c.parentNode.removeChild(c)}}else setTimeout(arguments.callee,10)}()):b.parentNode.removeChild(b))}function p(a){var b=null;try{b=d.getElementById(a)}catch(c){}return b}function U(a,b,c){a.attachEvent(b,c);x[x.length]=[a,b,c]}function A(a){var b=e.pv;a=a.split(".");a[0]=parseInt(a[0],10);a[1]=parseInt(a[1],10)||0;a[2]=parseInt(a[2],10)||0;return b[0]>a[0]||b[0]==a[0]&&b[1]>a[1]||b[0]==a[0]&&b[1]==a[1]&&b[2]>=a[2]?!0:
!1}function Q(a,b,c,f){if(!e.ie||!e.mac){var g=d.getElementsByTagName("head")[0];g&&(c=c&&"string"==typeof c?c:"screen",f&&(L=m=null),m&&L==c||(f=d.createElement("style"),f.setAttribute("type","text/css"),f.setAttribute("media",c),m=g.appendChild(f),e.ie&&e.win&&"undefined"!=typeof d.styleSheets&&0<d.styleSheets.length&&(m=d.styleSheets[d.styleSheets.length-1]),L=c),e.ie&&e.win?m&&"object"==typeof m.addRule&&m.addRule(a,b):m&&"undefined"!=typeof d.createTextNode&&m.appendChild(d.createTextNode(a+
" {"+b+"}")))}}function v(a,b){if(R){var c=b?"visible":"hidden";u&&p(a)?p(a).style.visibility=c:Q("#"+a,"visibility:"+c)}}function S(a){return null!=/[\\\"<>\.;]/.exec(a)&&"undefined"!=typeof encodeURIComponent?encodeURIComponent(a):a}var n=window,d=document,t=navigator,T=!1,z=[function(){T?V():E()}],r=[],D=[],x=[],y,C,I,O,u=!1,B=!1,m,L,R=!0,e=function(){var a="undefined"!=typeof d.getElementById&&"undefined"!=typeof d.getElementsByTagName&&"undefined"!=typeof d.createElement,b=t.userAgent.toLowerCase(),
c=t.platform.toLowerCase(),f=c?/win/.test(c):/win/.test(b),c=c?/mac/.test(c):/mac/.test(b),b=/webkit/.test(b)?parseFloat(b.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):!1,g=!+"\v1",e=[0,0,0],h=null;if("undefined"!=typeof t.plugins&&"object"==typeof t.plugins["Shockwave Flash"])!(h=t.plugins["Shockwave Flash"].description)||"undefined"!=typeof t.mimeTypes&&t.mimeTypes["application/x-shockwave-flash"]&&!t.mimeTypes["application/x-shockwave-flash"].enabledPlugin||(T=!0,g=!1,h=h.replace(/^.*\s+(\S+\s+\S+$)/,
"$1"),e[0]=parseInt(h.replace(/^(.*)\..*$/,"$1"),10),e[1]=parseInt(h.replace(/^.*\.(.*)\s.*$/,"$1"),10),e[2]=/[a-zA-Z]/.test(h)?parseInt(h.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0);else if("undefined"!=typeof n.ActiveXObject)try{var k=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");k&&(h=k.GetVariable("$version"))&&(g=!0,h=h.split(" ")[1].split(","),e=[parseInt(h[0],10),parseInt(h[1],10),parseInt(h[2],10)])}catch(l){}return{w3:a,pv:e,wk:b,ie:g,win:f,mac:c}}();(function(){e.w3&&(("undefined"!=typeof d.readyState&&
"complete"==d.readyState||"undefined"==typeof d.readyState&&(d.getElementsByTagName("body")[0]||d.body))&&w(),u||("undefined"!=typeof d.addEventListener&&d.addEventListener("DOMContentLoaded",w,!1),e.ie&&e.win&&(d.attachEvent("onreadystatechange",function(){"complete"==d.readyState&&(d.detachEvent("onreadystatechange",arguments.callee),w())}),n==top&&function(){if(!u){try{d.documentElement.doScroll("left")}catch(a){setTimeout(arguments.callee,0);return}w()}}()),e.wk&&function(){u||(/loaded|complete/.test(d.readyState)?
w():setTimeout(arguments.callee,0))}(),N(w)))})();(function(){e.ie&&e.win&&window.attachEvent("onunload",function(){for(var a=x.length,b=0;b<a;b++)x[b][0].detachEvent(x[b][1],x[b][2]);a=D.length;for(b=0;b<a;b++)P(D[b]);for(var c in e)e[c]=null;e=null;for(var f in swfobject)swfobject[f]=null;swfobject=null})})();return{registerObject:function(a,b,c,f){if(e.w3&&a&&b){var d={};d.id=a;d.swfVersion=b;d.expressInstall=c;d.callbackFn=f;r[r.length]=d;v(a,!1)}else f&&f({success:!1,id:a})},getObjectById:function(a){if(e.w3)return H(a)},
embedSWF:function(a,b,c,d,g,q,h,k,l,n){var p={success:!1,id:b};e.w3&&!(e.wk&&312>e.wk)&&a&&b&&c&&d&&g?(v(b,!1),M(function(){c+="";d+="";var e={};if(l&&"object"===typeof l)for(var m in l)e[m]=l[m];e.data=a;e.width=c;e.height=d;m={};if(k&&"object"===typeof k)for(var r in k)m[r]=k[r];if(h&&"object"===typeof h)for(var t in h)m.flashvars="undefined"!=typeof m.flashvars?m.flashvars+("\x26"+t+"\x3d"+h[t]):t+"\x3d"+h[t];if(A(g))r=K(e,m,b),e.id==b&&v(b,!0),p.success=!0,p.ref=r;else{if(q&&F()){e.data=q;G(e,
m,b,n);return}v(b,!0)}n&&n(p)})):n&&n(p)},switchOffAutoHideShow:function(){R=!1},ua:e,getFlashPlayerVersion:function(){return{major:e.pv[0],minor:e.pv[1],release:e.pv[2]}},hasFlashPlayerVersion:A,createSWF:function(a,b,c){if(e.w3)return K(a,b,c)},showExpressInstall:function(a,b,c,d){e.w3&&F()&&G(a,b,c,d)},removeSWF:function(a){e.w3&&P(a)},createCSS:function(a,b,c,d){e.w3&&Q(a,b,c,d)},addDomLoadEvent:M,addLoadEvent:N,getQueryParamValue:function(a){var b=d.location.search||d.location.hash;if(b){/\?/.test(b)&&
(b=b.split("?")[1]);if(null==a)return S(b);for(var b=b.split("\x26"),c=0;c<b.length;c++)if(b[c].substring(0,b[c].indexOf("\x3d"))==a)return S(b[c].substring(b[c].indexOf("\x3d")+1))}return""},expressInstallCallback:function(){if(B){var a=p("SWFObjectExprInst");a&&y&&(a.parentNode.replaceChild(y,a),C&&(v(C,!0),e.ie&&e.win&&(y.style.display="block")),I&&I(O));B=!1}}}}();
\ No newline at end of file
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Output for Flash &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<script src="../../../samples/old/sample.js"></script>
<script src="assets/outputforflash/swfobject.js"></script>
<link href="../../../samples/old/sample.css" rel="stylesheet">
<meta name="ckeditor-sample-required-plugins" content="sourcearea">
<meta name="ckeditor-sample-name" content="Output for Flash">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce HTML code that can be used with Adobe Flash.">
<style>
.alert
{
background: #ffa84c;
padding: 10px 15px;
font-weight: bold;
display: block;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Producing Flash Compliant HTML Output
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to configure CKEditor to output
HTML code that can be used with
<a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
Adobe Flash</a>.
The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
</p>
<p>
To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
JavaScript call, and define CKEditor features to use HTML elements and attributes.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>
To see how it works, create some content in the editing area of CKEditor on the left
and send it to the Flash object on the right side of the page by using the
<strong>Send to Flash</strong> button.
</p>
<table style="width: 100%; border-spacing: 0; border-collapse:collapse;">
<tr>
<td style="width: 100%">
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;&lt;b&gt;&lt;font size=&quot;18&quot; style=&quot;font-size:18px;&quot;&gt;Flash and HTML&lt;/font&gt;&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;It is possible to have &lt;a href=&quot;https://ckeditor.com&quot;&gt;CKEditor&lt;/a&gt; creating content that will be later loaded inside &lt;b&gt;Flash&lt;/b&gt; objects and animations.&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;Flash has a few limitations when dealing with HTML:&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;It has limited support on tags.&lt;/li&gt;&lt;li&gt;There is no margin between block elements, like paragraphs.&lt;/li&gt;&lt;/ul&gt;</textarea>
<script>
if ( document.location.protocol == 'file:' )
alert( 'Warning: This samples does not work when loaded from local filesystem' +
'due to security restrictions implemented in Flash.' +
'\n\nPlease load the sample from a web server instead.' );
var editor = CKEDITOR.replace( 'editor1', {
/*
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
*/
extraPlugins: 'htmlwriter',
height: 290,
width: '100%',
toolbar: [
[ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
'/',
[ 'Font', 'FontSize' ],
[ 'TextColor', '-', 'About' ]
],
/*
* Style sheet for the contents
*/
contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
/*
* Quirks doctype
*/
docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
/*
* Core styles.
*/
coreStyles_bold: { element: 'b' },
coreStyles_italic: { element: 'i' },
coreStyles_underline: { element: 'u' },
/*
* Font face.
*/
// Define the way font elements will be applied to the document. The "font"
// element will be used.
font_style: {
element: 'font',
attributes: { 'face': '#(family)' }
},
/*
* Font sizes.
*/
// The CSS part of the font sizes isn't used by Flash, it is there to get the
// font rendered correctly in CKEditor.
fontSize_sizes: '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',
fontSize_style: {
element: 'font',
attributes: { 'size': '#(size)' },
styles: { 'font-size': '#(size)px' }
} ,
/*
* Font colors.
*/
colorButton_enableMore: true,
colorButton_foreStyle: {
element: 'font',
attributes: { 'color': '#(color)' }
},
colorButton_backStyle: {
element: 'font',
styles: { 'background-color': '#(color)' }
},
on: { 'instanceReady': configureFlashOutput }
});
/*
* Adjust the behavior of the dataProcessor to match the
* requirements of Flash
*/
function configureFlashOutput( ev ) {
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting match Flash expectations
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
dataProcessor.writer.setRules( e, {
indent: false,
breakBeforeOpen: false,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: false
});
}
dataProcessor.writer.setRules( 'br', {
indent: false,
breakBeforeOpen: false,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: false
});
// Output properties as attributes, not styles.
htmlFilter.addRules( {
elements: {
$: function( element ) {
var style, match, width, height, align;
// Output dimensions of images as width and height
if ( element.name == 'img' ) {
style = element.attributes.style;
if ( style ) {
// Get the width from the style.
match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style );
width = match && match[1];
// Get the height from the style.
match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );
height = match && match[1];
if ( width ) {
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
element.attributes.width = width;
}
if ( height ) {
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
element.attributes.height = height;
}
}
}
// Output alignment of paragraphs using align
if ( element.name == 'p' ) {
style = element.attributes.style;
if ( style ) {
// Get the align from the style.
match = ( /(?:^|\s)text-align\s*:\s*(\w*);?/i ).exec( style );
align = match && match[1];
if ( align ) {
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
element.attributes.align = align;
}
}
}
if ( element.attributes.style === '' )
delete element.attributes.style;
return element;
}
}
});
}
function sendToFlash() {
var html = CKEDITOR.instances.editor1.getData() ;
// Quick fix for link color.
html = html.replace( /<a /g, '<font color="#0000FF"><u><a ' )
html = html.replace( /<\/a>/g, '</a></u></font>' )
var flash = document.getElementById( 'ckFlashContainer' ) ;
flash.setData( html ) ;
}
CKEDITOR.domReady( function() {
if ( !swfobject.hasFlashPlayerVersion( '8' ) ) {
CKEDITOR.dom.element.createFromHtml( '<span class="alert">' +
'At least Adobe Flash Player 8 is required to run this sample. ' +
'You can download it from <a href="http://get.adobe.com/flashplayer">Adobe\'s website</a>.' +
'</span>' ).insertBefore( editor.element );
}
swfobject.embedSWF(
'assets/outputforflash/outputforflash.swf',
'ckFlashContainer',
'550',
'400',
'8',
{ wmode: 'transparent' }
);
});
</script>
<p>
<input type="button" value="Send to Flash" onclick="sendToFlash();">
</p>
</td>
<td style="vertical-align: top; padding-left: 20px">
<div id="ckFlashContainer"></div>
</td>
</tr>
</table>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>HTML Compliant Output &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<script src="../../../samples/old/sample.js"></script>
<link href="../../../samples/old/sample.css" rel="stylesheet">
<meta name="ckeditor-sample-required-plugins" content="sourcearea">
<meta name="ckeditor-sample-name" content="Output HTML">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">
</head>
<body>
<h1 class="samples">
<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Producing HTML Compliant Output
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to configure CKEditor to output valid
<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
Traditional HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.
</p>
<p>
To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
full definition:
</p>
<pre class="samples">
CKEDITOR.replace( '<em>textarea_id</em>', {
coreStyles_bold: { element: 'b' },
coreStyles_italic: { element: 'i' },
fontSize_style: {
element: 'font',
attributes: { 'size': '#(size)' }
}
...
});</pre>
</div>
<form action="../../../samples/sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:
</label>
<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
<script>
CKEDITOR.replace( 'editor1', {
/*
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
*/
extraPlugins: 'htmlwriter',
/*
* Style sheet for the contents
*/
contentsCss: 'body {color:#000; background-color#:FFF;}',
/*
* Simple HTML5 doctype
*/
docType: '<!DOCTYPE HTML>',
/*
* Allowed content rules which beside limiting allowed HTML
* will also take care of transforming styles to attributes
* (currently only for img - see transformation rules defined below).
*
* Read more: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter.html
*/
allowedContent:
'h1 h2 h3 p pre[align]; ' +
'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',
/*
* Core styles.
*/
coreStyles_bold: { element: 'b' },
coreStyles_italic: { element: 'i' },
coreStyles_underline: { element: 'u' },
coreStyles_strike: { element: 'strike' },
/*
* Font face.
*/
// Define the way font elements will be applied to the document.
// The "font" element will be used.
font_style: {
element: 'font',
attributes: { 'face': '#(family)' }
},
/*
* Font sizes.
*/
fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
fontSize_style: {
element: 'font',
attributes: { 'size': '#(size)' }
},
/*
* Font colors.
*/
colorButton_foreStyle: {
element: 'font',
attributes: { 'color': '#(color)' }
},
colorButton_backStyle: {
element: 'font',
styles: { 'background-color': '#(color)' }
},
/*
* Styles combo.
*/
stylesSet: [
{ name: 'Computer Code', element: 'code' },
{ name: 'Keyboard Phrase', element: 'kbd' },
{ name: 'Sample Text', element: 'samp' },
{ name: 'Variable', element: 'var' },
{ name: 'Deleted Text', element: 'del' },
{ name: 'Inserted Text', element: 'ins' },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' }
],
on: {
pluginsLoaded: configureTransformations,
loaded: configureHtmlWriter
}
});
/*
* Add missing content transformations.
*/
function configureTransformations( evt ) {
var editor = evt.editor;
editor.dataProcessor.htmlFilter.addRules( {
attributes: {
style: function( value, element ) {
// Return #RGB for background and border colors
return CKEDITOR.tools.convertRgbToHex( value );
}
}
} );
// Default automatic content transformations do not yet take care of
// align attributes on blocks, so we need to add our own transformation rules.
function alignToAttribute( element ) {
if ( element.styles[ 'text-align' ] ) {
element.attributes.align = element.styles[ 'text-align' ];
delete element.styles[ 'text-align' ];
}
}
editor.filter.addTransformations( [
[ { element: 'p', right: alignToAttribute } ],
[ { element: 'h1', right: alignToAttribute } ],
[ { element: 'h2', right: alignToAttribute } ],
[ { element: 'h3', right: alignToAttribute } ],
[ { element: 'pre', right: alignToAttribute } ]
] );
}
/*
* Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
*/
function configureHtmlWriter( evt ) {
var editor = evt.editor,
dataProcessor = editor.dataProcessor;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting behave similar to FCKeditor.
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
dataProcessor.writer.setRules( e, {
indent: true,
breakBeforeOpen: true,
breakAfterOpen: false,
breakBeforeClose: !dtd[ e ][ '#' ],
breakAfterClose: true
});
}
}
</script>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Samples</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1 class="samples">
CKEditor Samples
</h1>
<div class="warning deprecated">
These samples are not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<div class="twoColumns">
<div class="twoColumnsLeft">
<h2 class="samples">
Basic Samples
</h2>
<dl class="samples">
<dt><a class="samples" href="replacebyclass.html">Replace textarea elements by class name</a></dt>
<dd>Automatic replacement of all textarea elements of a given class with a CKEditor instance.</dd>
<dt><a class="samples" href="replacebycode.html">Replace textarea elements by code</a></dt>
<dd>Replacement of textarea elements with CKEditor instances by using a JavaScript call.</dd>
<dt><a class="samples" href="jquery.html">Create editors with jQuery</a></dt>
<dd>Creating standard and inline CKEditor instances with jQuery adapter.</dd>
</dl>
<h2 class="samples">
Basic Customization
</h2>
<dl class="samples">
<dt><a class="samples" href="uicolor.html">User Interface color</a></dt>
<dd>Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.</dd>
<dt><a class="samples" href="uilanguages.html">User Interface languages</a></dt>
<dd>Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.</dd>
</dl>
<h2 class="samples">Plugins</h2>
<dl class="samples">
<dt><a class="samples" href="magicline/magicline.html">Magicline plugin</a></dt>
<dd>Using the Magicline plugin to access difficult focus spaces.</dd>
<dt><a class="samples" href="wysiwygarea/fullpage.html">Full page support</a></dt>
<dd>CKEditor inserted with a JavaScript call and used to edit the whole page from &lt;html&gt; to &lt;/html&gt;.</dd>
</dl>
</div>
<div class="twoColumnsRight">
<h2 class="samples">
Inline Editing
</h2>
<dl class="samples">
<dt><a class="samples" href="inlineall.html">Massive inline editor creation</a></dt>
<dd>Turn all elements with <code>contentEditable = true</code> attribute into inline editors.</dd>
<dt><a class="samples" href="inlinebycode.html">Convert element into an inline editor by code</a></dt>
<dd>Conversion of DOM elements into inline CKEditor instances by using a JavaScript call.</dd>
<dt><a class="samples" href="inlinetextarea.html">Replace textarea with inline editor</a> <span class="new">New!</span></dt>
<dd>A form with a textarea that is replaced by an inline editor at runtime.</dd>
</dl>
<h2 class="samples">
Advanced Samples
</h2>
<dl class="samples">
<dt><a class="samples" href="datafiltering.html">Data filtering and features activation</a> <span class="new">New!</span></dt>
<dd>Data filtering and automatic features activation basing on configuration.</dd>
<dt><a class="samples" href="divreplace.html">Replace DIV elements on the fly</a></dt>
<dd>Transforming a <code>div</code> element into an instance of CKEditor with a mouse click.</dd>
<dt><a class="samples" href="appendto.html">Append editor instances</a></dt>
<dd>Appending editor instances to existing DOM elements.</dd>
<dt><a class="samples" href="ajax.html">Create and destroy editor instances for Ajax applications</a></dt>
<dd>Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.</dd>
<dt><a class="samples" href="api.html">Basic usage of the API</a></dt>
<dd>Using the CKEditor JavaScript API to interact with the editor at runtime.</dd>
<dt><a class="samples" href="xhtmlstyle.html">XHTML-compliant style</a></dt>
<dd>Configuring CKEditor to produce XHTML 1.1 compliant attributes and styles.</dd>
<dt><a class="samples" href="readonly.html">Read-only mode</a></dt>
<dd>Using the readOnly API to block introducing changes to the editor contents.</dd>
<dt><a class="samples" href="tabindex.html">"Tab" key-based navigation</a></dt>
<dd>Navigating among editor instances with tab key.</dd>
<dt><a class="samples" href="dialog/dialog.html">Using the JavaScript API to customize dialog windows</a></dt>
<dd>Using the dialog windows API to customize dialog windows without changing the original editor code.</dd>
<dt><a class="samples" href="enterkey/enterkey.html">Using the &quot;Enter&quot; key in CKEditor</a></dt>
<dd>Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.</dd>
<dt><a class="samples" href="htmlwriter/outputforflash.html">Output for Flash</a></dt>
<dd>Configuring CKEditor to produce HTML code that can be used with Adobe Flash.</dd>
<dt><a class="samples" href="htmlwriter/outputhtml.html">Output HTML</a></dt>
<dd>Configuring CKEditor to produce legacy HTML 4 code.</dd>
<dt><a class="samples" href="toolbar/toolbar.html">Toolbar Configurations</a></dt>
<dd>Configuring CKEditor to display full or custom toolbar layout.</dd>
</dl>
</div>
</div>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Massive inline editing &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<script>
// This code is generally not necessary, but it is here to demonstrate
// how to customize specific editor instances on the fly. This fits well
// this demo because we have editable elements (like headers) that
// require less features.
// The "instanceCreated" event is fired for every editor instance created.
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor,
element = editor.element;
// Customize editors for headers and tag list.
// These editors don't need features like smileys, templates, iframes etc.
if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
// Customize the editor configurations on "configLoaded" event,
// which is fired after the configuration file loading and
// execution. This makes it possible to change the
// configurations before the editor initialization takes place.
editor.on( 'configLoaded', function() {
// Remove unnecessary plugins to make the editor simpler.
editor.config.removePlugins = 'colorbutton,find,flash,font,' +
'forms,iframe,image,newpage,removeformat,' +
'smiley,specialchar,stylescombo,templates';
// Rearrange the layout of the toolbar.
editor.config.toolbarGroups = [
{ name: 'editing', groups: [ 'basicstyles', 'links' ] },
{ name: 'undo' },
{ name: 'clipboard', groups: [ 'selection', 'clipboard' ] },
{ name: 'about' }
];
});
}
});
</script>
<link href="sample.css" rel="stylesheet">
<style>
/* The following styles are just to make the page look nice. */
/* Workaround to show Arial Black in Firefox. */
@font-face
{
font-family: 'arial-black';
src: local('Arial Black');
}
*[contenteditable="true"]
{
padding: 10px;
}
#container
{
width: 960px;
margin: 30px auto 0;
}
#header
{
overflow: hidden;
padding: 0 0 30px;
border-bottom: 5px solid #05B2D2;
position: relative;
}
#headerLeft,
#headerRight
{
width: 49%;
overflow: hidden;
}
#headerLeft
{
float: left;
padding: 10px 1px 1px;
}
#headerLeft h2,
#headerLeft h3
{
text-align: right;
margin: 0;
overflow: hidden;
font-weight: normal;
}
#headerLeft h2
{
font-family: "Arial Black",arial-black;
font-size: 4.6em;
line-height: 1.1;
text-transform: uppercase;
}
#headerLeft h3
{
font-size: 2.3em;
line-height: 1.1;
margin: .2em 0 0;
color: #666;
}
#headerRight
{
float: right;
padding: 1px;
}
#headerRight p
{
line-height: 1.8;
text-align: justify;
margin: 0;
}
#headerRight p + p
{
margin-top: 20px;
}
#headerRight > div
{
padding: 20px;
margin: 0 0 0 30px;
font-size: 1.4em;
color: #666;
}
#columns
{
color: #333;
overflow: hidden;
padding: 20px 0;
}
#columns > div
{
float: left;
width: 33.3%;
}
#columns #column1 > div
{
margin-left: 1px;
}
#columns #column3 > div
{
margin-right: 1px;
}
#columns > div > div
{
margin: 0px 10px;
padding: 10px 20px;
}
#columns blockquote
{
margin-left: 15px;
}
#tagLine
{
border-top: 5px solid #05B2D2;
padding-top: 20px;
}
#taglist {
display: inline-block;
margin-left: 20px;
font-weight: bold;
margin: 0 0 0 20px;
}
</style>
</head>
<body>
<div>
<h1 class="samples"><a href="index.html">CKEditor Samples</a> &raquo; Massive inline editing</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/inline.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with <strong>contentEditable</strong> attribute set to value <strong>true</strong>:</p>
<pre class="samples">&lt;div <strong>contenteditable="true</strong>" &gt; ... &lt;/div&gt;</pre>
<p>Click inside of any element below to start editing.</p>
</div>
</div>
<div id="container">
<div id="header">
<div id="headerLeft">
<h2 id="sampleTitle" contenteditable="true">
CKEditor<br> Goes Inline!
</h2>
<h3 contenteditable="true">
Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
</h3>
</div>
<div id="headerRight">
<div contenteditable="true">
<p>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
</p>
<p>
Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.
</p>
</div>
</div>
</div>
<div id="columns">
<div id="column1">
<div contenteditable="true">
<h3>
Fusce vitae porttitor
</h3>
<p>
<strong>
Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
</strong>
</p>
<p>
Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a href="https://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat volutpat.
</p>
<blockquote>
<p>
Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
</p>
</blockquote>
<blockquote>
<p>
Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
</p>
</blockquote>
<p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
<p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>
</div>
</div>
<div id="column2">
<div contenteditable="true">
<h3>
Integer condimentum sit amet
</h3>
<p>
<strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
Praesent <a href="https://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
<p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
<p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
</div>
<div contenteditable="true">
<h3>
Praesent wisi accumsan sit amet nibh
</h3>
<p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
<p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="https://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
<p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
</div>
</div>
<div id="column3">
<div contenteditable="true">
<p>
<img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">
</p>
<p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>
<h3>
Nullam laoreet vel consectetuer tellus suscipit
</h3>
<ul>
<li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
<li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>
<li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
</ul>
<p>Quisque justo neque, mattis sed, <a href="https://ckeditor.com/">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>
<p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>
<p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>
</div>
</div>
</div>
<div id="tagLine">
Tags of this article:
<p id="taglist" contenteditable="true">
inline, editing, floating, CKEditor
</p>
</div>
</div>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">
https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a>
- Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Inline Editing by Code &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
<style>
#editable
{
padding: 10px;
float: left;
}
</style>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Inline Editing by Code
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/inline.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to create an inline editor instance of CKEditor. It is created
with a JavaScript call using the following code:
</p>
<pre class="samples">
// This property tells CKEditor to not activate every element with contenteditable=true element.
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
</pre>
<p>
Note that <code>editable</code> in the code above is the <code>id</code>
attribute of the <code>&lt;div&gt;</code> element to be converted into an inline instance.
</p>
</div>
<div id="editable" contenteditable="true">
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg" /> Apollo 11</h1>
<p><b>Apollo 11</b> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
<h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
<p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
<blockquote>
<p>One small step for [a] man, one giant leap for mankind.</p>
</blockquote>
<p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
<blockquote>
<p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
</blockquote>
<h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
<table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;">
<caption><strong>Mission crew</strong></caption>
<thead>
<tr>
<th scope="col">Position</th>
<th scope="col">Astronaut</th>
</tr>
</thead>
<tbody>
<tr>
<td>Commander</td>
<td>Neil A. Armstrong</td>
</tr>
<tr>
<td>Command Module Pilot</td>
<td>Michael Collins</td>
</tr>
<tr>
<td>Lunar Module Pilot</td>
<td>Edwin &quot;Buzz&quot; E. Aldrin, Jr.</td>
</tr>
</tbody>
</table>
<p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p>
<ol>
<li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
<li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
<li><strong>Lunar Module</strong> for landing on the Moon.</li>
</ol>
<p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
<hr />
<p style="text-align: right;"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
</div>
<script>
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editable' );
</script>
<div id="footer">
<hr>
<p contenteditable="true">
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">
https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a>
- Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Replace Textarea with Inline Editor &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
<style>
/* Style the CKEditor element to look like a textfield */
.cke_textarea_inline
{
padding: 10px;
height: 200px;
overflow: auto;
border: 1px solid gray;
-webkit-appearance: textfield;
}
</style>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea with Inline Editor
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/inline.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>
You can also create an inline editor from a <code>textarea</code>
element. In this case the <code>textarea</code> will be replaced
by a <code>div</code> element with inline editing enabled.
</p>
<pre class="samples">
// "article-body" is the name of a textarea element.
var editor = CKEDITOR.inline( 'article-body' );
</pre>
</div>
<form action="sample_posteddata.php" method="post">
<h2>This is a sample form with some fields</h2>
<p>
Title:<br>
<input type="text" name="title" value="Sample Form"></p>
<p>
Article Body (Textarea converted to CKEditor):<br>
<textarea name="article-body" style="height: 200px">
&lt;h2&gt;Technical details &lt;a id="tech-details" name="tech-details"&gt;&lt;/a&gt;&lt;/h2&gt;
&lt;table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;"&gt;
&lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope="col"&gt;Position&lt;/th&gt;
&lt;th scope="col"&gt;Astronaut&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Commander&lt;/td&gt;
&lt;td&gt;Neil A. Armstrong&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Command Module Pilot&lt;/td&gt;
&lt;td&gt;Michael Collins&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lunar Module Pilot&lt;/td&gt;
&lt;td&gt;Edwin &quot;Buzz&quot; E. Aldrin, Jr.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center"&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href="http://en.wikipedia.org/wiki/NASA" title="NASA"&gt;NASA&lt;/a&gt;&#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis"&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean"&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt;
&lt;hr /&gt;
&lt;p style="text-align: right;"&gt;&lt;small&gt;Source: &lt;a href="http://en.wikipedia.org/wiki/Apollo_11"&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</textarea>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<script>
CKEDITOR.inline( 'article-body' );
</script>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">
https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a>
- Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>jQuery Adapter &mdash; CKEditor Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../../ckeditor.js"></script>
<script src="../../adapters/jquery.js"></script>
<link href="sample.css" rel="stylesheet">
<style>
#editable
{
padding: 10px;
float: left;
}
</style>
<script>
CKEDITOR.disableAutoInline = true;
$( document ).ready( function() {
$( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
$( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
} );
function setValue() {
$( '#editor1' ).val( $( 'input#val' ).val() );
}
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html" id="a-test">CKEditor Samples</a> &raquo; Create Editors with jQuery
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<form action="sample_posteddata.php" method="post">
<div class="description">
<p>
This sample shows how to use the <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_jquery.html">jQuery adapter</a>.
Note that you have to include both CKEditor and jQuery scripts before including the adapter.
</p>
<pre class="samples">
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="/ckedit../../ckeditor.js"&gt;&lt;/script&gt;
&lt;script src="/ckeditor/adapters/jquery.js"&gt;&lt;/script&gt;
</pre>
<p>Then you can replace HTML elements with a CKEditor instance using the <code>ckeditor()</code> method.</p>
<pre class="samples">
$( document ).ready( function() {
$( 'textarea#editor1' ).ckeditor();
} );
</pre>
</div>
<h2 class="samples">Inline Example</h2>
<div id="editable" contenteditable="true">
<p><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/><b>Apollo 11</b> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.
<p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
<blockquote><p>One small step for [a] man, one giant leap for mankind.</p></blockquote> <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p> <blockquote><p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p></blockquote>
</div>
<br style="clear: both">
<h2 class="samples">Classic (iframe-based) Example</h2>
<textarea cols="80" id="editor1" name="editor1" rows="10">
&lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</textarea>
<p style="overflow: hidden">
<input style="float: left" type="submit" value="Submit">
<span style="float: right">
<input type="text" id="val" value="I'm using jQuery val()!" size="30">
<input onclick="setValue();" type="button" value="Set value">
</span>
</p>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Using the CKEditor Read-Only API &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
<script>
var editor;
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev ) {
editor = ev.editor;
// Show this "on" button.
document.getElementById( 'readOnlyOn' ).style.display = '';
// Event fired when the readOnly property changes.
editor.on( 'readOnly', function() {
document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
});
});
function toggleReadOnly( isReadOnly ) {
// Change the read-only state of the editor.
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-setReadOnly
editor.setReadOnly( isReadOnly );
}
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Using the CKEditor Read-Only API
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/readonly.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to use the
<code><a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-setReadOnly">setReadOnly</a></code>
API to put editor into the read-only state that makes it impossible for users to change the editor contents.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only" style="display:none">
<input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none">
</p>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Replace Textareas by Class Name &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea Elements by Class Name
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out the <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/index.html">brand new samples in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
of a given class with a CKEditor instance.
</p>
<p>
To replace a <code>&lt;textarea&gt;</code> element, simply assign it the <code>ckeditor</code>
class, as in the code below:
</p>
<pre class="samples">
&lt;textarea <strong>class="ckeditor</strong>" name="editor1"&gt;&lt;/textarea&gt;
</pre>
<p>
Note that other <code>&lt;textarea&gt;</code> attributes (like <code>id</code> or <code>name</code>) need to be adjusted to your document.
</p>
</div>
<form action="sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:
</label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
&lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</textarea>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
<meta charset="utf-8">
<title>Replace Textarea by Code &mdash; CKEditor Sample</title>
<script src="../../ckeditor.js"></script>
<link href="sample.css" rel="stylesheet">
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea Elements Using JavaScript Code
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/classic.html">brand new version in CKEditor Examples</a>.
</div>
<form action="sample_posteddata.php" method="post">
<div class="description">
<p>
This editor is using an <code>&lt;iframe&gt;</code> element-based editing area, provided by the <strong>Wysiwygarea</strong> plugin.
</p>
<pre class="samples">
CKEDITOR.replace( '<em>textarea_id</em>' )
</pre>
</div>
<textarea cols="80" id="editor1" name="editor1" rows="10">
&lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
</textarea>
<script>
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' );
</script>
<p>
<input type="submit" value="Submit">
</p>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>
Font license info
## Font Awesome
Copyright (C) 2012 by Dave Gandy
Author: Dave Gandy
License: SIL ()
Homepage: http://fortawesome.github.com/Font-Awesome/
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册