Saving Data in CKEditor 4 Replacing a TextareaDocumentation
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 withclassic editorusing theCKEDITOR.replace()
method.
Inline Editor Replacing a Textarea
A<textarea>
element is replaced withinline editorusing theCKEDITOR.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>