[perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git] / sources / plugins / indent / dev / indent.html

<!DOCTYPE html>\r
<!--\r
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.md or http://ckeditor.com/license\r
-->\r
<html>\r
<head>\r
	<meta charset="utf-8">\r
	<title>Indent DEV sample</title>\r
	<script src="../../../ckeditor.js"></script>\r
	<style>\r
		body {\r
			padding: 20px;\r
			margin: 0;\r
		}\r
		.editors {\r
			display: block;\r
			overflow: hidden;\r
			width: 100%;\r
			margin: 0px auto;\r
			list-style-type: none;\r
			margin: 0;\r
			padding: 0;\r
\r
			box-sizing: content-box;\r
\r
			background: #eee;\r
		}\r
		.editors li {\r
			width: 50%;\r
			margin: 0;\r
			padding: 10px;\r
			float: left;\r
\r
			box-sizing: border-box;\r
		}\r
		.editors li:nth-child(2n) {\r
			background: #D4E59A;\r
		}\r
		#menu {\r
			position: fixed;\r
			top: 0;\r
			right: 20px;\r
			padding: 5px;\r
			border: 1px solid #aaa;\r
			background: #eee;\r
		}\r
\r
	</style>\r
</head>\r
<body>\r
	<p id="menu">\r
		<a href="#listnblock">List &amp; Block</a>,\r
		<a href="#classes">Classes</a>,\r
		<a href="#list">List</a>,\r
		<a href="#block">Block</a>,\r
		<a href="#br">ENTER_BR</a>\r
	</p>\r
\r
	<h1 class="samples">Indent DEV sample</h1>\r
	<h2 id="listnblock">List &amp; Block</h2>\r
	<ul class="editors">\r
		<li>\r
			<textarea cols="80" id="editor1" rows="10">\r
				<p>xx</p>\r
				<ul>\r
					<li>x</li>\r
					<li>y</li>\r
				</ul>\r
				<p>xx</p>\r
\r
				<br>\r
\r
				<ul><li><ol><li>xx</li></ol></li><li>yy</li></ul>\r
			</textarea>\r
		</li>\r
		<li>\r
			<pre id="editor1_out"></pre>\r
		</li>\r
	</ul>\r
\r
	<h2 id="classes">Indent classes</h2>\r
	<ul class="editors">\r
		<li>\r
			<textarea cols="80" id="editor2" rows="10">\r
				<ul>\r
					<li>a</li>\r
					<li>\r
						b\r
						<ol>\r
							<li>inner</li>\r
						</ol>\r
					</li>\r
					<li>c</li>\r
				</ul>\r
				<p>moo</p>\r
			</textarea>\r
		</li>\r
		<li>\r
			<pre id="editor2_out"></pre>\r
		</li>\r
	</ul>\r
\r
	<h2 id="list">List only</h2>\r
	<ul class="editors">\r
		<li>\r
			<textarea cols="80" id="editor3" rows="10">\r
				<ul>\r
					<li>a</li>\r
					<li>\r
						b\r
						<ol>\r
							<li>inner</li>\r
						</ol>\r
					</li>\r
					<li>c</li>\r
				</ul>\r
				<p>moo</p>\r
			</textarea>\r
		</li>\r
		<li>\r
			<pre id="editor3_out"></pre>\r
		</li>\r
	</ul>\r
\r
	<h2 id="block">Block only</h2>\r
	<ul class="editors">\r
		<li>\r
			<textarea cols="80" id="editor4" rows="10">\r
				<ul>\r
					<li>a</li>\r
					<li>\r
						b\r
						<ol>\r
							<li>inner</li>\r
						</ol>\r
					</li>\r
					<li>c</li>\r
				</ul>\r
				<p>moo</p>\r
			</textarea>\r
		</li>\r
		<li>\r
			<pre id="editor4_out"></pre>\r
		</li>\r
	</ul>\r
\r
	<h2 id="br">CKEDITOR.ENTER_BR</h2>\r
	<ul class="editors">\r
		<li>\r
			<textarea cols="80" id="editor5" rows="10">\r
				Text\r
				<br>\r
				<ul>\r
					<li>a</li>\r
					<li>b</li>\r
				</ul>\r
			</textarea>\r
		</li>\r
		<li>\r
			<pre id="editor5_out"></pre>\r
		</li>\r
	</ul>\r
	<script>\r
\r
		var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';\r
\r
		CKEDITOR.config.indentOffset = 10;\r
		CKEDITOR.addCss( '\\r
			.i1{ margin-left: 10px}\\r
			.i2{ margin-left: 20px}\\r
			.i3{ margin-left: 30px}' );\r
\r
		function showData( event ) {\r
			CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );\r
		}\r
\r
		function browserHtmlFix( html ) {\r
			if ( CKEDITOR.env.ie && ( document.documentMode || CKEDITOR.env.version ) < 9 ) {\r
				// Fix output base href on anchored link.\r
				html = html.replace( /href="(.*?)#(.*?)"/gi,\r
				   function( m, base, anchor ) {\r
					   if ( base == window.location.href.replace( window.location.hash, '' ) )\r
						   return 'href="#' + anchor + '"';\r
\r
					   return m;\r
				   } );\r
\r
				// Fix output line break after HR.\r
				html = html.replace( /(<HR>)\r\n/gi, function( m, hr ) { return hr; } );\r
			}\r
\r
			return html;\r
		}\r
\r
		function getHtmlWithSelection( editorOrElement, root ) {\r
			var isEditor = editorOrElement instanceof CKEDITOR.editor,\r
				element =  isEditor ? editorOrElement.editable() : editorOrElement;\r
\r
			root = isEditor ? element :\r
				   root instanceof CKEDITOR.dom.document ?\r
				   root.getBody() : root || CKEDITOR.document.getBody();\r
\r
			function replaceWithBookmark( match, startOrEnd ) {\r
				var bookmark;\r
				switch( startOrEnd ) {\r
					case 'S' :\r
						bookmark = '[';\r
						break;\r
					case 'E' :\r
						bookmark = ']';\r
						break;\r
					case 'C' :\r
						bookmark = '^';\r
						break;\r
				}\r
				return bookmark;\r
			}\r
\r
			// Hack: force remove the filling char hack in Webkit.\r
			isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );\r
\r
			var sel = isEditor ? editorOrElement.getSelection()\r
					  : new CKEDITOR.dom.selection( root );\r
\r
			var doc = sel.document;\r
			var ranges = sel.getRanges(),\r
				range;\r
\r
			var bms = [];\r
			var iter = ranges.createIterator();\r
			while( range = iter.getNextRange() )\r
				bms.push( range.createBookmark( 1 ) );\r
\r
			var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );\r
			html = html.replace( /<span\b[^>]*?id="?cke_bm_\d+(\w)"?\b[^>]*?>.*?<\/span>/gi,\r
								 replaceWithBookmark );\r
\r
			for ( var i = 0, bm; i < bms.length; i++ ) {\r
				bm = bms[ i ];\r
				var start = doc.getById( bm.startNode ),\r
					end = doc.getById( bm.endNode );\r
\r
				start && start.remove();\r
				end && end.remove();\r
			}\r
\r
			return html;\r
		}\r
\r
		CKEDITOR.on( 'instanceReady', function ( event ) {\r
			var editor = event.editor;\r
\r
			showData.call( editor );\r
\r
			editor.on( 'afterCommandExec', showData, editor );\r
		});\r
\r
		CKEDITOR.replace( 'editor1', {\r
			plugins: plugins\r
		} );\r
\r
		CKEDITOR.replace( 'editor2', {\r
			plugins: plugins,\r
			indentClasses: [ 'i1', 'i2', 'i3' ]\r
		} );\r
\r
		CKEDITOR.replace( 'editor3', {\r
			plugins: plugins,\r
			removePlugins: 'indentblock'\r
		} );\r
\r
		CKEDITOR.replace( 'editor4', {\r
			plugins: plugins,\r
			removePlugins: 'indentlist'\r
		} );\r
\r
		CKEDITOR.replace( 'editor5', {\r
			plugins: plugins,\r
			enterMode: CKEDITOR.ENTER_BR\r
		} );\r
	</script>\r
</body>\r
</html>\r
Commit	Line	Data
3332bebe IB	1	<!DOCTYPE html>\r
3332bebe IB	2	<!--\r
317f8f8f	3	Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
3332bebe IB	4	For licensing, see LICENSE.md or http://ckeditor.com/license\r
	5	-->\r
	6	<html>\r
	7	<head>\r
	8	<meta charset="utf-8">\r
	9	<title>Indent DEV sample</title>\r
	10	<script src="../../../ckeditor.js"></script>\r
	11	<style>\r
	12	body {\r
	13	padding: 20px;\r
	14	margin: 0;\r
	15	}\r
	16	.editors {\r
	17	display: block;\r
	18	overflow: hidden;\r
	19	width: 100%;\r
	20	margin: 0px auto;\r
	21	list-style-type: none;\r
	22	margin: 0;\r
	23	padding: 0;\r
	24	\r
	25	box-sizing: content-box;\r
	26	\r
	27	background: #eee;\r
	28	}\r
	29	.editors li {\r
	30	width: 50%;\r
	31	margin: 0;\r
	32	padding: 10px;\r
	33	float: left;\r
	34	\r
	35	box-sizing: border-box;\r
	36	}\r
	37	.editors li:nth-child(2n) {\r
	38	background: #D4E59A;\r
	39	}\r
	40	#menu {\r
	41	position: fixed;\r
	42	top: 0;\r
	43	right: 20px;\r
	44	padding: 5px;\r
	45	border: 1px solid #aaa;\r
	46	background: #eee;\r
	47	}\r
	48	\r
	49	</style>\r
	50	</head>\r
	51	<body>\r
	52	<p id="menu">\r
	53	<a href="#listnblock">List & Block</a>,\r
	54	<a href="#classes">Classes</a>,\r
	55	<a href="#list">List</a>,\r
	56	<a href="#block">Block</a>,\r
	57	<a href="#br">ENTER_BR</a>\r
	58	</p>\r
	59	\r
	60	<h1 class="samples">Indent DEV sample</h1>\r
	61	<h2 id="listnblock">List & Block</h2>\r
	62	<ul class="editors">\r
	63	<li>\r
	64	<textarea cols="80" id="editor1" rows="10">\r
	65	<p>xx</p>\r
	66	<ul>\r
	67	<li>x</li>\r
68	<li>y</li>\r
69	</ul>\r
70	<p>xx</p>\r
71	\r
72	<br>\r
73	\r
74	<ul><li><ol><li>xx</li></ol></li><li>yy</li></ul>\r
75	</textarea>\r
76	</li>\r
77	<li>\r
78	<pre id="editor1_out"></pre>\r
79	</li>\r
80	</ul>\r
81	\r
82	<h2 id="classes">Indent classes</h2>\r
83	<ul class="editors">\r
84	<li>\r
85	<textarea cols="80" id="editor2" rows="10">\r
86	<ul>\r
87	<li>a</li>\r
88	<li>\r
89	b\r
90	<ol>\r
91	<li>inner</li>\r
92	</ol>\r
93	</li>\r
94	<li>c</li>\r
95	</ul>\r
96	<p>moo</p>\r
97	</textarea>\r
98	</li>\r
99	<li>\r
100	<pre id="editor2_out"></pre>\r
101	</li>\r
102	</ul>\r
103	\r
104	<h2 id="list">List only</h2>\r
105	<ul class="editors">\r
106	<li>\r
107	<textarea cols="80" id="editor3" rows="10">\r
108	<ul>\r
109	<li>a</li>\r
110	<li>\r
111	b\r
112	<ol>\r
113	<li>inner</li>\r
114	</ol>\r
115	</li>\r
116	<li>c</li>\r
117	</ul>\r
118	<p>moo</p>\r
119	</textarea>\r
120	</li>\r
121	<li>\r
122	<pre id="editor3_out"></pre>\r
123	</li>\r
124	</ul>\r
125	\r
126	<h2 id="block">Block only</h2>\r
127	<ul class="editors">\r
128	<li>\r
129	<textarea cols="80" id="editor4" rows="10">\r
130	<ul>\r
131	<li>a</li>\r
132	<li>\r
133	b\r
134	<ol>\r
135	<li>inner</li>\r
136	</ol>\r
137	</li>\r
138	<li>c</li>\r
139	</ul>\r
140	<p>moo</p>\r
141	</textarea>\r
142	</li>\r
143	<li>\r
144	<pre id="editor4_out"></pre>\r
145	</li>\r
146	</ul>\r
147	\r
148	<h2 id="br">CKEDITOR.ENTER_BR</h2>\r
149	<ul class="editors">\r
150	<li>\r
151	<textarea cols="80" id="editor5" rows="10">\r
152	Text\r
153	<br>\r
154	<ul>\r
155	<li>a</li>\r
156	<li>b</li>\r
157	</ul>\r
158	</textarea>\r
159	</li>\r
160	<li>\r
161	<pre id="editor5_out"></pre>\r
162	</li>\r
163	</ul>\r
164	<script>\r
165	\r
166	var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';\r
167	\r
168	CKEDITOR.config.indentOffset = 10;\r
169	CKEDITOR.addCss( '\\r
170	.i1{ margin-left: 10px}\\r
171	.i2{ margin-left: 20px}\\r
172	.i3{ margin-left: 30px}' );\r
173	\r
174	function showData( event ) {\r
175	CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );\r
176	}\r
177	\r
178	function browserHtmlFix( html ) {\r
179	if ( CKEDITOR.env.ie && ( document.documentMode \|\| CKEDITOR.env.version ) < 9 ) {\r
180	// Fix output base href on anchored link.\r
181	html = html.replace( /href="(.?)#(.?)"/gi,\r
182	function( m, base, anchor ) {\r
183	if ( base == window.location.href.replace( window.location.hash, '' ) )\r
184	return 'href="#' + anchor + '"';\r
185	\r
186	return m;\r
187	} );\r
188	\r
189	// Fix output line break after HR.\r
190	html = html.replace( /(<HR>)\r\n/gi, function( m, hr ) { return hr; } );\r
191	}\r
192	\r
193	return html;\r
194	}\r
195	\r
196	function getHtmlWithSelection( editorOrElement, root ) {\r
197	var isEditor = editorOrElement instanceof CKEDITOR.editor,\r
198	element = isEditor ? editorOrElement.editable() : editorOrElement;\r
199	\r
200	root = isEditor ? element :\r
201	root instanceof CKEDITOR.dom.document ?\r
202	root.getBody() : root \|\| CKEDITOR.document.getBody();\r
203	\r
204	function replaceWithBookmark( match, startOrEnd ) {\r
205	var bookmark;\r
206	switch( startOrEnd ) {\r
207	case 'S' :\r
208	bookmark = '[';\r
209	break;\r
210	case 'E' :\r
211	bookmark = ']';\r
212	break;\r
213	case 'C' :\r
214	bookmark = '^';\r
215	break;\r
216	}\r
217	return bookmark;\r
218	}\r
219	\r
220	// Hack: force remove the filling char hack in Webkit.\r
221	isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );\r
222	\r
223	var sel = isEditor ? editorOrElement.getSelection()\r
224	: new CKEDITOR.dom.selection( root );\r
225	\r
226	var doc = sel.document;\r
227	var ranges = sel.getRanges(),\r
228	range;\r
229	\r
230	var bms = [];\r
231	var iter = ranges.createIterator();\r
232	while( range = iter.getNextRange() )\r
233	bms.push( range.createBookmark( 1 ) );\r
234	\r
235	var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );\r
236	html = html.replace( /<span\b[^>]?id="?cke_bm_\d+(\w)"?\b[^>]?>.*?<\/span>/gi,\r
237	replaceWithBookmark );\r
238	\r
239	for ( var i = 0, bm; i < bms.length; i++ ) {\r
240	bm = bms[ i ];\r
241	var start = doc.getById( bm.startNode ),\r
242	end = doc.getById( bm.endNode );\r
243	\r
244	start && start.remove();\r
245	end && end.remove();\r
246	}\r
247	\r
248	return html;\r
249	}\r
250	\r
251	CKEDITOR.on( 'instanceReady', function ( event ) {\r
252	var editor = event.editor;\r
253	\r
254	showData.call( editor );\r
255	\r
256	editor.on( 'afterCommandExec', showData, editor );\r
257	});\r
258	\r
259	CKEDITOR.replace( 'editor1', {\r
260	plugins: plugins\r
261	} );\r
262	\r
263	CKEDITOR.replace( 'editor2', {\r
264	plugins: plugins,\r
265	indentClasses: [ 'i1', 'i2', 'i3' ]\r
266	} );\r
267	\r
268	CKEDITOR.replace( 'editor3', {\r
269	plugins: plugins,\r
270	removePlugins: 'indentblock'\r
271	} );\r
272	\r
273	CKEDITOR.replace( 'editor4', {\r
274	plugins: plugins,\r
275	removePlugins: 'indentlist'\r
276	} );\r
277	\r
278	CKEDITOR.replace( 'editor5', {\r
279	plugins: plugins,\r
280	enterMode: CKEDITOR.ENTER_BR\r
281	} );\r
282	</script>\r
283	</body>\r
284	</html>\r