Saving Data in CKEditor 4 Replacing a TextareaDocumentation

When CKEditor 4 is set to replace a<textarea>element, the integration with the parent<form>element is automatic. CKEditor 4 automatically updates the replaced<textarea>when the form is submitted, so there is no need to change any server-side code handling form submission after enabling CKEditor 4 on an exisiting form element.

Note:The examples below will submit content to a remote server.

Classic Editor Replacing a Textarea

A<textarea>element is replaced withclassic editorusing theCKEDITOR.replace()method.

<h1><img alt= "Saturn V carrying Apollo 11" class= "right" src= "assets/sample.jpg" /> 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>

Inline Editor Replacing a Textarea

A<textarea>element is replaced withinline editorusing theCKEDITOR.inline()method.

<h1><img alt= "Saturn V carrying Apollo 11" style= "float:right;margin:10px" src= "assets/sample.jpg" /> Apollo 11</h1>

Related Features

Get Sample Source Code

Classic editor replacing a textarea

<!doctype html>
<html lang= "en" >

<head>
<meta charset= "utf-8" >
<meta name= "robots" content= "noindex, nofollow" >
<title>Classic editor replacing a textarea</title>
<script src= "https://cdn.ckeditor /4.24.0-lts/standard-all/ckeditor.js" ></script>
</head>

<body>
<form action= "https://d1.ckeditor /savetextarea/savetextarea.php" method= "post" >&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor /&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</form>
<script>
CKEDITOR.replace('editor1', {
removeButtons: 'PasteFromWord'
});
</script>
</body>

</html>

Inline editor replacing a textarea

<!doctype html>
<html lang= "en" >

<head>
<meta charset= "utf-8" >
<meta name= "robots" content= "noindex, nofollow" >
<title>Inline editor replacing a textarea</title>
<script src= "https://cdn.ckeditor /4.24.0-lts/standard-all/ckeditor.js" ></script>
</head>

<body>
<style type= "text/css" >
.cke_textarea_inline {
border: 1px solid #ccc;
padding: 10px;
min-height: 300px;
background: #fff;
color: #000;
}
</style>
<form action= "https://d1.ckeditor /savetextarea/savetextarea.php" method= "post" >
<textarea cols= "80" id= "editor2" name= "editor2" rows= "10" >&lt;h1&gt;&lt;img alt= "Saturn V carrying Apollo 11" style= "float:right;margin:10px" src= "assets/sample.jpg" /&gt; Apollo 11&lt;/h1&gt;

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

<p><input type= "submit" value= "Submit" ></p>
</form>
<script>
CKEDITOR.inline('editor2', {
removeButtons: 'PasteFromWord'
});
</script>
</body>

</html>