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.

&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;strong&gt;Apollo 11&lt;/strong&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot;&gt;Neil
					Armstrong&lt;/a&gt; and
					&lt;a href=&quot;http://en.wikipedia.org/wiki/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;&gt;Michael Collins&lt;/a&gt;, piloted
					the
					&lt;a href=&quot;http://en.wikipedia.org/wiki/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;

Inline Editor Replacing a Textarea

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

&lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; style=&quot;float:right;margin:10px&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt;

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

<body>
  <form action="https://d1.ckeditor.com/savetextarea/savetextarea.php" method="post" data-sample-short>&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.1-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">
&amp;lt;h1&amp;gt;&amp;lt;img alt=&amp;quot;Saturn V carrying Apollo 11&amp;quot; style=&amp;quot;float:right;margin:10px&amp;quot; src=&amp;quot;assets/sample.jpg&amp;quot;/&amp;gt; Apollo 11&amp;lt;/h1&amp;gt;

&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;Apollo 11&amp;lt;/strong&amp;gt; was the spaceflight that landed the first humans, Americans &amp;lt;a href=&amp;quot;http://en.wikipedia.org/wiki/Neil_Armstrong&amp;quot;&amp;gt;Neil
Armstrong&amp;lt;/a&amp;gt; and
&amp;lt;a href=&amp;quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&amp;quot;&amp;gt;Buzz Aldrin&amp;lt;/a&amp;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.&amp;lt;/p&amp;gt;

&amp;lt;p&amp;gt;Armstrong spent about &amp;lt;s&amp;gt;three and a half&amp;lt;/s&amp;gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;amp;nbsp;kg)
of lunar
material for return to Earth. A third member of the mission, &amp;lt;a href=&amp;quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&amp;quot;&amp;gt;Michael Collins&amp;lt;/a&amp;gt;, piloted
the
&amp;lt;a href=&amp;quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&amp;quot;&amp;gt;command&amp;lt;/a&amp;gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for
the trip back to
Earth.&amp;lt;/p&amp;gt;
</textarea>

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

</html>