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
- Editor Types – Classic Editor
- Editor Types – Inline Editor
- Saving Data – CKEditor 4 in Ajax Applications
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"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></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"><h1><img alt="Saturn V carrying Apollo 11" style="float:right;margin:10px" 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> </textarea> <p><input type="submit" value="Submit"></p> </form> <script> CKEDITOR.inline('editor2', { removeButtons: 'PasteFromWord' }); </script> </body> </html>