1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
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="https://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="https://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="https://ckeditor.com/blog/">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="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p class="grid-width-100" id="copy">
Copyright © 2003-2018, <a class="samples" href="https://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>
|
