Saving Data in CKEditor 4 Replacing a Textarea Documentation

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 with classic editor using the CKEDITOR.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&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)">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>

Rich Text Editor, editor1

Editor toolbars

Press ALT 0 for help

◢Elements path

Inline Editor Replacing a Textarea

A <textarea> element is replaced with inline editor using the CKEDITOR.inline() method.

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

Apollo 11

Apollo 11 was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, 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.

Armstrong spent about ~~three and a half~~ 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, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.

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.com/4.21.0/standard-all/ckeditor.js"></script>
</head>

<body>
  <form action="https://d1.ckeditor.com/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.com/&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.com/4.21.0/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.com/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;nbsp;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>