3
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
4
For licensing, see LICENSE.md or http://ckeditor.com/license
9
<title>Indent DEV sample</title>
10
<script src="../../../ckeditor.js"></script>
21
list-style-type: none;
25
box-sizing: content-box;
26
-moz-box-sizing: content-box;
27
-webkit-box-sizing: content-box;
37
box-sizing: border-box;
38
-moz-box-sizing: border-box;
39
-webkit-box-sizing: border-box;
42
.editors li:nth-child(2n) {
50
border: 1px solid #aaa;
58
<a href="#listnblock">List & Block</a>,
59
<a href="#classes">Classes</a>,
60
<a href="#list">List</a>,
61
<a href="#block">Block</a>,
62
<a href="#br">ENTER_BR</a>
65
<h1 class="samples">Indent DEV sample</h1>
66
<h2 id="listnblock">List & Block</h2>
69
<textarea cols="80" id="editor1" rows="10">
79
<ul><li><ol><li>xx</li></ol></li><li>yy</li></ul>
83
<pre id="editor1_out"></pre>
87
<h2 id="classes">Indent classes</h2>
90
<textarea cols="80" id="editor2" rows="10">
105
<pre id="editor2_out"></pre>
109
<h2 id="list">List only</h2>
112
<textarea cols="80" id="editor3" rows="10">
127
<pre id="editor3_out"></pre>
131
<h2 id="block">Block only</h2>
134
<textarea cols="80" id="editor4" rows="10">
149
<pre id="editor4_out"></pre>
153
<h2 id="br">CKEDITOR.ENTER_BR</h2>
156
<textarea cols="80" id="editor5" rows="10">
166
<pre id="editor5_out"></pre>
171
var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';
173
CKEDITOR.config.indentOffset = 10;
175
.i1{ margin-left: 10px}\
176
.i2{ margin-left: 20px}\
177
.i3{ margin-left: 30px}' );
179
function showData( event ) {
180
CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );
183
function browserHtmlFix( html ) {
184
if ( CKEDITOR.env.ie && ( document.documentMode || CKEDITOR.env.version ) < 9 ) {
185
// Fix output base href on anchored link.
186
html = html.replace( /href="(.*?)#(.*?)"/gi,
187
function( m, base, anchor ) {
188
if ( base == window.location.href.replace( window.location.hash, '' ) )
189
return 'href="#' + anchor + '"';
194
// Fix output line break after HR.
195
html = html.replace( /(<HR>)\r\n/gi, function( m, hr ) { return hr; } );
201
function getHtmlWithSelection( editorOrElement, root ) {
202
var isEditor = editorOrElement instanceof CKEDITOR.editor,
203
element = isEditor ? editorOrElement.editable() : editorOrElement;
205
root = isEditor ? element :
206
root instanceof CKEDITOR.dom.document ?
207
root.getBody() : root || CKEDITOR.document.getBody();
209
function replaceWithBookmark( match, startOrEnd ) {
211
switch( startOrEnd ) {
225
// Hack: force remove the filling char hack in Webkit.
226
isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );
228
var sel = isEditor ? editorOrElement.getSelection()
229
: new CKEDITOR.dom.selection( root );
231
var doc = sel.document;
232
var ranges = sel.getRanges(),
236
var iter = ranges.createIterator();
237
while( range = iter.getNextRange() )
238
bms.push( range.createBookmark( 1 ) );
240
var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );
241
html = html.replace( /<span\b[^>]*?id="?cke_bm_\d+(\w)"?\b[^>]*?>.*?<\/span>/gi,
242
replaceWithBookmark );
244
for ( var i = 0, bm; i < bms.length; i++ ) {
246
var start = doc.getById( bm.startNode ),
247
end = doc.getById( bm.endNode );
249
start && start.remove();
256
CKEDITOR.on( 'instanceReady', function ( event ) {
257
var editor = event.editor;
259
showData.call( editor );
261
editor.on( 'afterCommandExec', showData, editor );
264
CKEDITOR.replace( 'editor1', {
268
CKEDITOR.replace( 'editor2', {
270
indentClasses: [ 'i1', 'i2', 'i3' ]
273
CKEDITOR.replace( 'editor3', {
275
removePlugins: 'indentblock'
278
CKEDITOR.replace( 'editor4', {
280
removePlugins: 'indentlist'
283
CKEDITOR.replace( 'editor5', {
285
enterMode: CKEDITOR.ENTER_BR