| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>CKEditor 5 - Build Classic Sample</title>
- <style>
- @import url(https://fonts.googleapis.com/css?family=Roboto:300,400);
- body, html {
- margin: 0;
- padding: 0;
- font-size: 16px;
- line-height: 1.5;
- text-align: center;
- font-family: 'Roboto', sans-serif;
- background: url( ./bg.jpg ) calc(50% + 100px) top no-repeat #201F24;
- color: #fff;
- font-weight: 300;
- }
- h1,
- h2 {
- font-weight: 300;
- }
- a {
- color: #88d01c;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- header h1,
- main,
- footer {
- padding: 0 1em;
- }
- /* ---- CKEditor --------------------------------------------------- */
- main .ck-editor .ck-editor__editable_inline {
- color: #333;
- }
- main .ck-editor,
- main .message {
- position: relative;
- z-index: 1;
- max-width: 720px;
- margin: 0 auto;
- text-align: left;
- }
- main .ck-editor .ck-editor__editable_inline {
- padding: 1em 2em;
- }
- .ck-editor .ck-editor__editable_inline h2,
- .ck-editor .ck-editor__editable_inline h3,
- .ck-editor .ck-editor__editable_inline h4,
- .ck-editor .ck-editor__editable_inline strong {
- font-weight: 400;
- }
- .ck-editor .ck-widget.ck-widget_selected,
- .ck-editor .ck-widget.ck-widget_selected:hover {
- outline: 3px solid #69A2DF;
- }
- .ck-editor .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected {
- outline: 3px solid #DDD;
- }
- .ck-editor .ck-widget:hover {
- outline: 3px solid #FFD25C;
- }
- /* ---- Footer --------------------------------------------------- */
- footer {
- overflow: hidden;
- margin: 3em 0;
- }
- footer .copy {
- color: #555;
- font-size: .8em;
- }
- footer .copy a {
- color: #4a6f12;
- }
- /* ---- RWD --------------------------------------------------- */
- @media only screen and (max-device-width: 800px) {
- body, html {
- font-size: 150%;
- }
- /* ---- CKEditor ---------------------------- */
- .ck-editor,
- .message {
- max-width: none;
- }
- .ck-reset, .ck-reset_all, .ck-reset_all * {
- font-size: inherit;
- }
- }
- </style>
- </head>
- <body>
- <main>
- <div id="editor">
- <h2>About CKEditor 5</h2>
- <p>This is <a href="https://ckeditor5.github.io">CKEditor 5</a>.
- </p>
- <figure class="image">
- <img src="../tests/manual/sample.jpg" alt="Autumn fields"/>
- </figure>
- <p>After more than 2 years of building the next generation editor from
- scratch and closing over 980 tickets, we created a highly <strong>extensible
- and flexible architecture</strong> which consists of an <strong>amazing
- editing framework</strong> and <strong>editing
- solutions</strong> that will be built on top of it.</p>
- <h3>Notes</h3>
- <p><a href="https://ckeditor5.github.io">CKEditor 5</a> is <em>under
- heavy development</em> and this demo is not production-ready
- software. For example:</p>
- <ul>
- <li><strong>Only Chrome, Opera and Safari are supported</strong>.
- </li>
- <li>Firefox requires enabling the <a
- href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">“dom.select_events.enabled”</a>
- option.
- </li>
- <li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support
- for pasting</a> is under development (content filtering is
- unstable).
- </li>
- </ul>
- <p>It has <em>bugs</em> that we are aware of — and that we
- will be working on in the next few iterations of the project. Stay
- tuned for some updates soon!</p>
- </div>
- </main>
- <footer>
- <p class="copy">
- Copyright © 2003-2017, <a href="http://cksource.com">CKSource</a> –
- Frederico Knabben.
- All rights reserved.
- </p>
- </footer>
- <script src="../build/ckeditor.js"></script>
- <script>
- ClassicEditor.create( document.querySelector( '#editor' ) )
- .then( editor => {
- window.editor = editor;
- } )
- .catch( err => {
- console.error( err.stack );
- } );
- </script>
- </body>
- </html>
|