|
@@ -4,293 +4,30 @@
|
|
|
max-width: 800px;
|
|
max-width: 800px;
|
|
|
margin: 20px auto;
|
|
margin: 20px auto;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- .box {
|
|
|
|
|
- border: 1px solid hsl(0, 0%, 20%);
|
|
|
|
|
- padding: 2px;
|
|
|
|
|
- background: hsl(0, 0%, 40%);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .box-meta {
|
|
|
|
|
- border: 1px solid hsl(0, 0%, 80%);
|
|
|
|
|
- background: hsl(0, 0%, 60%);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .box-content-field {
|
|
|
|
|
- padding: .5em;
|
|
|
|
|
- background: hsl(0, 0%, 100%);
|
|
|
|
|
- border: 1px solid hsl(0, 0%, 80%)
|
|
|
|
|
- }
|
|
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
-
|
|
|
|
|
<div id="editor">
|
|
<div id="editor">
|
|
|
- <div class="box">
|
|
|
|
|
- <div class="box__wrapper">
|
|
|
|
|
- <div class="box-meta box-meta-header">
|
|
|
|
|
- <div class="box-meta-header-icon"></div>
|
|
|
|
|
- <div class="box-meta-header-title">
|
|
|
|
|
- <h2>I'm a title</h2>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="box-content">
|
|
|
|
|
- <div class="box-content-field"><p>Foo</p></div>
|
|
|
|
|
- <div class="box-content-field">
|
|
|
|
|
- <ul>
|
|
|
|
|
- <li>Bar</li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="box-content-field"><p>Baz</p></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="box-meta box-meta-author">
|
|
|
|
|
- <a href="www.example.com">@john</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <figure class="table">
|
|
|
|
|
- <table>
|
|
|
|
|
- <thead>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <th colspan="40"><p>foo bar baz</p></th>
|
|
|
|
|
- </tr>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <th colspan="40"><p>foo bar baz</p></th>
|
|
|
|
|
- </tr>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- </tr>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- <th><p>foo bar baz</p></th>
|
|
|
|
|
- </tr>
|
|
|
|
|
- </thead>
|
|
|
|
|
- <tbody>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <td colspan="40"><p>foo bar baz</p></td>
|
|
|
|
|
- </tr>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <td colspan="40"><p>foo bar baz</p></td>
|
|
|
|
|
- </tr>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- </tr>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- </tr>
|
|
|
|
|
- <tr>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- <td><p>foo bar baz</p></td>
|
|
|
|
|
- </tr>
|
|
|
|
|
- </tbody>
|
|
|
|
|
- </table>
|
|
|
|
|
|
|
+ <h2>Heading 1</h2>
|
|
|
|
|
+ <p>Paragraph</p>
|
|
|
|
|
+ <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li>UL List item 1</li>
|
|
|
|
|
+ <li>UL List item 2</li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <ol>
|
|
|
|
|
+ <li>OL List item 1</li>
|
|
|
|
|
+ <li>OL List item 2</li>
|
|
|
|
|
+ </ol>
|
|
|
|
|
+ <figure class="image image-style-side">
|
|
|
|
|
+ <img alt="bar" src="sample.jpg">
|
|
|
|
|
+ <figcaption>Caption</figcaption>
|
|
|
</figure>
|
|
</figure>
|
|
|
-</div>
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-<!--
|
|
|
|
|
-
|
|
|
|
|
-<box type="foo" icon="icon.png" author="@john" authorWebsite="www.example.com">
|
|
|
|
|
- <boxField>
|
|
|
|
|
- <p>Foo bar</p>
|
|
|
|
|
|
|
+ <blockquote>
|
|
|
|
|
+ <p>Quote</p>
|
|
|
<ul>
|
|
<ul>
|
|
|
- <li>baz</li>
|
|
|
|
|
|
|
+ <li>Quoted UL List item 1</li>
|
|
|
|
|
+ <li>Quoted UL List item 2</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
- </boxField>
|
|
|
|
|
- ...
|
|
|
|
|
- <boxField></boxField>
|
|
|
|
|
-</box>
|
|
|
|
|
-
|
|
|
|
|
--->
|
|
|
|
|
|
|
+ <p>Quote</p>
|
|
|
|
|
+ </blockquote>
|
|
|
|
|
+</div>
|