diff options
Diffstat (limited to 'public/bower_components/ckeditor/samples/old/autocomplete/customview.html')
| -rw-r--r-- | public/bower_components/ckeditor/samples/old/autocomplete/customview.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/public/bower_components/ckeditor/samples/old/autocomplete/customview.html b/public/bower_components/ckeditor/samples/old/autocomplete/customview.html new file mode 100644 index 0000000..35eb097 --- /dev/null +++ b/public/bower_components/ckeditor/samples/old/autocomplete/customview.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<!-- +Copyright (c) 2003-2018, 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>Autocomplete Custom View — CKEditor Sample</title> + <script src="../../../ckeditor.js"></script> + <script src="utils.js"></script> + <link rel="stylesheet" href="../../../samples/css/samples.css"> + <link href="../skins/moono/autocomplete.css" rel="stylesheet"> +</head> +<body> + +<style> + .adjoined-bottom:before { + height: 270px; + } +</style> + +<nav class="navigation-a"> + <div class="grid-container"> + <ul class="navigation-a-left grid-width-70"> + <li><a href="http://ckeditor.com">Project Homepage</a></li> + <li><a href="https://github.com/ckeditor/ckeditor-dev/issues">I found a bug</a></li> + <li><a href="http://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li> + </ul> + <ul class="navigation-a-right grid-width-30"> + <li><a href="http://ckeditor.com/blog-list">CKEditor Blog</a></li> + </ul> + </div> +</nav> + +<header class="header-a"> + <div class="grid-container"> + <h1 class="header-a-logo grid-width-30"> + <img src="../../../samples/img/logo.svg" onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample"> + </h1> + </div> +</header> + +<main> + <div class="adjoined-top"> + <div class="grid-container"> + <div class="content grid-width-100"> + <h1>Autocomplete Custom View Demo</h1> + <p>This sample shows the progress of work on Autocomplete with custom View. Type “ @ ” (at least 2 characters) to start autocompletion.</p> + </div> + </div> + </div> + <div class="adjoined-bottom"> + <div class="grid-container"> + <div class="grid-width-100"> + <div id="editor"> + <h1>Apollo 11</h1> + <figure class="image easyimage"> + <img alt="Saturn V carrying Apollo 11" src="../../../samples/img/logo.png"> + </figure> + <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p> + <figure class="easyimage easyimage-side"> + <img alt="Saturn V carrying Apollo 11" src="../../image2/samples/assets/image1.jpg"> + <figcaption>Saturn V carrying Apollo 11</figcaption> + </figure> + <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p> + </div> + </div> + </div> + </div> +</main> + + <footer class="footer-a grid-container"> + <div class="grid-container"> + <p class="grid-width-100"> + CKEditor – The text editor for the Internet – <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> + </p> + <p class="grid-width-100" id="copy"> + Copyright © 2003-2018, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved. + </p> + </div> + </footer> +<script> + 'use strict'; + + ( function() { + // For simplicity we define the plugin in the sample, but normally + // it would be extracted to a separate file. + CKEDITOR.plugins.add( 'customautocomplete', { + requires: 'autocomplete', + + onLoad: function() { + var View = CKEDITOR.plugins.autocomplete.view, + Autocomplete = CKEDITOR.plugins.autocomplete; + + function CustomView( editor ) { + // Call the parent class constructor. + View.call( this, editor ); + } + // Inherit the view methods. + CustomView.prototype = CKEDITOR.tools.prototypedCopy( View.prototype ); + + // Change the positioning of the panel, so it is stretched + // to 100% of the editor container width and is positioned + // according to the editor container. + CustomView.prototype.updatePosition = function( range ) { + var caretRect = this.getViewPosition( range ), + container = this.editor.container; + + this.setPosition( { + // Position the panel according to the editor container. + left: container.$.offsetLeft, + top: caretRect.top, + bottom: caretRect.bottom + } ); + // Stretch the panel to 100% of the editor container width. + this.element.setStyle( 'width', container.getSize( 'width' ) + 'px' ); + }; + + function CustomAutocomplete( editor, textTestCallback, dataCallback ) { + // Call the parent class constructor. + Autocomplete.call( this, editor, textTestCallback, dataCallback ); + } + // Inherit the autocomplete methods. + CustomAutocomplete.prototype = CKEDITOR.tools.prototypedCopy( Autocomplete.prototype ); + + CustomAutocomplete.prototype.getView = function() { + return new CustomView( this.editor ); + } + + // Expose the custom autocomplete so it can be used later. + CKEDITOR.plugins.customAutocomplete = CustomAutocomplete; + } + } ); + + var editor = CKEDITOR.replace( 'editor', { + height: 600, + extraPlugins: 'customautocomplete,autocomplete,textmatch,easyimage,sourcearea,toolbar,undo,wysiwygarea,basicstyles', + toolbar: [ + { name: 'document', items: [ 'Source', 'Undo', 'Redo' ] }, + { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike' ] }, + ] + } ); + + editor.on( 'instanceReady', function() { + var prefix = '@', + minChars = 2, + requireSpaceAfter = true, + data = autocompleteUtils.generateData( CKEDITOR.dom.element.prototype, prefix ); + + // Use the custom autocomplete class. + new CKEDITOR.plugins.customAutocomplete( + editor, + autocompleteUtils.getTextTestCallback( prefix, minChars, requireSpaceAfter ), + autocompleteUtils.getAsyncDataCallback( data ) + ); + } ); + } )(); +</script> + +</body> +</html> |