[perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git] / release / samples / old / api.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>API Usage &mdash; CKEditor Sample</title>\r
	<script src="../../ckeditor.js"></script>\r
	<link href="sample.css" rel="stylesheet">\r
	<script>\r
\r
// The instanceReady event is fired, when an instance of CKEditor has finished\r
// its initialization.\r
CKEDITOR.on( 'instanceReady', function( ev ) {\r
	// Show the editor name and description in the browser status bar.\r
	document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';\r
\r
	// Show this sample buttons.\r
	document.getElementById( 'eButtons' ).style.display = 'block';\r
});\r
\r
function InsertHTML() {\r
	// Get the editor instance that we want to interact with.\r
	var editor = CKEDITOR.instances.editor1;\r
	var value = document.getElementById( 'htmlArea' ).value;\r
\r
	// Check the active editing mode.\r
	if ( editor.mode == 'wysiwyg' )\r
	{\r
		// Insert HTML code.\r
		// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml\r
		editor.insertHtml( value );\r
	}\r
	else\r
		alert( 'You must be in WYSIWYG mode!' );\r
}\r
\r
function InsertText() {\r
	// Get the editor instance that we want to interact with.\r
	var editor = CKEDITOR.instances.editor1;\r
	var value = document.getElementById( 'txtArea' ).value;\r
\r
	// Check the active editing mode.\r
	if ( editor.mode == 'wysiwyg' )\r
	{\r
		// Insert as plain text.\r
		// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText\r
		editor.insertText( value );\r
	}\r
	else\r
		alert( 'You must be in WYSIWYG mode!' );\r
}\r
\r
function SetContents() {\r
	// Get the editor instance that we want to interact with.\r
	var editor = CKEDITOR.instances.editor1;\r
	var value = document.getElementById( 'htmlArea' ).value;\r
\r
	// Set editor contents (replace current contents).\r
	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData\r
	editor.setData( value );\r
}\r
\r
function GetContents() {\r
	// Get the editor instance that you want to interact with.\r
	var editor = CKEDITOR.instances.editor1;\r
\r
	// Get editor contents\r
	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData\r
	alert( editor.getData() );\r
}\r
\r
function ExecuteCommand( commandName ) {\r
	// Get the editor instance that we want to interact with.\r
	var editor = CKEDITOR.instances.editor1;\r
\r
	// Check the active editing mode.\r
	if ( editor.mode == 'wysiwyg' )\r
	{\r
		// Execute the command.\r
		// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand\r
		editor.execCommand( commandName );\r
	}\r
	else\r
		alert( 'You must be in WYSIWYG mode!' );\r
}\r
\r
function CheckDirty() {\r
	// Get the editor instance that we want to interact with.\r
	var editor = CKEDITOR.instances.editor1;\r
	// Checks whether the current editor contents present changes when compared\r
	// to the contents loaded into the editor at startup\r
	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty\r
	alert( editor.checkDirty() );\r
}\r
\r
function ResetDirty() {\r
	// Get the editor instance that we want to interact with.\r
	var editor = CKEDITOR.instances.editor1;\r
	// Resets the "dirty state" of the editor (see CheckDirty())\r
	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty\r
	editor.resetDirty();\r
	alert( 'The "IsDirty" status has been reset' );\r
}\r
\r
function Focus() {\r
	CKEDITOR.instances.editor1.focus();\r
}\r
\r
function onFocus() {\r
	document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';\r
}\r
\r
function onBlur() {\r
	document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';\r
}\r
\r
	</script>\r
\r
</head>\r
<body>\r
	<h1 class="samples">\r
		<a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API\r
	</h1>\r
	<div class="warning deprecated">\r
		This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/api.html">brand new version in CKEditor SDK</a>.\r
	</div>\r
	<div class="description">\r
	<p>\r
		This sample shows how to use the\r
		<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>\r
		to interact with the editor at runtime.\r
	</p>\r
	<p>\r
		For details on how to create this setup check the source code of this sample page.\r
	</p>\r
	</div>\r
\r
	<!-- This <div> holds alert messages to be display in the sample page. -->\r
	<div id="alerts">\r
		<noscript>\r
			<p>\r
				<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript\r
				support, like yours, you should still see the contents (HTML data) and you should\r
				be able to edit it normally, without a rich editor interface.\r
			</p>\r
		</noscript>\r
	</div>\r
	<form action="../../../samples/sample_posteddata.php" method="post">\r
		<textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>\r
\r
		<script>\r
			// Replace the <textarea id="editor1"> with an CKEditor instance.\r
			CKEDITOR.replace( 'editor1', {\r
				on: {\r
					focus: onFocus,\r
					blur: onBlur,\r
\r
					// Check for availability of corresponding plugins.\r
					pluginsLoaded: function( evt ) {\r
						var doc = CKEDITOR.document, ed = evt.editor;\r
						if ( !ed.getCommand( 'bold' ) )\r
							doc.getById( 'exec-bold' ).hide();\r
						if ( !ed.getCommand( 'link' ) )\r
							doc.getById( 'exec-link' ).hide();\r
					}\r
				}\r
			});\r
		</script>\r
\r
		<p id="eMessage">\r
		</p>\r
\r
		<div id="eButtons" style="display: none">\r
			<input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">\r
			<input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">\r
			<input onclick="Focus();" type="button" value="Focus">\r
			<br><br>\r
			<input onclick="InsertHTML();" type="button" value="Insert HTML">\r
			<input onclick="SetContents();" type="button" value="Set Editor Contents">\r
			<input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">\r
			<br>\r
			<textarea cols="100" id="htmlArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML code.&lt;/p&gt;</textarea>\r
			<br>\r
			<br>\r
			<input onclick="InsertText();" type="button" value="Insert Text">\r
			<br>\r
			<textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.\r
\r
Second line of text preceded by two line breaks.</textarea>\r
			<br>\r
			<br>\r
			<input onclick="CheckDirty();" type="button" value="checkDirty()">\r
			<input onclick="ResetDirty();" type="button" value="resetDirty()">\r
		</div>\r
	</form>\r
	<div id="footer">\r
		<hr>\r
		<p>\r
			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
		</p>\r
		<p id="copy">\r
			Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
			Knabben. All rights reserved.\r
		</p>\r
	</div>\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>API Usage — CKEditor Sample</title>\r
	10	<script src="../../ckeditor.js"></script>\r
	11	<link href="sample.css" rel="stylesheet">\r
	12	<script>\r
	13	\r
	14	// The instanceReady event is fired, when an instance of CKEditor has finished\r
	15	// its initialization.\r
	16	CKEDITOR.on( 'instanceReady', function( ev ) {\r
	17	// Show the editor name and description in the browser status bar.\r
	18	document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';\r
	19	\r
	20	// Show this sample buttons.\r
	21	document.getElementById( 'eButtons' ).style.display = 'block';\r
	22	});\r
	23	\r
	24	function InsertHTML() {\r
	25	// Get the editor instance that we want to interact with.\r
	26	var editor = CKEDITOR.instances.editor1;\r
	27	var value = document.getElementById( 'htmlArea' ).value;\r
	28	\r
	29	// Check the active editing mode.\r
	30	if ( editor.mode == 'wysiwyg' )\r
	31	{\r
	32	// Insert HTML code.\r
	33	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml\r
	34	editor.insertHtml( value );\r
	35	}\r
	36	else\r
	37	alert( 'You must be in WYSIWYG mode!' );\r
	38	}\r
	39	\r
	40	function InsertText() {\r
	41	// Get the editor instance that we want to interact with.\r
	42	var editor = CKEDITOR.instances.editor1;\r
	43	var value = document.getElementById( 'txtArea' ).value;\r
	44	\r
	45	// Check the active editing mode.\r
	46	if ( editor.mode == 'wysiwyg' )\r
	47	{\r
	48	// Insert as plain text.\r
	49	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText\r
	50	editor.insertText( value );\r
	51	}\r
	52	else\r
	53	alert( 'You must be in WYSIWYG mode!' );\r
	54	}\r
	55	\r
	56	function SetContents() {\r
	57	// Get the editor instance that we want to interact with.\r
	58	var editor = CKEDITOR.instances.editor1;\r
	59	var value = document.getElementById( 'htmlArea' ).value;\r
	60	\r
	61	// Set editor contents (replace current contents).\r
	62	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData\r
	63	editor.setData( value );\r
	64	}\r
	65	\r
	66	function GetContents() {\r
	67	// Get the editor instance that you want to interact with.\r
68	var editor = CKEDITOR.instances.editor1;\r
69	\r
70	// Get editor contents\r
71	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData\r
72	alert( editor.getData() );\r
73	}\r
74	\r
75	function ExecuteCommand( commandName ) {\r
76	// Get the editor instance that we want to interact with.\r
77	var editor = CKEDITOR.instances.editor1;\r
78	\r
79	// Check the active editing mode.\r
80	if ( editor.mode == 'wysiwyg' )\r
81	{\r
82	// Execute the command.\r
83	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand\r
84	editor.execCommand( commandName );\r
85	}\r
86	else\r
87	alert( 'You must be in WYSIWYG mode!' );\r
88	}\r
89	\r
90	function CheckDirty() {\r
91	// Get the editor instance that we want to interact with.\r
92	var editor = CKEDITOR.instances.editor1;\r
93	// Checks whether the current editor contents present changes when compared\r
94	// to the contents loaded into the editor at startup\r
95	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty\r
96	alert( editor.checkDirty() );\r
97	}\r
98	\r
99	function ResetDirty() {\r
100	// Get the editor instance that we want to interact with.\r
101	var editor = CKEDITOR.instances.editor1;\r
102	// Resets the "dirty state" of the editor (see CheckDirty())\r
103	// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty\r
104	editor.resetDirty();\r
105	alert( 'The "IsDirty" status has been reset' );\r
106	}\r
107	\r
108	function Focus() {\r
109	CKEDITOR.instances.editor1.focus();\r
110	}\r
111	\r
112	function onFocus() {\r
113	document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';\r
114	}\r
115	\r
116	function onBlur() {\r
117	document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';\r
118	}\r
119	\r
120	</script>\r
121	\r
122	</head>\r
123	<body>\r
124	<h1 class="samples">\r
125	<a href="index.html">CKEditor Samples</a> » Using CKEditor JavaScript API\r
126	</h1>\r
127	<div class="warning deprecated">\r
128	This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/api.html">brand new version in CKEditor SDK</a>.\r
129	</div>\r
130	<div class="description">\r
131	<p>\r
132	This sample shows how to use the\r
133	<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>\r
134	to interact with the editor at runtime.\r
135	</p>\r
136	<p>\r
137	For details on how to create this setup check the source code of this sample page.\r
138	</p>\r
139	</div>\r
140	\r
141	<!-- This <div> holds alert messages to be display in the sample page. -->\r
142	<div id="alerts">\r
143	<noscript>\r
144	<p>\r
145	<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript\r
146	support, like yours, you should still see the contents (HTML data) and you should\r
147	be able to edit it normally, without a rich editor interface.\r
148	</p>\r
149	</noscript>\r
150	</div>\r
151	<form action="../../../samples/sample_posteddata.php" method="post">\r
152	<textarea cols="100" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>\r
153	\r
154	<script>\r
155	// Replace the <textarea id="editor1"> with an CKEditor instance.\r
156	CKEDITOR.replace( 'editor1', {\r
157	on: {\r
158	focus: onFocus,\r
159	blur: onBlur,\r
160	\r
161	// Check for availability of corresponding plugins.\r
162	pluginsLoaded: function( evt ) {\r
163	var doc = CKEDITOR.document, ed = evt.editor;\r
164	if ( !ed.getCommand( 'bold' ) )\r
165	doc.getById( 'exec-bold' ).hide();\r
166	if ( !ed.getCommand( 'link' ) )\r
167	doc.getById( 'exec-link' ).hide();\r
168	}\r
169	}\r
170	});\r
171	</script>\r
172	\r
173	<p id="eMessage">\r
174	</p>\r
175	\r
176	<div id="eButtons" style="display: none">\r
177	<input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute "bold" Command">\r
178	<input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute "link" Command">\r
179	<input onclick="Focus();" type="button" value="Focus">\r
180	<br><br>\r
181	<input onclick="InsertHTML();" type="button" value="Insert HTML">\r
182	<input onclick="SetContents();" type="button" value="Set Editor Contents">\r
183	<input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">\r
184	<br>\r
185	<textarea cols="100" id="htmlArea" rows="3"><h2>Test</h2><p>This is some <a href="/Test1.html">sample</a> HTML code.</p></textarea>\r
186	<br>\r
187	<br>\r
188	<input onclick="InsertText();" type="button" value="Insert Text">\r
189	<br>\r
190	<textarea cols="100" id="txtArea" rows="3"> First line with some leading whitespaces.\r
191	\r
192	Second line of text preceded by two line breaks.</textarea>\r
193	<br>\r
194	<br>\r
195	<input onclick="CheckDirty();" type="button" value="checkDirty()">\r
196	<input onclick="ResetDirty();" type="button" value="resetDirty()">\r
197	</div>\r
198	</form>\r
199	<div id="footer">\r
200	<hr>\r
201	<p>\r
202	CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
203	</p>\r
204	<p id="copy">\r
317f8f8f	205	Copyright © 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
3332bebe IB	206	Knabben. All rights reserved.\r
	207	</p>\r
	208	</div>\r
	209	</body>\r
	210	</html>\r