CKEditor

Basic CKEditor

CKEditor is an Open source application, which means it can be modified in any way you want. It benefits from an active community that is constantly evolving the application with free add-ons and a transparent development process.

<h1><img alt="Saturn V carrying Apollo 11" class="right" src="../../../app-assets/images/elements/01.png" height="250" /> Apollo 11</h1>
								<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/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 kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/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">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">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">
									<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 "Buzz" 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">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">NASA</a>'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'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">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">Pacific Ocean</a> on July 24.</p>

<hr />
								<p><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>

Readonly CKEditor

CKEditor API makes it possible to put the editor into the read-only mode. This mode renders the editor content non-editable and the users will not be able to modify it.

<h1><img alt="Saturn V carrying Apollo 11" class="right" src="../../../app-assets/images/elements/01.png" height="250" /> Apollo 11</h1>

<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/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 kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/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>Technical details <a id="tech-details" name="tech-details"></a></h2>

<hr />
								<p><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>

CKEditor UI Color

The editor UI color can be adjusted by the developer to match the look and feel of a website or an application. In order to define the color of the user interface, use the config.uiColor configuration setting which accepts an RGB color code. In the editor instance below the UI color was set to the #CCEAEE RGB value.

<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>

<hr />
								<p><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>

Enter Key Configuration

This sample shows how to configure the Enter and Shift+Enter keys to perform actions specified in the config.enterMode and config.shiftEnterMode settings, respectively.

Multilingual Content

CKEditor is well-suited for multilingual environment. Its UI is translated into over 60 languages and by default it is displayed in user's language. Additionally, it makes working with multilingual content very convenient by providing the ability to set the text direction as well as mark the language of selected text fragments.

<p><strong>Language</strong>&nbsp;is the&nbsp;<a href="http://en.wikipedia.org/wiki/Human">human</a>&nbsp;ability to acquire and use complex systems of&nbsp;<a href="http://en.wikipedia.org/wiki/Communication">communication</a>, and&nbsp;<strong>a language</strong>&nbsp;is any specific example of such a system. The scientific study of language is called&nbsp;<a href="http://en.wikipedia.org/wiki/Linguistics">linguistics</a>.</p>		
								<p><span dir="rtl" lang="he"><strong>שפה</strong>&nbsp;היא דרך&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%AA%D7%A7%D7%A9%D7%95%D7%A8%D7%AA">תקשורת</a>&nbsp;המבוססת על&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%A2%D7%A8%D7%9B%D7%AA">מערכת</a>&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%A1%D7%9E%D7%9C">סמלים</a>&nbsp;מורכבת בעלת חוקיות, המאפשרת לקודד&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%90%D7%A8%D7%92%D7%95%D7%9F_(%D7%A4%D7%A2%D7%95%D7%9C%D7%94)">ולארגן</a>&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%99%D7%93%D7%A2">מידע</a>&nbsp;בעל&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%A9%D7%9E%D7%A2%D7%95%D7%AA">משמעויות</a>&nbsp;רבות ומגוונות. נהוג להבדיל בין הסמל השפתי ה<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%A1%D7%9E%D7%9F">מסמן</a>&nbsp;לבין המושג או התוכן ה<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%A1%D7%95%D7%9E%D7%9F">מסומן</a>&nbsp;בו, אשר יכול להיות&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%9E%D7%A6%D7%99%D7%90%D7%95%D7%AA">מציאותי</a>&nbsp;או&nbsp;<a href="http://he.wikipedia.org/wiki/%D7%94%D7%A4%D7%A9%D7%98%D7%94">מופשט</a>.</span></p>		<p><span dir="ltr" lang="es">Un&nbsp;<strong>lenguaje</strong>&nbsp;(del&nbsp;<a href="http://es.wikipedia.org/wiki/Idioma_occitano">provenzal</a>&nbsp;<em>lenguatge</em>&nbsp;y este del&nbsp;<a href="http://es.wikipedia.org/wiki/Lat%C3%ADn">lat&iacute;n</a>&nbsp;<em>lingua</em>) es un sistema de&nbsp;<a href="http://es.wikipedia.org/wiki/Comunicaci%C3%B3n">comunicaci&oacute;n</a>&nbsp;estructurado para el que existe un&nbsp;<a href="http://es.wikipedia.org/wiki/Significado">contexto</a>&nbsp;de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.</span></p>		
								<p><span dir="rtl" lang="ar"><strong>اللغة</strong>&nbsp;نسق من الإشارات والرموز، يشكل أداة من أدوات&nbsp;<a href="http://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81%D8%A9">المعرفة</a>، وتعتبر اللغة أهم وسائل التفاهم والاحتكاك بين أفراد المجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس المعرفي.</span></p>

Inline editing

Inline Editor

Inline Editing allows you to edit any element on the page in-place. Inline editor provides a real WYSIWYG experience "out of the box", because unlike in classic editor, there is no <iframe> element surrounding the editing area. The CSS styles used for editor content are exactly the same as on the target page where this content is rendered!

Inline Editing Enabled by Code

Press the "Start editing" button below. An editor will be created using the CKEDITOR.inline() method with config.startupFocus set to true.

CKEditor

Basic CKEditor

Readonly CKEditor

CKEditor UI Color

Enter Key Configuration

Multilingual Content

Inline editing

Inline Editor

Inline Editing Enabled by Code

Theme Customizer

Menu Color Options

Layout Options

Navigation Color Options

Solid

Gradient

Solid

Gradient

You have new order!

99% Server load

Warning notifixation

Complete the task

Generate monthly report

Margaret Govan

Bret Lezama

Carie Berra

Eric Alsobrook

CKEditor

Basic CKEditor

Readonly CKEditor

CKEditor UI Color

Enter Key Configuration

Multilingual Content

Inline editing

Inline Editor

Inline Editing Enabled by Code

Theme Customizer

Menu Color Options

Layout Options

Navigation Color Options

Solid

Gradient

Solid

Gradient