| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| 3 | <head> |
|---|
| 4 | <title>API Usage — CKEditor Sample</title> |
|---|
| 5 | <meta content="text/html; charset=utf-8" http-equiv="content-type" /> |
|---|
| 6 | <script type="text/javascript" src="../ckeditor.js"></script> |
|---|
| 7 | <script src="sample.js" type="text/javascript"></script> |
|---|
| 8 | <link href="sample.css" rel="stylesheet" type="text/css" /> |
|---|
| 9 | <script type="text/javascript"> |
|---|
| 10 | //<![CDATA[ |
|---|
| 11 | |
|---|
| 12 | // The instanceReady event is fired, when an instance of CKEditor has finished its initialization. |
|---|
| 13 | CKEDITOR.on( 'instanceReady', function( ev ) { |
|---|
| 14 | // Show this sample buttons. |
|---|
| 15 | document.getElementById('eButtons').style.display = 'block'; |
|---|
| 16 | |
|---|
| 17 | ToggleContentEditable(); |
|---|
| 18 | }); |
|---|
| 19 | |
|---|
| 20 | function ToggleContentEditable() { |
|---|
| 21 | var oBody = window.frames[0].document.body; |
|---|
| 22 | if (oBody.isContentEditable) { |
|---|
| 23 | oBody.unselectable = "on"; |
|---|
| 24 | oBody.contentEditable = "false"; |
|---|
| 25 | } else { |
|---|
| 26 | oBody.unselectable = "off"; |
|---|
| 27 | oBody.contentEditable = "true"; |
|---|
| 28 | } |
|---|
| 29 | } |
|---|
| 30 | //]]> |
|---|
| 31 | </script> |
|---|
| 32 | </head> |
|---|
| 33 | <body> |
|---|
| 34 | <h1 class="samples">CKEditor Sample — Setting contentEditable = false on the body and true on certain sections</h1> |
|---|
| 35 | <div class="description"> |
|---|
| 36 | <p>When you set contentEditable = false and unselectable = "on" on the document body, selections do not behave as expected.</p> |
|---|
| 37 | <p>If you make a selection and then right click on an unselected word in the same div, the selection is retained instead of being removed and the cursor moving to where the user clicked.</p> |
|---|
| 38 | <p>Right-clicking in a different div will clear the selection as expected.</p> |
|---|
| 39 | </div> |
|---|
| 40 | <form action="sample_posteddata.php" method="post"> |
|---|
| 41 | <textarea cols="100" id="editor1" name="editor1" rows="10"> |
|---|
| 42 | <div class="ddfreetext" contenteditable="true" id="1234"><p>This is div one and it simulates a freetext area where you can always type.</p></div> |
|---|
| 43 | <div class="ddstatictext" id="4321"><p>This is div two and it simulates static content where the user may not be able to perform edits.</p></div> |
|---|
| 44 | </textarea> |
|---|
| 45 | <script type="text/javascript"> |
|---|
| 46 | //<![CDATA[ |
|---|
| 47 | // Replace the <textarea id="editor1"> with an CKEditor instance. |
|---|
| 48 | var editor = CKEDITOR.replace( 'editor1' ); |
|---|
| 49 | //]]> |
|---|
| 50 | </script> |
|---|
| 51 | <div id="eButtons" style="display: none"> |
|---|
| 52 | <input onclick="ToggleContentEditable();" type="button" value="Toggle contentEditable" /> |
|---|
| 53 | </div> |
|---|
| 54 | </form> |
|---|
| 55 | </body> |
|---|
| 56 | </html> |
|---|
