Contribute to this guideReport an issue

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.

Inline Editor Replacing a Textarea

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

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