3 Copyright (c) 2003-2017, 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;
35 box-sizing: border-box;
37 .editors li:nth-child(
2n) {
45 border:
1px solid #aaa;
53 <a href=
"#listnblock">List
& Block
</a>,
54 <a href=
"#classes">Classes
</a>,
55 <a href=
"#list">List
</a>,
56 <a href=
"#block">Block
</a>,
57 <a href=
"#br">ENTER_BR
</a>
60 <h1 class=
"samples">Indent DEV sample
</h1>
61 <h2 id=
"listnblock">List
& Block
</h2>
64 <textarea cols=
"80" id=
"editor1" rows=
"10">
74 <ul><li><ol><li>xx
</li></ol></li><li>yy
</li></ul>
78 <pre id=
"editor1_out"></pre>
82 <h2 id=
"classes">Indent classes
</h2>
85 <textarea cols=
"80" id=
"editor2" rows=
"10">
100 <pre id=
"editor2_out"></pre>
104 <h2 id=
"list">List only
</h2>
107 <textarea cols=
"80" id=
"editor3" rows=
"10">
122 <pre id=
"editor3_out"></pre>
126 <h2 id=
"block">Block only
</h2>
129 <textarea cols=
"80" id=
"editor4" rows=
"10">
144 <pre id=
"editor4_out"></pre>
148 <h2 id=
"br">CKEDITOR.ENTER_BR
</h2>
151 <textarea cols=
"80" id=
"editor5" rows=
"10">
161 <pre id=
"editor5_out"></pre>
166 var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';
168 CKEDITOR.config.indentOffset =
10;
170 .i1{ margin-left:
10px}\
171 .i2{ margin-left:
20px}\
172 .i3{ margin-left:
30px}' );
174 function showData( event ) {
175 CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );
178 function browserHtmlFix( html ) {
179 if ( CKEDITOR.env.ie && ( document.documentMode || CKEDITOR.env.version ) <
9 ) {
180 // Fix output base href on anchored link.
181 html = html.replace( /
href="(.*?)#(.*?)"/gi,
182 function( m, base, anchor ) {
183 if ( base == window.location.href.replace( window.location.hash, '' ) )
184 return '
href="#' + anchor + '"';
189 // Fix output line break after HR.
190 html = html.replace( /(
<HR>)\r\n/gi, function( m, hr ) { return hr; } );
196 function getHtmlWithSelection( editorOrElement, root ) {
197 var isEditor = editorOrElement instanceof CKEDITOR.editor,
198 element = isEditor ? editorOrElement.editable() : editorOrElement;
200 root = isEditor ? element :
201 root instanceof CKEDITOR.dom.document ?
202 root.getBody() : root || CKEDITOR.document.getBody();
204 function replaceWithBookmark( match, startOrEnd ) {
206 switch( startOrEnd ) {
220 // Hack: force remove the filling char hack in Webkit.
221 isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );
223 var sel = isEditor ? editorOrElement.getSelection()
224 : new CKEDITOR.dom.selection( root );
226 var doc = sel.document;
227 var ranges = sel.getRanges(),
231 var iter = ranges.createIterator();
232 while( range = iter.getNextRange() )
233 bms.push( range.createBookmark(
1 ) );
235 var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );
236 html = html.replace( /
<span\b[^
>]*?
id="?cke_bm_\d+(\w)"?\b[^
>]*
?>.*?<\/span
>/gi,
237 replaceWithBookmark );
239 for ( var i =
0, bm; i < bms.length; i++ ) {
241 var start = doc.getById( bm.startNode ),
242 end = doc.getById( bm.endNode );
244 start && start.remove();
251 CKEDITOR.on( 'instanceReady', function ( event ) {
252 var editor = event.editor;
254 showData.call( editor );
256 editor.on( 'afterCommandExec', showData, editor );
259 CKEDITOR.replace( 'editor1', {
263 CKEDITOR.replace( 'editor2', {
265 indentClasses: [ 'i1', 'i2', 'i3' ]
268 CKEDITOR.replace( 'editor3', {
270 removePlugins: 'indentblock'
273 CKEDITOR.replace( 'editor4', {
275 removePlugins: 'indentlist'
278 CKEDITOR.replace( 'editor5', {
280 enterMode: CKEDITOR.ENTER_BR