This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
223 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
<div id="snippet-todo-list"> | ||
<h2>Waffles</h2> | ||
|
||
<figure class="image image-style-side"> | ||
<img src="../assets/img/waffles.png" alt="Waffles with raspberries and whipped cream."> | ||
</figure> | ||
|
||
<h3>Ingredients</h3> | ||
|
||
<ul> | ||
<li> | ||
<label class="todo-list__label todo-list__label_checked"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled checked /> | ||
<span class="todo-list__label__description">2 eggs</span> | ||
</label> | ||
</li> | ||
<li> | ||
<label class="todo-list__label todo-list__label_checked"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled checked /> | ||
<span class="todo-list__label__description">2 cups all-purpose flour</span> | ||
</label> | ||
</li> | ||
<li> | ||
<label class="todo-list__label todo-list__label_checked"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled checked /> | ||
<span class="todo-list__label__description">1 3/4 cups milk</span> | ||
</label> | ||
</li> | ||
<li> | ||
<label class="todo-list__label"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled /> | ||
<span class="todo-list__label__description">1/2 cup vegetable oil</span> | ||
</label> | ||
</li> | ||
<li> | ||
<label class="todo-list__label"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled /> | ||
<span class="todo-list__label__description">1 tablespoon white sugar</span> | ||
</label> | ||
</li> | ||
<li> | ||
<label class="todo-list__label"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled /> | ||
<span class="todo-list__label__description">4 teaspoons baking powder</span> | ||
</label> | ||
</li> | ||
<li> | ||
<label class="todo-list__label"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled /> | ||
<span class="todo-list__label__description">1/4 teaspoon salt</span> | ||
</label> | ||
</li> | ||
<li> | ||
<label class="todo-list__label"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled /> | ||
<span class="todo-list__label__description">1/2 teaspoon vanilla extract</span> | ||
</label> | ||
</li> | ||
</ul> | ||
|
||
<h3>Directions</h3> | ||
|
||
<figure class="table"> | ||
<table> | ||
<thead> | ||
<tr> | ||
<th>Prep</th> | ||
<th>Cook</th> | ||
<th>Ready In</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td>5 m</td> | ||
<td>15 m</td> | ||
<td>20 m</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</figure> | ||
|
||
<p>Preheat waffle iron. Beat eggs in large bowl with hand beater until fluffy. Beat in flour, milk, vegetable oil, sugar, baking powder, salt and vanilla, just until smooth.</p> | ||
|
||
<p>Spray preheated waffle iron with non-stick cooking spray. Pour mix onto hot waffle iron. Cook until golden brown. Serve hot.</p> | ||
|
||
<p>Source: <a href="https://www.allrecipes.com/recipe/22180/waffles-i/?fbclid=IwAR1g8NdUx6fm0aYit4Wwi2J1yQdx9WnnGqE23SVgvxr9XVRyooYMjvHq-yE">allrecipes</a></p> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
/** | ||
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/* globals console, window, document */ | ||
|
||
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; | ||
|
||
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; | ||
|
||
// import TodoList from '@ckeditor/ckeditor5-list/src/todolist'; | ||
|
||
// ClassicEditor.builtinPlugins.push( TodoList ); | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#snippet-todo-list' ), { | ||
cloudServices: CS_CONFIG, | ||
toolbar: { | ||
items: [ | ||
'heading', | ||
'|', | ||
'bulletedList', | ||
'numberedList', | ||
// 'todoList', | ||
'|', | ||
'link', | ||
'insertTable', | ||
'|', | ||
'undo', | ||
'redo' | ||
], | ||
viewportTopOffset: window.getViewportTopOffsetConfig() | ||
} | ||
} ) | ||
.then( editor => { | ||
window.editor = editor; | ||
} ) | ||
.catch( err => { | ||
console.error( err.stack ); | ||
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
--- | ||
category: features | ||
--- | ||
|
||
# To-do lists | ||
|
||
The to-do list feature lets you create lists of interactive checkboxes with labels. They support all features of regular lists so you can nest to-do list together with bulleted and numbered lists in any combination. | ||
|
||
## Demo | ||
|
||
{@snippet features/todo-list} | ||
|
||
## Keyboard support | ||
|
||
You can check/uncheck an item by using the <kbd>Ctrl</kbd> + <kbd>Space</kbd> (or <kbd>⌘</kbd> + <kbd>Space</kbd> if you are using macOS) shortcut when the selection is in that item. | ||
|
||
## Installation | ||
|
||
To add this feature to your editor, install the [`@ckeditor/ckeditor5-list`](https://www.npmjs.com/package/@ckeditor/ckeditor5-list) package: | ||
|
||
```bash | ||
npm install --save @ckeditor/ckeditor5-list | ||
``` | ||
|
||
Then add the `TodoList` plugin to your plugin list and the toolbar configuration: | ||
|
||
```js | ||
import TodoList from '@ckeditor/ckeditor5-list/src/todolist'; | ||
|
||
ClassicEditor | ||
.create( document.querySelector( '#editor' ), { | ||
plugins: [ TodoList, ... ], | ||
toolbar: [ 'todoList', ... ], | ||
} ) | ||
.then( ... ) | ||
.catch( ... ); | ||
``` | ||
|
||
<info-box info> | ||
Read more about {@link builds/guides/integration/installing-plugins installing plugins}. | ||
</info-box> | ||
|
||
## HTML structure | ||
|
||
When you call {@link module:core/editor/utils/dataapimixin~DataApi#function-getData `editor.getData()`} to-do list will be represented as the following HTML: | ||
|
||
```html | ||
<ul class="todo-list"> | ||
<li> | ||
<label class="todo-list__label [todo-list__label_checked]"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled [checked] /> | ||
<span class="todo-list__label__description">Foo</span> | ||
</label> | ||
</li> | ||
</ul> | ||
``` | ||
|
||
For nested lists: | ||
|
||
```html | ||
<ul class="todo-list"> | ||
<li> | ||
<label class="todo-list__label [todo-list__label_checked]"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled [checked] /> | ||
<span class="todo-list__label__description">Foo</span> | ||
</label> | ||
<ul class="todo-list"> | ||
<li> | ||
<label class="todo-list__label [todo-list__label_checked]"> | ||
<input class="todo-list__label__checkmark" type="checkbox" disabled [checked] /> | ||
<span class="todo-list__label__description">Bar</span> | ||
</label> | ||
</li> | ||
</ul> | ||
</li> | ||
</ul> | ||
``` | ||
|
||
### Model representation | ||
|
||
From the technical point of view, to-do lists are built on top of the list feature. In the CKEditor 5 data model they are represented as a special `listType`, with optional `todoListChecked` attribute: | ||
|
||
```html | ||
<listItem listType="todo">Foo</listItem> | ||
``` | ||
|
||
```html | ||
<listItem listType="todo" todoListChecked="true">Bar</listItem> | ||
``` | ||
|
||
## Contribute | ||
|
||
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-list. |