first
This commit is contained in:
shim
168
plugins/ckeditor5/21.0.0/classic/sample/index.html
Normal file
168
plugins/ckeditor5/21.0.0/classic/sample/index.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html><!--
|
||||
Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
This file is licensed under the terms of the MIT License (see LICENSE.md).
|
||||
-->
|
||||
|
||||
<html lang="en" dir="ltr"></html>
|
||||
<head>
|
||||
<title>CKEditor 5 ClassicEditor build</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/png" href="https://c.cksource.com/a/1/logos/ckeditor5.png">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body data-editor="ClassicEditor" data-collaboration="false">
|
||||
<header>
|
||||
<div class="centered">
|
||||
<h1><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer"><img src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://ckeditor.com/docs/ckeditor5/" target="_blank" rel="noopener noreferrer">Documentation</a></li>
|
||||
<li><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="message">
|
||||
<div class="centered">
|
||||
<h2>CKEditor 5 online builder demo - ClassicEditor build</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centered">
|
||||
<div class="row row-editor">
|
||||
<div class="editor">
|
||||
<h2>Bilingual Personality Disorder</h2>
|
||||
<figure class="image image-style-side"><img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
|
||||
<figcaption>One language, one person.</figcaption>
|
||||
</figure>
|
||||
<p>
|
||||
This may be the first time you hear about this made-up disorder but
|
||||
it actually isn’t so far from the truth. Even the studies that were conducted almost half a century show that
|
||||
<strong>the language you speak has more effects on you than you realise</strong>.
|
||||
</p>
|
||||
<p>
|
||||
One of the very first experiments conducted on this topic dates back to 1964.
|
||||
<a href="https://www.researchgate.net/publication/9440038_Language_and_TAT_content_in_bilinguals">In the experiment</a>
|
||||
designed by linguist Ervin-Tripp who is an authority expert in psycholinguistic and sociolinguistic studies,
|
||||
adults who are bilingual in English in French were showed series of pictures and were asked to create 3-minute stories.
|
||||
In the end participants emphasized drastically different dynamics for stories in English and French.
|
||||
</p>
|
||||
<p>
|
||||
Another ground-breaking experiment which included bilingual Japanese women married to American men in San Francisco were
|
||||
asked to complete sentences. The goal of the experiment was to investigate whether or not human feelings and thoughts
|
||||
are expressed differently in <strong>different language mindsets</strong>.
|
||||
<Here>is a sample from the the experiment:</Here>
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>English</th>
|
||||
<th>Japanese</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Real friends should</td>
|
||||
<td>Be very frank</td>
|
||||
<td>Help each other</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>I will probably become</td>
|
||||
<td>A teacher</td>
|
||||
<td>A housewife</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>When there is a conflict with family</td>
|
||||
<td>I do what I want</td>
|
||||
<td>It's a time of great unhappiness</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the language a person speaks affects
|
||||
their cognition, behaviour, emotions and hence <strong>their personality</strong>.
|
||||
This shouldn’t come as a surprise
|
||||
<a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already know</a> that different regions
|
||||
of the brain become more active depending on the person’s activity at hand. Since structure, information and especially
|
||||
<strong>the culture</strong> of languages varies substantially and the language a person speaks is an essential element of daily life.
|
||||
</p>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<p><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener">CKEditor 5</a>
|
||||
– Rich text editor of tomorrow, available today
|
||||
</p>
|
||||
<p>Copyright © 2003-2020,
|
||||
<a href="https://cksource.com/" target="_blank" rel="noopener">CKSource</a>
|
||||
– Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
<script src="../build/ckeditor.js"></script>
|
||||
<script>ClassicEditor
|
||||
.create( document.querySelector( '.editor' ), {
|
||||
|
||||
toolbar: {
|
||||
items: [
|
||||
'heading',
|
||||
'|',
|
||||
'fontColor',
|
||||
'fontSize',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'link',
|
||||
'highlight',
|
||||
'|',
|
||||
'bulletedList',
|
||||
'numberedList',
|
||||
'|',
|
||||
'indent',
|
||||
'outdent',
|
||||
'|',
|
||||
'imageUpload',
|
||||
'blockQuote',
|
||||
'insertTable',
|
||||
'mediaEmbed',
|
||||
'removeFormat',
|
||||
'|',
|
||||
'undo',
|
||||
'redo'
|
||||
]
|
||||
},
|
||||
language: 'ko',
|
||||
image: {
|
||||
toolbar: [
|
||||
'imageTextAlternative',
|
||||
'imageStyle:full',
|
||||
'imageStyle:side'
|
||||
]
|
||||
},
|
||||
table: {
|
||||
contentToolbar: [
|
||||
'tableColumn',
|
||||
'tableRow',
|
||||
'mergeTableCells'
|
||||
]
|
||||
},
|
||||
licenseKey: '',
|
||||
|
||||
} )
|
||||
.then( editor => {
|
||||
window.editor = editor;
|
||||
|
||||
|
||||
|
||||
|
||||
} )
|
||||
.catch( error => {
|
||||
console.error( 'Oops, something gone wrong!' );
|
||||
console.error( 'Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:' );
|
||||
console.warn( 'Build id: 4f8m948iuui0-2kjy92qxoaii' );
|
||||
console.error( error );
|
||||
} );
|
||||
</script>
|
||||
</body>
|
||||
456
plugins/ckeditor5/21.0.0/classic/sample/styles.css
Normal file
456
plugins/ckeditor5/21.0.0/classic/sample/styles.css
Normal file
@@ -0,0 +1,456 @@
|
||||
/**
|
||||
* @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
* This file is licensed under the terms of the MIT License (see LICENSE.md).
|
||||
*/
|
||||
|
||||
:root {
|
||||
--ck-sample-base-spacing: 2em;
|
||||
--ck-sample-color-white: #fff;
|
||||
--ck-sample-color-green: #279863;
|
||||
--ck-sample-color-blue: #1a9aef;
|
||||
--ck-sample-container-width: 1285px;
|
||||
--ck-sample-sidebar-width: 350px;
|
||||
--ck-sample-editor-min-height: 400px;
|
||||
}
|
||||
|
||||
/* --------- EDITOR STYLES ---------------------------------------------------------------------------------------- */
|
||||
|
||||
.editor__editable,
|
||||
/* Classic build. */
|
||||
main .ck-editor[role='application'] .ck.ck-content,
|
||||
/* Decoupled document build. */
|
||||
.ck.editor__editable[role='textbox'],
|
||||
.ck.ck-editor__editable[role='textbox'],
|
||||
/* Inline & Balloon build. */
|
||||
.ck.editor[role='textbox'] {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
font-size: 1em;
|
||||
line-height: 1.6em;
|
||||
min-height: var(--ck-sample-editor-min-height);
|
||||
padding: 1.5em 2em;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable {
|
||||
background: #fff;
|
||||
border: 1px solid hsl(0, 0%, 70%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ck.ck-editor {
|
||||
/* To enable toolbar wrapping. */
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
|
||||
.ck.ck-editor__editable {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
|
||||
body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body[ data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
|
||||
body[ data-editor='DecoupledDocumentEditor'] .row-editor .editor {
|
||||
width: 18.5cm;
|
||||
height: 100%;
|
||||
min-height: 26.25cm;
|
||||
padding: 1.75cm 1.5cm;
|
||||
margin: 2.5rem;
|
||||
border: 1px hsl( 0, 0%, 82.7% ) solid;
|
||||
background-color: var(--ck-sample-color-white);
|
||||
box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
|
||||
}
|
||||
|
||||
body[ data-editor='DecoupledDocumentEditor'] .row-editor {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
}
|
||||
|
||||
body[data-editor='DecoupledDocumentEditor'] .sidebar {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */
|
||||
.sidebar {
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
min-width: var(--ck-sample-sidebar-width);
|
||||
max-width: var(--ck-sample-sidebar-width);
|
||||
font-size: 20px;
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
background: hsl(0, 0%, 98%);
|
||||
border-left: 0;
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Do not inherit styles related to the editable editor content. See line 25.*/
|
||||
.sidebar .ck-content[role='textbox'],
|
||||
.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
|
||||
min-height: unset;
|
||||
width: unset;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar.narrow {
|
||||
min-width: 60px;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.sidebar.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#sidebar-display-toggle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
left: 15px;
|
||||
top: 30px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: hsl( 0, 0%, 50% );
|
||||
transition: 250ms ease color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#sidebar-display-toggle:hover {
|
||||
color: hsl( 0, 0%, 30% );
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sidebar-display-toggle:focus,
|
||||
#sidebar-display-toggle:active {
|
||||
outline: none;
|
||||
border: 1px solid #a9d29d;
|
||||
}
|
||||
|
||||
#sidebar-display-toggle svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */
|
||||
.row-presence {
|
||||
width: 100%;
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
border-bottom: 0;
|
||||
background: hsl(0, 0%, 98%);
|
||||
padding: var(--ck-spacing-small);
|
||||
|
||||
/* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */
|
||||
box-shadow: 0 1px 0 0 hsl(0, 0%, 77%);
|
||||
|
||||
/* Make `z-index` bigger than `.editor` to properly display tooltips. */
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.ck.ck-presence-list {
|
||||
flex: 1;
|
||||
padding: 1.25rem .75rem;
|
||||
}
|
||||
|
||||
.presence .ck.ck-presence-list__counter {
|
||||
order: 2;
|
||||
margin-left: var(--ck-spacing-large)
|
||||
}
|
||||
|
||||
/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */
|
||||
.collaboration-demo__row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
}
|
||||
|
||||
body[ data-editor='InlineEditor'] .collaboration-demo__row {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.collaboration-demo__container {
|
||||
max-width: var(--ck-sample-container-width);
|
||||
margin: 0 auto;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.presence, .collaboration-demo__row {
|
||||
transition: .2s opacity;
|
||||
}
|
||||
|
||||
.collaboration-demo__topbar {
|
||||
background: #fff;
|
||||
border: 1px solid var(--ck-color-toolbar-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.collaboration-demo__topbar .btn {
|
||||
margin-right: 1em;
|
||||
outline-offset: 2px;
|
||||
outline-width: 2px;
|
||||
background-color: var( --ck-sample-color-blue );
|
||||
}
|
||||
|
||||
.collaboration-demo__topbar .btn:focus,
|
||||
.collaboration-demo__topbar .btn:hover {
|
||||
border-color: var( --ck-sample-color-blue );
|
||||
}
|
||||
|
||||
.collaboration-demo__share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.25rem .75rem
|
||||
}
|
||||
|
||||
.collaboration-demo__share-description p {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.collaboration-demo__share input {
|
||||
height: auto;
|
||||
font-size: 0.9em;
|
||||
min-width: 220px;
|
||||
margin: 0 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--ck-color-toolbar-border)
|
||||
}
|
||||
|
||||
.collaboration-demo__share button,
|
||||
.collaboration-demo__share input {
|
||||
height: 40px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.collaboration-demo__share button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.collaboration-demo__share button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.collaboration-demo__share button[data-tooltip]::before,
|
||||
.collaboration-demo__share button[data-tooltip]::after {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all .15s cubic-bezier(.5,1,.25,1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.collaboration-demo__share button[data-tooltip]::before {
|
||||
content: attr(data-tooltip);
|
||||
padding: 5px 15px;
|
||||
border-radius: 3px;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-top: 5px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.collaboration-demo__share button[data-tooltip]::after {
|
||||
content: '';
|
||||
border: 5px solid transparent;
|
||||
width: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-bottom: 5px solid #111;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.collaboration-demo__share button[data-tooltip]:hover:before,
|
||||
.collaboration-demo__share button[data-tooltip]:hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collaboration-demo--ready {
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.collaboration-demo--ready .presence,
|
||||
.collaboration-demo--ready .collaboration-demo__row {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */
|
||||
body, html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
color: #2D3A4A;
|
||||
}
|
||||
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #38A5EE;
|
||||
}
|
||||
|
||||
header .centered {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 8em;
|
||||
}
|
||||
|
||||
header h1 a {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #2D3A4A;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header h1 img {
|
||||
display: block;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header nav ul li + li {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
header nav ul li a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #2D3A4A;
|
||||
}
|
||||
|
||||
header nav ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main .message {
|
||||
padding: 0 0 var(--ck-sample-base-spacing);
|
||||
background: var(--ck-sample-color-green);
|
||||
color: var(--ck-sample-color-white);
|
||||
}
|
||||
|
||||
main .message::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
display: block;
|
||||
height: 10em;
|
||||
width: 100%;
|
||||
background: var(--ck-sample-color-green);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main .message h2 {
|
||||
position: relative;
|
||||
padding-top: 1em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.centered {
|
||||
/* Hide overlapping comments. */
|
||||
overflow: hidden;
|
||||
max-width: var(--ck-sample-container-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--ck-sample-base-spacing);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out;
|
||||
background-color: var(--ck-sample-color-button-blue);
|
||||
border-color: var(--ck-sample-color-button-blue);
|
||||
color: var(--ck-sample-color-white);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn--tiny {
|
||||
padding: 6px 12px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing);
|
||||
font-size: .8em;
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
/* --------- RWD --------------------------------------------------------------------------------------------------- */
|
||||
@media screen and ( max-width: 800px ) {
|
||||
:root {
|
||||
--ck-sample-base-spacing: 1em;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header h1 img {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
main .message h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user