-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
228 lines (210 loc) · 13.8 KB
/
demo.html
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The European Bioinformatics Institute < EMBL-EBI</title>
<meta name="description" content="EMBL-EBI" /><!-- Describe what this page is about -->
<meta name="keywords" content="bioinformatics, europe, institute" /><!-- A few keywords that relate to the content of THIS PAGE (not the whol project) -->
<meta name="author" content="EMBL-EBI" /><!-- Your [project-name] here -->
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#70BDBD" /> <!-- Android Chrome mobile browser tab color -->
<!-- Add information on the life cycle of this page -->
<meta name="ebi:owner" content="John Doe" /> <!-- Who should be contacted about changes -->
<meta name="ebi:review-cycle" content="30" /> <!-- In days, how often should the content be reviewed -->
<meta name="ebi:last-review" content="2015-12-20" /> <!-- The last time the content was reviewed -->
<meta name="ebi:expiry" content="2016-01-20" /> <!-- When this content is no longer relevant -->
<!-- If you link to any other sites frequently, consider optimising performance with a DNS prefetch -->
<link rel="dns-prefetch" href="//www.ebi.ac.uk" />
<!-- If you have custom icon, replace these as appropriate.
You can generate them at realfavicongenerator.net -->
<link rel="icon" type="image/x-icon" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png" /> <!-- For iPhone 4 Retina display (114px) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png" /> <!-- For iPad (72px) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png" /> <!-- For iPad retinat (144px) -->
<link rel="apple-touch-icon-precomposed" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png" /> <!-- For iPhone (57px) -->
<link rel="mask-icon" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff" /> <!-- Safari icon for pinned tab -->
<meta name="msapplication-TileColor" content="#2b5797" /> <!-- MS Icons -->
<meta name="msapplication-TileImage" content="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all" />
<!-- Use this CSS file for any custom styling -->
<!--
<link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />
-->
<!-- If you have a custom header image or colour -->
<!--
<meta name="ebi:masthead-color" content="#000" />
<meta name="ebi:masthead-image" content="//www.ebi.ac.uk/web_guidelines/EBI-Framework/images/backgrounds/embl-ebi-background.jpg" />
-->
<!-- you can replace this with theme-[projectname].css. See http://www.ebi.ac.uk/web/style/colour for details of how to do this -->
<!-- also inform ES so we can host your colour palette file -->
<link rel="stylesheet" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css" type="text/css" media="all" />
<!-- end CSS-->
</head>
<body class="level2"><!-- add any of your classes or IDs -->
<div id="skip-to">
<a href="#content">Skip to main content</a>
</div>
<header id="masthead-black-bar" class="clearfix masthead-black-bar">
</header>
<div id="content">
<div data-sticky-container>
<header id="masthead" class="masthead" data-sticky data-sticky-on="large" data-top-anchor="content:top" data-btm-anchor="content:bottom">
<div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-12" id="local-title">
<h1><a href="../../" title="Back to [service-name] homepage">EBI CKEditor demo</a></h1>
</div>
<!-- /local-title -->
<!-- local-nav -->
<nav >
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="../../">Overview</a></li>
<li><a data-open="modal-download">Download</a></li>
<li><a href="#">Support <i class="icon icon-generic" data-icon="x"></i></a></li>
</ul>
</nav>
<!-- /local-nav -->
</div>
</header>
</div>
<section id="main-content-area" class="row" role="main">
<div class="columns">
<section>
<h2>Test WYSIWYG editor</h2>
<p>For more information about this, <a href="https://github.com/ebiwd/EBI-CKEditor-config" class="readmore">see the GitHub repo</a></p>
<textarea id="editor1">
<h3>Some sample text</h3>
<p><span><strong>Welcome letter</strong></span></p>
<p>Dear Guest,</p>
<p>We are delighted to welcome you to the annual <em>Flavorful Tuscany Meetup</em> and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.</p>
<p>Please find below the full schedule of the event.</p>
<table class="schedule" cellpadding="15" cellspacing="0">
<thead>
<tr>
<th colspan="2" scope="col" ><span>Saturday, July 14</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="white-space:nowrap;"><span>9:30 AM - 11:30 AM</span></td>
<td><span>Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></span></td>
</tr>
<tr>
<td style="white-space:nowrap;"><span>1:00 PM - 3:00 PM</span></td>
<td><span>Pappardelle al pomodoro - live cooking session with <strong>Rita Fresco</strong></span></td>
</tr>
<tr>
<td style="white-space:nowrap;"><span>5:00 PM - 8:00 PM</span></td>
<td><span>Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></span></td>
</tr>
</tbody>
</table>
<blockquote>
<p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p>
<p>Angelina Calvino, food journalist</p>
</blockquote>
<p>Please arrive at the Bilancino Hotel reception desk at least <strong>half an hour earlier</strong> to make sure that the registration process goes as smoothly as possible.</p>
<p>We look forward to welcoming you to the event.</p>
<p></p>
<p><strong>Victoria Valc</strong></p>
<p><strong>Event Manager</strong></p>
<p><strong>Bilancino Hotel</strong></p>
</textarea>
</section>
<script src="https://ebiwd.github.io/EBI-CKEditor-config/libraries/4.9_full_with_ebi_extras/ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor1', {
// Define the toolbar: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_toolbar
// The full preset from CDN which we used as a base provides more features than we need.
// Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row.
toolbar: [
['Styles','-','Bold','Italic','Strike','Blockquote'],
['NumberedList','BulletedList','-','Outdent','Indent'],
['PasteFromWord','-','RemoveFormat'],
'/',
['linkit','Unlink','Anchor'],
['Image','Enhanced Image'],
['Table','codeSnippet','-','CreateDiv'],
['Templates'],
['AccordionListFoundation','CollapsibleItemFoundation'],
['Source','ShowBlocks','Preview']
]
});
CKEDITOR.config.skin = 'ebi-theme';
CKEDITOR.config.extraPlugins = 'autosave,codesnippet,image2,tableresize,openlink,quicktable,templates,collapsibleItemFoundation,accordionListFoundation,preview,pastefromword,liststyle';
CKEDITOR.config.contentsCss = ['https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css', 'https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global-drupal.css', 'https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css'];
CKEDITOR.config.scayt_disableOptionsStorage = 'lang';
CKEDITOR.config.scayt_sLang = 'en_GB';
CKEDITOR.config.stylesCombo_stylesSet = 'ebi_styles:https://ebiwd.github.io/EBI-CKEditor-config/styles.js';
CKEDITOR.config.templates = 'ebi_templates';
CKEDITOR.config.templates_files = [ 'https://ebiwd.github.io/EBI-CKEditor-config/templates/ebi_templates.js' ];
CKEDITOR.config.templates_replaceContent = false;
CKEDITOR.config.codeSnippet_languages = ({
javascript: 'JavaScript',
php: 'PHP'
});
CKEDITOR.config.indentClasses = ['margin-left-medium','margin-left-large','margin-left-xlarge'];
CKEDITOR.config.pasteFromWordPromptCleanup = false;
CKEDITOR.config.disableNativeTableHandles = true;
CKEDITOR.config.image2_alignClasses = [ 'float-left', 'text-center', 'float-right' ];
CKEDITOR.config.linkJavaScriptLinksAllowed = true;
CKEDITOR.config.height = 600;
// Allow most things to be pasted in
CKEDITOR.config.allowedContent = {
$1: {
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
CKEDITOR.config.disallowedContent = 'span{color}; *{margin*,font*,letter-spacing}; a{text-decoration,color}';
</script>
</div>
</section>
<!-- Optional local footer (insert citation / project-specific copyright / etc here -->
<!--
<footer id="local-footer" class="local-footer" role="local-footer">
<div class="row">
<span class="reference">How to reference this page: ...</span>
</div>
</footer>
-->
<!-- End optional local footer -->
</div>
<!-- End suggested layout containers / #content -->
<footer>
<div id="global-footer" class="global-footer">
<nav id="global-nav-expanded" class="global-nav-expanded row">
<!-- Footer will be automatically inserted by footer.js -->
</nav>
<section id="ebi-footer-meta" class="ebi-footer-meta row">
<!-- Footer meta will be automatically inserted by footer.js -->
</section>
</div>
</footer>
<!-- JavaScript -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.10.2.min.js"><\/script>')</script>
-->
<script defer="defer" src="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.3/js/script.js"></script>
<!-- The Foundation theme JavaScript -->
<script src="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.3/libraries/foundation-6/js/foundation.js"></script>
<script src="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.3/js/foundationExtendEBI.js"></script>
<script type="text/JavaScript">$(document).foundation();</script>
<script type="text/JavaScript">$(document).foundationExtendEBI();</script>
<!-- Google Analytics details... -->
<!-- Change UA-XXXXX-X to be your site's ID -->
<script type="text/javascript">!function(e,a,n,t,i,o,c){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,o=a.createElement(n),c=a.getElementsByTagName(n)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",c.parentNode.insertBefore(o,c)}(window,document,"script",0,"ga"),ga("create","UA-629242-1",{cookieDomain:"auto"}),ga("require","linkid","linkid.js"),ga("set","anonymizeIp",!0),ga("send","pageview");</script>
</body>
</html>