285 lines
5.9 KiB
HTML
285 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
|
|
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Indent DEV sample</title>
|
|
<script src="../../../ckeditor.js"></script>
|
|
<style>
|
|
body {
|
|
padding: 20px;
|
|
margin: 0;
|
|
}
|
|
.editors {
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin: 0px auto;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
box-sizing: content-box;
|
|
|
|
background: #eee;
|
|
}
|
|
.editors li {
|
|
width: 50%;
|
|
margin: 0;
|
|
padding: 10px;
|
|
float: left;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
.editors li:nth-child(2n) {
|
|
background: #D4E59A;
|
|
}
|
|
#menu {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 20px;
|
|
padding: 5px;
|
|
border: 1px solid #aaa;
|
|
background: #eee;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p id="menu">
|
|
<a href="#listnblock">List & Block</a>,
|
|
<a href="#classes">Classes</a>,
|
|
<a href="#list">List</a>,
|
|
<a href="#block">Block</a>,
|
|
<a href="#br">ENTER_BR</a>
|
|
</p>
|
|
|
|
<h1 class="samples">Indent DEV sample</h1>
|
|
<h2 id="listnblock">List & Block</h2>
|
|
<ul class="editors">
|
|
<li>
|
|
<textarea cols="80" id="editor1" rows="10">
|
|
<p>xx</p>
|
|
<ul>
|
|
<li>x</li>
|
|
<li>y</li>
|
|
</ul>
|
|
<p>xx</p>
|
|
|
|
<br>
|
|
|
|
<ul><li><ol><li>xx</li></ol></li><li>yy</li></ul>
|
|
</textarea>
|
|
</li>
|
|
<li>
|
|
<pre id="editor1_out"></pre>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2 id="classes">Indent classes</h2>
|
|
<ul class="editors">
|
|
<li>
|
|
<textarea cols="80" id="editor2" rows="10">
|
|
<ul>
|
|
<li>a</li>
|
|
<li>
|
|
b
|
|
<ol>
|
|
<li>inner</li>
|
|
</ol>
|
|
</li>
|
|
<li>c</li>
|
|
</ul>
|
|
<p>moo</p>
|
|
</textarea>
|
|
</li>
|
|
<li>
|
|
<pre id="editor2_out"></pre>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2 id="list">List only</h2>
|
|
<ul class="editors">
|
|
<li>
|
|
<textarea cols="80" id="editor3" rows="10">
|
|
<ul>
|
|
<li>a</li>
|
|
<li>
|
|
b
|
|
<ol>
|
|
<li>inner</li>
|
|
</ol>
|
|
</li>
|
|
<li>c</li>
|
|
</ul>
|
|
<p>moo</p>
|
|
</textarea>
|
|
</li>
|
|
<li>
|
|
<pre id="editor3_out"></pre>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2 id="block">Block only</h2>
|
|
<ul class="editors">
|
|
<li>
|
|
<textarea cols="80" id="editor4" rows="10">
|
|
<ul>
|
|
<li>a</li>
|
|
<li>
|
|
b
|
|
<ol>
|
|
<li>inner</li>
|
|
</ol>
|
|
</li>
|
|
<li>c</li>
|
|
</ul>
|
|
<p>moo</p>
|
|
</textarea>
|
|
</li>
|
|
<li>
|
|
<pre id="editor4_out"></pre>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2 id="br">CKEDITOR.ENTER_BR</h2>
|
|
<ul class="editors">
|
|
<li>
|
|
<textarea cols="80" id="editor5" rows="10">
|
|
Text
|
|
<br>
|
|
<ul>
|
|
<li>a</li>
|
|
<li>b</li>
|
|
</ul>
|
|
</textarea>
|
|
</li>
|
|
<li>
|
|
<pre id="editor5_out"></pre>
|
|
</li>
|
|
</ul>
|
|
<script>
|
|
|
|
var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';
|
|
|
|
CKEDITOR.config.indentOffset = 10;
|
|
CKEDITOR.addCss( '\
|
|
.i1{ margin-left: 10px}\
|
|
.i2{ margin-left: 20px}\
|
|
.i3{ margin-left: 30px}' );
|
|
|
|
function showData( event ) {
|
|
CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );
|
|
}
|
|
|
|
function browserHtmlFix( html ) {
|
|
if ( CKEDITOR.env.ie && ( document.documentMode || CKEDITOR.env.version ) < 9 ) {
|
|
// Fix output base href on anchored link.
|
|
html = html.replace( /href="(.*?)#(.*?)"/gi,
|
|
function( m, base, anchor ) {
|
|
if ( base == window.location.href.replace( window.location.hash, '' ) )
|
|
return 'href="#' + anchor + '"';
|
|
|
|
return m;
|
|
} );
|
|
|
|
// Fix output line break after HR.
|
|
html = html.replace( /(<HR>)\r\n/gi, function( m, hr ) { return hr; } );
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
function getHtmlWithSelection( editorOrElement, root ) {
|
|
var isEditor = editorOrElement instanceof CKEDITOR.editor,
|
|
element = isEditor ? editorOrElement.editable() : editorOrElement;
|
|
|
|
root = isEditor ? element :
|
|
root instanceof CKEDITOR.dom.document ?
|
|
root.getBody() : root || CKEDITOR.document.getBody();
|
|
|
|
function replaceWithBookmark( match, startOrEnd ) {
|
|
var bookmark;
|
|
switch( startOrEnd ) {
|
|
case 'S' :
|
|
bookmark = '[';
|
|
break;
|
|
case 'E' :
|
|
bookmark = ']';
|
|
break;
|
|
case 'C' :
|
|
bookmark = '^';
|
|
break;
|
|
}
|
|
return bookmark;
|
|
}
|
|
|
|
// Hack: force remove the filling char hack in Webkit.
|
|
isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );
|
|
|
|
var sel = isEditor ? editorOrElement.getSelection()
|
|
: new CKEDITOR.dom.selection( root );
|
|
|
|
var doc = sel.document;
|
|
var ranges = sel.getRanges(),
|
|
range;
|
|
|
|
var bms = [];
|
|
var iter = ranges.createIterator();
|
|
while( range = iter.getNextRange() )
|
|
bms.push( range.createBookmark( 1 ) );
|
|
|
|
var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );
|
|
html = html.replace( /<span\b[^>]*?id="?cke_bm_\d+(\w)"?\b[^>]*?>.*?<\/span>/gi,
|
|
replaceWithBookmark );
|
|
|
|
for ( var i = 0, bm; i < bms.length; i++ ) {
|
|
bm = bms[ i ];
|
|
var start = doc.getById( bm.startNode ),
|
|
end = doc.getById( bm.endNode );
|
|
|
|
start && start.remove();
|
|
end && end.remove();
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
CKEDITOR.on( 'instanceReady', function ( event ) {
|
|
var editor = event.editor;
|
|
|
|
showData.call( editor );
|
|
|
|
editor.on( 'afterCommandExec', showData, editor );
|
|
});
|
|
|
|
CKEDITOR.replace( 'editor1', {
|
|
plugins: plugins
|
|
} );
|
|
|
|
CKEDITOR.replace( 'editor2', {
|
|
plugins: plugins,
|
|
indentClasses: [ 'i1', 'i2', 'i3' ]
|
|
} );
|
|
|
|
CKEDITOR.replace( 'editor3', {
|
|
plugins: plugins,
|
|
removePlugins: 'indentblock'
|
|
} );
|
|
|
|
CKEDITOR.replace( 'editor4', {
|
|
plugins: plugins,
|
|
removePlugins: 'indentlist'
|
|
} );
|
|
|
|
CKEDITOR.replace( 'editor5', {
|
|
plugins: plugins,
|
|
enterMode: CKEDITOR.ENTER_BR
|
|
} );
|
|
</script>
|
|
</body>
|
|
</html>
|