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
|
<!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>Mentions — CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link rel="stylesheet" href="../../../samples/css/samples.css">
</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>Mentions Demo</h1>
<p>This sample shows Mentions feature in action. Type “ @ ” to open simple autocompletion with array feed, “ $ ” (min 1 character) to open asynchronous autocompletion with URL string feed or “ # ” (min 2 characters) to open asynchronous autocompletion with custom source of data.</p>
</div>
</div>
</div>
<div class="adjoined-bottom">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Mentions plugin</h1>
<p>Feel free to mention @anna, @cris, @thomas or anyone else.</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() {
var data = [
{ id: 1, name: 'john', fullName: 'John Doe' },
{ id: 2, name: 'thomas', fullName: 'Thomas Doe' },
{ id: 3, name: 'anna', fullName: 'Anna Doe' },
{ id: 4, name: 'annabelle', fullName: 'Annabelle Doe' },
{ id: 5, name: 'cris', fullName: 'Cris Doe' },
{ id: 6, name: 'julia', fullName: 'Julia Doe' }
];
CKEDITOR.replace( 'editor', {
height: 240,
extraPlugins: 'mentions,easyimage,sourcearea,toolbar,undo,wysiwygarea,basicstyles',
extraAllowedContent: 'h1',
toolbar: [
{ name: 'document', items: [ 'Source', 'Undo', 'Redo' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike' ] },
],
mentions: [
{
feed: CKEDITOR.tools.array.map( data, function( item ) {
return item.name;
} ),
minChars: 0
},
{
feed: '{encodedQuery}',
marker: '$',
minChars: 1,
template: '<li data-id="{id}">{fullName}</li>'
},
{
feed: dataCallback,
marker: '#',
template: '<li data-id="{id}">{name} ({fullName})</li>'
}
],
on: {
instanceReady: function() {
// We have to stub ajax.load function.
CKEDITOR.ajax.load = function( query, callback ) {
var results = data.filter( function( item ) {
return item.name.indexOf( query ) === 0;
} );
setTimeout( function() {
callback( JSON.stringify( results ) );
}, Math.random() * 500 );
}
}
}
} );
function dataCallback( opts, callback ) {
setTimeout( function() {
callback(
data.filter( function( item ) {
return item.name.indexOf( opts.query ) === 0;
} )
);
}, Math.random() * 500 );
}
} )();
</script>
</body>
</html>
|
