diff options
Diffstat (limited to 'samples/old/api.html')
| -rwxr-xr-x | samples/old/api.html | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/samples/old/api.html b/samples/old/api.html new file mode 100755 index 0000000..5189ba5 --- /dev/null +++ b/samples/old/api.html @@ -0,0 +1,218 @@ +<!DOCTYPE html> +<!-- +Copyright (c) 2003-2019, 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>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. + // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#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. + // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#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). + // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#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 + // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#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. + // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#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 + // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#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()) + // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#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="warning deprecated"> + This sample is not maintained anymore. Check out its <a + href="https://ckeditor.com/docs/ckeditor4/latest/examples/api.html">brand new version in CKEditor + Examples</a>. + </div> + <div class="description"> + <p> + This sample shows how to use the + <a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html">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="https://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="https://ckeditor.com/">https://ckeditor.com</a> + </p> + <p id="copy"> + Copyright © 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico + Knabben. All rights reserved. + </p> + </div> +</body> + +</html>
\ No newline at end of file |