crossreference-demo: ckeditor/samples/old/inlineall.html@44d330dccc59

     1 <!DOCTYPE html>

     2 <!--

     3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.

     4 For licensing, see LICENSE.md or http://ckeditor.com/license

     5 -->

     6 <html>

     7 <head>

     8 	<meta charset="utf-8">

     9 	<title>Massive inline editing &mdash; CKEditor Sample</title>

    10 	<script src="../../ckeditor.js"></script>

    11 	<script>

    13 		// This code is generally not necessary, but it is here to demonstrate

    14 		// how to customize specific editor instances on the fly. This fits well

    15 		// this demo because we have editable elements (like headers) that

    16 		// require less features.

    18 		// The "instanceCreated" event is fired for every editor instance created.

    19 		CKEDITOR.on( 'instanceCreated', function( event ) {

    20 			var editor = event.editor,

    21 				element = editor.element;

    23 			// Customize editors for headers and tag list.

    24 			// These editors don't need features like smileys, templates, iframes etc.

    25 			if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {

    26 				// Customize the editor configurations on "configLoaded" event,

    27 				// which is fired after the configuration file loading and

    28 				// execution. This makes it possible to change the

    29 				// configurations before the editor initialization takes place.

    30 				editor.on( 'configLoaded', function() {

    32 					// Remove unnecessary plugins to make the editor simpler.

    33 					editor.config.removePlugins = 'colorbutton,find,flash,font,' +

    34 						'forms,iframe,image,newpage,removeformat,' +

    35 						'smiley,specialchar,stylescombo,templates';

    37 					// Rearrange the layout of the toolbar.

    38 					editor.config.toolbarGroups = [

    39 						{ name: 'editing',		groups: [ 'basicstyles', 'links' ] },

    40 						{ name: 'undo' },

    41 						{ name: 'clipboard',	groups: [ 'selection', 'clipboard' ] },

    42 						{ name: 'about' }

    43 					];

    44 				});

    45 			}

    46 		});

    48 	</script>

    49 	<link href="sample.css" rel="stylesheet">

    50 	<style>

    52 		/* The following styles are just to make the page look nice. */

    54 		/* Workaround to show Arial Black in Firefox. */

    55 		@font-face

    56 		{

    57 			font-family: 'arial-black';

    58 			src: local('Arial Black');

    59 		}

    61 		*[contenteditable="true"]

    62 		{

    63 			padding: 10px;

    64 		}

    66 		#container

    67 		{

    68 			width: 960px;

    69 			margin: 30px auto 0;

    70 		}

    72 		#header

    73 		{

    74 			overflow: hidden;

    75 			padding: 0 0 30px;

    76 			border-bottom: 5px solid #05B2D2;

    77 			position: relative;

    78 		}

    80 		#headerLeft,

    81 		#headerRight

    82 		{

    83 			width: 49%;

    84 			overflow: hidden;

    85 		}

    87 		#headerLeft

    88 		{

    89 			float: left;

    90 			padding: 10px 1px 1px;

    91 		}

    93 		#headerLeft h2,

    94 		#headerLeft h3

    95 		{

    96 			text-align: right;

    97 			margin: 0;

    98 			overflow: hidden;

    99 			font-weight: normal;

   100 		}

   102 		#headerLeft h2

   103 		{

   104 			font-family: "Arial Black",arial-black;

   105 			font-size: 4.6em;

   106 			line-height: 1.1;

   107 			text-transform: uppercase;

   108 		}

   110 		#headerLeft h3

   111 		{

   112 			font-size: 2.3em;

   113 			line-height: 1.1;

   114 			margin: .2em 0 0;

   115 			color: #666;

   116 		}

   118 		#headerRight

   119 		{

   120 			float: right;

   121 			padding: 1px;

   122 		}

   124 		#headerRight p

   125 		{

   126 			line-height: 1.8;

   127 			text-align: justify;

   128 			margin: 0;

   129 		}

   131 		#headerRight p + p

   132 		{

   133 			margin-top: 20px;

   134 		}

   136 		#headerRight > div

   137 		{

   138 			padding: 20px;

   139 			margin: 0 0 0 30px;

   140 			font-size: 1.4em;

   141 			color: #666;

   142 		}

   144 		#columns

   145 		{

   146 			color: #333;

   147 			overflow: hidden;

   148 			padding: 20px 0;

   149 		}

   151 		#columns > div

   152 		{

   153 			float: left;

   154 			width: 33.3%;

   155 		}

   157 		#columns #column1 > div

   158 		{

   159 			margin-left: 1px;

   160 		}

   162 		#columns #column3 > div

   163 		{

   164 			margin-right: 1px;

   165 		}

   167 		#columns > div > div

   168 		{

   169 			margin: 0px 10px;

   170 			padding: 10px 20px;

   171 		}

   173 		#columns blockquote

   174 		{

   175 			margin-left: 15px;

   176 		}

   178 		#tagLine

   179 		{

   180 			border-top: 5px solid #05B2D2;

   181 			padding-top: 20px;

   182 		}

   184 		#taglist {

   185 			display: inline-block;

   186 			margin-left: 20px;

   187 			font-weight: bold;

   188 			margin: 0 0 0 20px;

   189 		}

   191 	</style>

   192 </head>

   193 <body>

   194 <div>

   195 	<h1 class="samples"><a href="index.html">CKEditor Samples</a> &raquo; Massive inline editing</h1>

   196 	<div class="warning deprecated">

   197 		This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/inline.html">brand new version in CKEditor SDK</a>.

   198 	</div>

   199 	<div class="description">

   200 		<p>This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with <strong>contentEditable</strong> attribute set to value <strong>true</strong>:</p>

   201 		<pre class="samples">&lt;div <strong>contenteditable="true</strong>" &gt; ... &lt;/div&gt;</pre>

   202 		<p>Click inside of any element below to start editing.</p>

   203 	</div>

   204 </div>

   205 <div id="container">

   206 	<div id="header">

   207 		<div id="headerLeft">

   208 			<h2 id="sampleTitle" contenteditable="true">

   209 				CKEditor<br> Goes Inline!

   210 			</h2>

   211 			<h3 contenteditable="true">

   212 				Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.

   213 			</h3>

   214 		</div>

   215 		<div id="headerRight">

   216 			<div contenteditable="true">

   217 				<p>

   218 					Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

   219 				</p>

   220 				<p>

   221 					Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.

   222 				</p>

   223 			</div>

   224 		</div>

   225 	</div>

   226 	<div id="columns">

   227 		<div id="column1">

   228 			<div contenteditable="true">

   229 				<h3>

   230 					Fusce vitae porttitor

   231 				</h3>

   232 				<p>

   233 					<strong>

   234 						Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.

   235 					</strong>

   236 				</p>

   237 				<p>

   238 					Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a href="http://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat volutpat.

   239 				</p>

   240 				<blockquote>

   241 					<p>

   242 						Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.

   243 						Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum

   244 					</p>

   245 				</blockquote>

   246 				<blockquote>

   247 					<p>

   248 						Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.

   249 					</p>

   250 				</blockquote>

   251 				<p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>

   252 				<p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>

   253 			</div>

   254 		</div>

   255 		<div id="column2">

   256 			<div contenteditable="true">

   257 				<h3>

   258 					Integer condimentum sit amet

   259 				</h3>

   260 				<p>

   261 					<strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>

   262 					Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>

   263 				<p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>

   264 				<p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>

   265 			</div>

   266 			<div contenteditable="true">

   267 				<h3>

   268 					Praesent wisi accumsan sit amet nibh

   269 				</h3>

   270 				<p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>

   271 				<p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="http://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>

   272 				<p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>

   273 			</div>

   274 		</div>

   275 		<div id="column3">

   276 			<div contenteditable="true">

   277 				<p>

   278 					<img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">

   279 				</p>

   280 				<p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>

   281 				<h3>

   282 					Nullam laoreet vel consectetuer tellus suscipit

   283 				</h3>

   284 				<ul>

   285 					<li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>

   286 					<li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>

   287 					<li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>

   288 				</ul>

   289 				<p>Quisque justo neque, mattis sed, <a href="http://ckeditor.com/">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>

   290 				<p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>

   291 				<p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>

   292 			</div>

   293 		</div>

   294 	</div>

   295 	<div id="tagLine">

   296 		Tags of this article:

   297 		<p id="taglist" contenteditable="true">

   298 			inline, editing, floating, CKEditor

   299 		</p>

   300 	</div>

   301 </div>

   302 <div id="footer">

   303 	<hr>

   304 	<p>

   305 		CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">

   306 			http://ckeditor.com</a>

   307 	</p>

   308 	<p id="copy">

   309 		Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a>

   310 		- Frederico Knabben. All rights reserved.

   311 	</p>

   312 </div>

   313 </body>

   314 </html>

author	indvd00m (gotoindvdum[at]gmail[dot]com)
	Thu, 15 Dec 2016 18:10:20 +0300
changeset 0	44d330dccc59
permissions	-rw-r--r--