2021-07-10 19:18:17 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!--
|
|
|
|
|
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
|
|
|
|
|
For licensing, see LICENSE.md or http://ckeditor.com/license
|
|
|
|
|
-->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2021-07-26 17:42:43 -04:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Massive inline editing — CKEditor Sample</title>
|
|
|
|
|
<script src="../ckeditor.js"></script>
|
|
|
|
|
<script>
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
// This code is generally not necessary, but it is here to demonstrate
|
|
|
|
|
// how to customize specific editor instances on the fly. This fits well
|
|
|
|
|
// this demo because we have editable elements (like headers) that
|
|
|
|
|
// require less features.
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
// The "instanceCreated" event is fired for every editor instance created.
|
|
|
|
|
CKEDITOR.on('instanceCreated', function (event) {
|
|
|
|
|
var editor = event.editor,
|
|
|
|
|
element = editor.element;
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
// Customize editors for headers and tag list.
|
|
|
|
|
// These editors don't need features like smileys, templates, iframes etc.
|
|
|
|
|
if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'taglist') {
|
|
|
|
|
// Customize the editor configurations on "configLoaded" event,
|
|
|
|
|
// which is fired after the configuration file loading and
|
|
|
|
|
// execution. This makes it possible to change the
|
|
|
|
|
// configurations before the editor initialization takes place.
|
|
|
|
|
editor.on('configLoaded', function () {
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
// Remove unnecessary plugins to make the editor simpler.
|
|
|
|
|
editor.config.removePlugins = 'colorbutton,find,flash,font,' +
|
|
|
|
|
'forms,iframe,image,newpage,removeformat,' +
|
|
|
|
|
'smiley,specialchar,stylescombo,templates';
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
// Rearrange the layout of the toolbar.
|
|
|
|
|
editor.config.toolbarGroups = [
|
|
|
|
|
{name: 'editing', groups: ['basicstyles', 'links']},
|
|
|
|
|
{name: 'undo'},
|
|
|
|
|
{name: 'clipboard', groups: ['selection', 'clipboard']},
|
|
|
|
|
{name: 'about'}
|
|
|
|
|
];
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
</script>
|
|
|
|
|
<link href="sample.css" rel="stylesheet">
|
|
|
|
|
<style>
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
/* The following styles are just to make the page look nice. */
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
/* Workaround to show Arial Black in Firefox. */
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: 'arial-black';
|
|
|
|
|
src: local('Arial Black');
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
*[contenteditable="true"] {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#container {
|
|
|
|
|
width: 960px;
|
|
|
|
|
margin: 30px auto 0;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#header {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: 0 0 30px;
|
|
|
|
|
border-bottom: 5px solid #05B2D2;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerLeft,
|
|
|
|
|
#headerRight {
|
|
|
|
|
width: 49%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerLeft {
|
|
|
|
|
float: left;
|
|
|
|
|
padding: 10px 1px 1px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerLeft h2,
|
|
|
|
|
#headerLeft h3 {
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerLeft h2 {
|
|
|
|
|
font-family: "Arial Black", arial-black;
|
|
|
|
|
font-size: 4.6em;
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerLeft h3 {
|
|
|
|
|
font-size: 2.3em;
|
|
|
|
|
line-height: 1.1;
|
|
|
|
|
margin: .2em 0 0;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerRight {
|
|
|
|
|
float: right;
|
|
|
|
|
padding: 1px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerRight p {
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
text-align: justify;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerRight p + p {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#headerRight > div {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
margin: 0 0 0 30px;
|
|
|
|
|
font-size: 1.4em;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#columns {
|
|
|
|
|
color: #333;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: 20px 0;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#columns > div {
|
|
|
|
|
float: left;
|
|
|
|
|
width: 33.3%;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#columns #column1 > div {
|
|
|
|
|
margin-left: 1px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#columns #column3 > div {
|
|
|
|
|
margin-right: 1px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#columns > div > div {
|
|
|
|
|
margin: 0px 10px;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#columns blockquote {
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#tagLine {
|
|
|
|
|
border-top: 5px solid #05B2D2;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
#taglist {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin: 0 0 0 20px;
|
|
|
|
|
}
|
2021-07-10 19:18:17 +01:00
|
|
|
|
2021-07-26 17:42:43 -04:00
|
|
|
</style>
|
2021-07-10 19:18:17 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
2021-07-26 17:42:43 -04:00
|
|
|
<h1 class="samples"><a href="index.html">CKEditor Samples</a> » Massive inline editing</h1>
|
|
|
|
|
<div class="description">
|
|
|
|
|
<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>
|
|
|
|
|
<pre class="samples"><div <strong>contenteditable="true</strong>" > ... </div></pre>
|
|
|
|
|
<p>Click inside of any element below to start editing.</p>
|
|
|
|
|
</div>
|
2021-07-10 19:18:17 +01:00
|
|
|
</div>
|
|
|
|
|
<div id="container">
|
2021-07-26 17:42:43 -04:00
|
|
|
<div id="header">
|
|
|
|
|
<div id="headerLeft">
|
|
|
|
|
<h2 id="sampleTitle" contenteditable="true">
|
|
|
|
|
CKEditor<br> Goes Inline!
|
|
|
|
|
</h2>
|
|
|
|
|
<h3 contenteditable="true">
|
|
|
|
|
Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="headerRight">
|
|
|
|
|
<div contenteditable="true">
|
|
|
|
|
<p>
|
|
|
|
|
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
|
|
|
|
|
Maecenas malesuada elit lectus felis, malesuada ultricies.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
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.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="columns">
|
|
|
|
|
<div id="column1">
|
|
|
|
|
<div contenteditable="true">
|
|
|
|
|
<h3>
|
|
|
|
|
Fusce vitae porttitor
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
<strong>
|
|
|
|
|
Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
|
|
|
|
|
</strong>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
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.
|
|
|
|
|
</p>
|
|
|
|
|
<blockquote>
|
|
|
|
|
<p>
|
|
|
|
|
Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
|
|
|
|
|
Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
|
|
|
|
|
</p>
|
|
|
|
|
</blockquote>
|
|
|
|
|
<blockquote>
|
|
|
|
|
<p>
|
|
|
|
|
Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla.
|
|
|
|
|
Phasellus ultrices, velit ac arcu.
|
|
|
|
|
</p>
|
|
|
|
|
</blockquote>
|
|
|
|
|
<p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
|
|
|
|
|
<p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="column2">
|
|
|
|
|
<div contenteditable="true">
|
|
|
|
|
<h3>
|
|
|
|
|
Integer condimentum sit amet
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
<strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
|
|
|
|
|
Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus
|
|
|
|
|
pulvinar mollis.</p>
|
|
|
|
|
<p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac,
|
|
|
|
|
felis.</p>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<div contenteditable="true">
|
|
|
|
|
<h3>
|
|
|
|
|
Praesent wisi accumsan sit amet nibh
|
|
|
|
|
</h3>
|
|
|
|
|
<p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="column3">
|
|
|
|
|
<div contenteditable="true">
|
|
|
|
|
<p>
|
|
|
|
|
<img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">
|
|
|
|
|
</p>
|
|
|
|
|
<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>
|
|
|
|
|
<h3>
|
|
|
|
|
Nullam laoreet vel consectetuer tellus suscipit
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
|
|
|
|
|
<li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies,
|
|
|
|
|
hendrerit wisi.
|
|
|
|
|
</li>
|
|
|
|
|
<li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tagLine">
|
|
|
|
|
Tags of this article:
|
|
|
|
|
<p id="taglist" contenteditable="true">
|
|
|
|
|
inline, editing, floating, CKEditor
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2021-07-10 19:18:17 +01:00
|
|
|
</div>
|
|
|
|
|
<div id="footer">
|
2021-07-26 17:42:43 -04:00
|
|
|
<hr>
|
|
|
|
|
<p>
|
|
|
|
|
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
|
|
|
|
|
http://ckeditor.com</a>
|
|
|
|
|
</p>
|
|
|
|
|
<p id="copy">
|
|
|
|
|
Copyright © 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a>
|
|
|
|
|
- Frederico Knabben. All rights reserved.
|
|
|
|
|
</p>
|
2021-07-10 19:18:17 +01:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
