| index : flyspray | |
| Archlinux32 customized Flyspray installation | gitolite user |
| summaryrefslogtreecommitdiff |
| -rw-r--r-- | js/ckeditor/samples/api.html | 207 |
diff --git a/js/ckeditor/samples/api.html b/js/ckeditor/samples/api.html new file mode 100644 index 0000000..50f568e --- /dev/null +++ b/js/ckeditor/samples/api.html @@ -0,0 +1,207 @@ +<!DOCTYPE html> +<!-- +Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.md or http://ckeditor.com/license +--> +<html> +<head> + <meta charset="utf-8"> + <title>API Usage — CKEditor Sample</title> + <script src="../ckeditor.js"></script> + <link href="sample.css" rel="stylesheet"> + <script> + +// The instanceReady event is fired, when an instance of CKEditor has finished +// its initialization. +CKEDITOR.on( 'instanceReady', function( ev ) { + // Show the editor name and description in the browser status bar. + document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.'; + + // Show this sample buttons. + document.getElementById( 'eButtons' ).style.display = 'block'; +}); + +function InsertHTML() { + // Get the editor instance that we want to interact with. + var editor = CKEDITOR.instances.editor1; + var value = document.getElementById( 'htmlArea' ).value; + + // Check the active editing mode. + if ( editor.mode == 'wysiwyg' ) + { + // Insert HTML code. + // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml + editor.insertHtml( value ); + } + else + alert( 'You must be in WYSIWYG mode!' ); +} + +function InsertText() { + // Get the editor instance that we want to interact with. + var editor = CKEDITOR.instances.editor1; + var value = document.getElementById( 'txtArea' ).value; + + // Check the active editing mode. + if ( editor.mode == 'wysiwyg' ) + { + // Insert as plain text. + // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText + editor.insertText( value ); + } + else + alert( 'You must be in WYSIWYG mode!' ); +} + +function SetContents() { + // Get the editor instance that we want to interact with. + var editor = CKEDITOR.instances.editor1; + var value = document.getElementById( 'htmlArea' ).value; + + // Set editor contents (replace current contents). + // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData + editor.setData( value ); +} + +function GetContents() { + // Get the editor instance that you want to interact with. + var editor = CKEDITOR.instances.editor1; + + // Get editor contents + // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData + alert( editor.getData() ); +} + +function ExecuteCommand( commandName ) { + // Get the editor instance that we want to interact with. + var editor = CKEDITOR.instances.editor1; + + // Check the active editing mode. + if ( editor.mode == 'wysiwyg' ) + { + // Execute the command. + // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand + editor.execCommand( commandName ); + } + else + alert( 'You must be in WYSIWYG mode!' ); +} + +function CheckDirty() { + // Get the editor instance that we want to interact with. + var editor = CKEDITOR.instances.editor1; + // Checks whether the current editor contents present changes when compared + // to the contents loaded into the editor at startup + // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty + alert( editor.checkDirty() ); +} + +function ResetDirty() { + // Get the editor instance that we want to interact with. + var editor = CKEDITOR.instances.editor1; + // Resets the "dirty state" of the editor (see CheckDirty()) + // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty + editor.resetDirty(); + alert( 'The "IsDirty" status has been reset' ); +} + +function Focus() { + CKEDITOR.instances.editor1.focus(); +} + +function onFocus() { + document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>'; +} + +function onBlur() { + document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus'; +} + + </script> + +</head> +<body> + <h1 class="samples"> + <a href="index.html">CKEditor Samples</a> » Using CKEditor JavaScript API + </h1> + <div class="description"> + <p> + This sample shows how to use the + <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a> + to interact with the editor at runtime. + </p> + <p> + For details on how to create this setup check the source code of this sample page. + </p> + </div> + + <!-- This <div> holds alert messages to be display in the sample page. --> + <div id="alerts"> + <noscript> + <p> + <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript + support, like yours, you should still see the contents (HTML data) and you should + be able to edit it normally, without a rich editor interface. + </p> + </noscript> + </div> + <form action="../../../samples/sample_posteddata.php" method="post"> + <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> + + <script> + // Replace the <textarea id="editor1"> with an CKEditor instance. + CKEDITOR.replace( 'editor1', { + on: { + focus: onFocus, + blur: onBlur, + + // Check for availability of corresponding plugins. + pluginsLoaded: function( evt ) { + var doc = CKEDITOR.document, ed = evt.editor; + if ( !ed.getCommand( 'bold' ) ) + doc.getById( 'exec-bold' ).hide(); + if ( !ed.getCommand( 'link' ) ) + doc.getById( 'exec-link' ).hide(); + } + } + }); + </script> + + <p id="eMessage"> + </p> + + <div id="eButtons" style="display: none"> + <input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute "bold" Command"> + <input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute "link" Command"> + <input onclick="Focus();" type="button" value="Focus"> + <br><br> + <input onclick="InsertHTML();" type="button" value="Insert HTML"> + <input onclick="SetContents();" type="button" value="Set Editor Contents"> + <input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)"> + <br> + <textarea cols="100" id="htmlArea" rows="3"><h2>Test</h2><p>This is some <a href="/Test1.html">sample</a> HTML code.</p></textarea> + <br> + <br> + <input onclick="InsertText();" type="button" value="Insert Text"> + <br> + <textarea cols="100" id="txtArea" rows="3"> First line with some leading whitespaces. + +Second line of text preceded by two line breaks.</textarea> + <br> + <br> + <input onclick="CheckDirty();" type="button" value="checkDirty()"> + <input onclick="ResetDirty();" type="button" value="resetDirty()"> + </div> + </form> + <div id="footer"> + <hr> + <p> + CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> + </p> + <p id="copy"> + Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico + Knabben. All rights reserved. + </p> + </div> +</body> +</html> |