Mercurial > hg > rr-repo

annotate sites/all/libraries/ckeditor/_samples/divreplace.html @ 0:ff03f76ab3fe

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial version
author danieleb <danielebarchiesi@me.com>
date Wed, 21 Aug 2013 18:51:11 +0100
parents
children
rev   line source
danielebarchiesi@0 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
danielebarchiesi@0 2 <!--
danielebarchiesi@0 3 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
danielebarchiesi@0 4 For licensing, see LICENSE.html or http://ckeditor.com/license
danielebarchiesi@0 5 -->
danielebarchiesi@0 6 <html xmlns="http://www.w3.org/1999/xhtml">
danielebarchiesi@0 7 <head>
danielebarchiesi@0 8 <title>Replace DIV &mdash; CKEditor Sample</title>
danielebarchiesi@0 9 <meta content="text/html; charset=utf-8" http-equiv="content-type" />
danielebarchiesi@0 10 <script type="text/javascript" src="../ckeditor.js"></script>
danielebarchiesi@0 11 <script src="sample.js" type="text/javascript"></script>
danielebarchiesi@0 12 <link href="sample.css" rel="stylesheet" type="text/css" />
danielebarchiesi@0 13 <style id="styles" type="text/css">
danielebarchiesi@0 14
danielebarchiesi@0 15 div.editable
danielebarchiesi@0 16 {
danielebarchiesi@0 17 border: solid 2px Transparent;
danielebarchiesi@0 18 padding-left: 15px;
danielebarchiesi@0 19 padding-right: 15px;
danielebarchiesi@0 20 }
danielebarchiesi@0 21
danielebarchiesi@0 22 div.editable:hover
danielebarchiesi@0 23 {
danielebarchiesi@0 24 border-color: black;
danielebarchiesi@0 25 }
danielebarchiesi@0 26
danielebarchiesi@0 27 </style>
danielebarchiesi@0 28 <script type="text/javascript">
danielebarchiesi@0 29 //<![CDATA[
danielebarchiesi@0 30
danielebarchiesi@0 31 // Uncomment the following code to test the "Timeout Loading Method".
danielebarchiesi@0 32 // CKEDITOR.loadFullCoreTimeout = 5;
danielebarchiesi@0 33
danielebarchiesi@0 34 window.onload = function()
danielebarchiesi@0 35 {
danielebarchiesi@0 36 // Listen to the double click event.
danielebarchiesi@0 37 if ( window.addEventListener )
danielebarchiesi@0 38 document.body.addEventListener( 'dblclick', onDoubleClick, false );
danielebarchiesi@0 39 else if ( window.attachEvent )
danielebarchiesi@0 40 document.body.attachEvent( 'ondblclick', onDoubleClick );
danielebarchiesi@0 41
danielebarchiesi@0 42 };
danielebarchiesi@0 43
danielebarchiesi@0 44 function onDoubleClick( ev )
danielebarchiesi@0 45 {
danielebarchiesi@0 46 // Get the element which fired the event. This is not necessarily the
danielebarchiesi@0 47 // element to which the event has been attached.
danielebarchiesi@0 48 var element = ev.target || ev.srcElement;
danielebarchiesi@0 49
danielebarchiesi@0 50 // Find out the div that holds this element.
danielebarchiesi@0 51 var name;
danielebarchiesi@0 52 do
danielebarchiesi@0 53 {
danielebarchiesi@0 54 element = element.parentNode;
danielebarchiesi@0 55 }
danielebarchiesi@0 56 while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )
danielebarchiesi@0 57
danielebarchiesi@0 58
danielebarchiesi@0 59 if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
danielebarchiesi@0 60 replaceDiv( element );
danielebarchiesi@0 61 }
danielebarchiesi@0 62
danielebarchiesi@0 63 var editor;
danielebarchiesi@0 64
danielebarchiesi@0 65 function replaceDiv( div )
danielebarchiesi@0 66 {
danielebarchiesi@0 67 if ( editor )
danielebarchiesi@0 68 editor.destroy();
danielebarchiesi@0 69
danielebarchiesi@0 70 editor = CKEDITOR.replace( div );
danielebarchiesi@0 71 }
danielebarchiesi@0 72
danielebarchiesi@0 73 //]]>
danielebarchiesi@0 74 </script>
danielebarchiesi@0 75
danielebarchiesi@0 76 </head>
danielebarchiesi@0 77 <body>
danielebarchiesi@0 78 <h1 class="samples">
danielebarchiesi@0 79 CKEditor Sample &mdash; Replace DIV with CKEditor on the Fly
danielebarchiesi@0 80 </h1>
danielebarchiesi@0 81 <div class="description">
danielebarchiesi@0 82 <p>
danielebarchiesi@0 83 This sample shows how to automatically replace <code>&lt;div&gt;</code> elements
danielebarchiesi@0 84 with a CKEditor instance on the fly, following user's doubleclick. The content
danielebarchiesi@0 85 that was previously placed inside the <code>&lt;div&gt;</code> element will now
danielebarchiesi@0 86 be moved into CKEditor editing area.
danielebarchiesi@0 87 </p>
danielebarchiesi@0 88 <p>
danielebarchiesi@0 89 For details on how to create this setup check the source code of this sample page.
danielebarchiesi@0 90 </p>
danielebarchiesi@0 91 </div>
danielebarchiesi@0 92 <!-- This <div> holds alert messages to be display in the sample page. -->
danielebarchiesi@0 93 <div id="alerts">
danielebarchiesi@0 94 <noscript>
danielebarchiesi@0 95 <p>
danielebarchiesi@0 96 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
danielebarchiesi@0 97 support, like yours, you should still see the contents (HTML data) and you should
danielebarchiesi@0 98 be able to edit it normally, without a rich editor interface.
danielebarchiesi@0 99 </p>
danielebarchiesi@0 100 </noscript>
danielebarchiesi@0 101 </div>
danielebarchiesi@0 102 <p>
danielebarchiesi@0 103 Double-click any of the following <code>&lt;div&gt;</code> elements to transform them into
danielebarchiesi@0 104 editor instances.</p>
danielebarchiesi@0 105 <div class="editable">
danielebarchiesi@0 106 <h3>
danielebarchiesi@0 107 Part 1</h3>
danielebarchiesi@0 108 <p>
danielebarchiesi@0 109 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
danielebarchiesi@0 110 semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
danielebarchiesi@0 111 rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
danielebarchiesi@0 112 nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
danielebarchiesi@0 113 eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
danielebarchiesi@0 114 </p>
danielebarchiesi@0 115 </div>
danielebarchiesi@0 116 <div class="editable">
danielebarchiesi@0 117 <h3>
danielebarchiesi@0 118 Part 2</h3>
danielebarchiesi@0 119 <p>
danielebarchiesi@0 120 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
danielebarchiesi@0 121 semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
danielebarchiesi@0 122 rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
danielebarchiesi@0 123 nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
danielebarchiesi@0 124 eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
danielebarchiesi@0 125 </p>
danielebarchiesi@0 126 <p>
danielebarchiesi@0 127 Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
danielebarchiesi@0 128 sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
danielebarchiesi@0 129 vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
danielebarchiesi@0 130 </p>
danielebarchiesi@0 131 </div>
danielebarchiesi@0 132 <div class="editable">
danielebarchiesi@0 133 <h3>
danielebarchiesi@0 134 Part 3</h3>
danielebarchiesi@0 135 <p>
danielebarchiesi@0 136 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
danielebarchiesi@0 137 semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
danielebarchiesi@0 138 rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
danielebarchiesi@0 139 nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
danielebarchiesi@0 140 eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
danielebarchiesi@0 141 </p>
danielebarchiesi@0 142 </div>
danielebarchiesi@0 143 <div id="footer">
danielebarchiesi@0 144 <hr />
danielebarchiesi@0 145 <p>
danielebarchiesi@0 146 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
danielebarchiesi@0 147 </p>
danielebarchiesi@0 148 <p id="copy">
danielebarchiesi@0 149 Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
danielebarchiesi@0 150 Knabben. All rights reserved.
danielebarchiesi@0 151 </p>
danielebarchiesi@0 152 </div>
danielebarchiesi@0 153 </body>
danielebarchiesi@0 154 </html>