WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/assets/global/plugins/ckeditor/samples/api.html

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

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/assets/global/plugins/ckeditor/samples/api.html - Rev 1