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>

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>

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.25.0-lts/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.25.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.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>