/
classic.html
137 lines (121 loc) · 7.68 KB
/
classic.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
<!DOCTYPE html>
<!--
Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Classic editing with CKEditor. Easy integration with administration backends.">
<meta name="keywords" content="ckeditor, editor, wysiwyg, wysiwym, classic, framed, iframe, frame, ui, interface, styles">
<meta name="sdk-samples" content="Classic editor with default styles|Classic editor with custom styles">
<meta name="sdk-category" content="sdk-editor-types">
<meta name="sdk-order" content="10">
<title>Classic Editor</title>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:700,500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor4/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<![endif]-->
<link rel="icon" href="../template/theme/img/favicon.ico">
</head>
<body>
<header class="sdk-header">
</header>
<section class="sdk-container">
<nav class="sdk-sidebar">
</nav>
<section class="sdk-contents">
<h1>Classic Editor <a class="documentation" href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_framed.html">Documentation</a></h1>
<p>
<strong>Classic editor</strong> is what most users traditionally learnt to associate with a rich text editor — a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server. Sometimes it is also called "framed editing", because in this scenario the editor creates a temporary <code><iframe></code> element for itself.
</p>
<p>
In this editing solution <strong>the styles of the editor content are separated from the styles of the surrounding page</strong>. It is particularly useful when:
</p>
<ul>
<li>
Admininistration and frontend themes in a CMS are different — as inheriting styles from the backend theme would make no sense here.
</li>
<li>
Edited content is rendered in different locations of a website that may have different styling — as in such case it is more efficient to just focus on creating semantically correct syntax.
</li>
<li>
The editor works in a changeable environment (e.g. a themable CMS) — where it is hard to predict how user themes will be constructed.
</li>
</ul>
<p>
Due to focus on semantic markup and possible differences between the styles of content within the editor and the styles used when the content is rendered on a page, such editors are sometimes called <abbr title="What You See Is What You Mean">WYSIWYM</abbr> editors ("What You See Is What You Mean").
</p>
<p>
Classic editor is usually implemented with <a href="./fixedui.html">fixed user interface</a> to replace a standard <code><textarea></code> element in an HTML form on the web page.
</p>
<h2 class="editor-title">Classic Editor with Default Styles</h2>
<p>
Classic editor uses its own set of default styles for edited content. In the editor instance below you can see that the font style, size, and colors on this page and inside the CKEditor 4 editing area are different (e.g. the "Apollo 11" header is black, not green).
</p>
<textarea cols="80" id="editor1" name="editor1" rows="10" data-sample="1" data-sample-short>
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/> Apollo 11</h1>
<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>
<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&nbsp;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>
</textarea>
<h2 class="editor-title">Classic Editor with Custom Styles</h2>
<p>
It is possible to specify custom styles for edited content with the <code><a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss">config.contentsCss</a></code> option. In the editor instance below font size was increased and the colors of links, headers, and struck-through content were changed.
</p>
<textarea cols="80" id="editor2" name="editor2" rows="10" data-sample="2" data-sample-short>
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/> Apollo 11</h1>
<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>
<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&nbsp;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>
</textarea>
<p>
By fine-tuning a stylesheet for CKEditor 4 you can make your content look exactly the same both on
the page and inside the editor.
</p>
<script src="assets/activate.js"></script>
<script src="assets/pastefromoffice/pastefromoffice.js"></script>
<script data-sample="1">
CKEDITOR.replace( 'editor1', {
height: 260,
width: 700,
removeButtons: 'PasteFromWord'
} );
</script>
<script data-sample="2">
CKEDITOR.replace( 'editor2', {
height: 260,
/* Default CKEditor 4 styles are included as well to avoid copying default styles. */
contentsCss: [
CKEDITOR.basePath + 'contents.css',
'assets/css/classic.css'
],
removeButtons: 'PasteFromWord'
} );
</script>
<h2>Related Features</h2>
<ul>
<li><a href="./inline.html">Editor Types – Inline Editor</a></li>
<li><a href="./fixedui.html">Editor UI – Fixed User Interface</a></li>
<li><a href="./savetextarea.html">Saving Data – Saving Data in CKEditor 4 Replacing a Textarea</a></li>
</ul>
</section>
</section>
<footer class="sdk-footer">
</footer>
</body>
</html>