diff --git a/_data/nav.yml b/_data/nav.yml index 520597241..71162143a 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -30,7 +30,8 @@ - url: "whats-new" - url: "basic-example" - url: "full-featured" - - url: "comments-2" + - url: "comments-2" + - url: "checklist" - url: "pageembed" - url: "permanentpen" - url: "formatpainter" diff --git a/_includes/codepens/checklist/index.html b/_includes/codepens/checklist/index.html new file mode 100644 index 000000000..5b6d4d386 --- /dev/null +++ b/_includes/codepens/checklist/index.html @@ -0,0 +1,59 @@ + diff --git a/_includes/codepens/checklist/index.js b/_includes/codepens/checklist/index.js new file mode 100644 index 000000000..d8d1311e1 --- /dev/null +++ b/_includes/codepens/checklist/index.js @@ -0,0 +1,6 @@ +tinymce.init({ + selector: "textarea", + plugins: "lists checklist", + toolbar: "checklist", + height: "600px", +}); diff --git a/_includes/codepens/checklist/style.css b/_includes/codepens/checklist/style.css new file mode 100644 index 000000000..4bd470c1e --- /dev/null +++ b/_includes/codepens/checklist/style.css @@ -0,0 +1,19 @@ +.tox-checklist > li:not(.tox-checklist--hidden) { + list-style: none; + margin: .25em 0; + position: relative; +} +.tox-checklist > li:not(.tox-checklist--hidden)::before { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); + background-size: 100%; + content: ''; + cursor: pointer; + height: 1em; + left: -1.5em; + position: absolute; + top: .125em; + width: 1em; +} +.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A"); +} \ No newline at end of file diff --git a/demo/checklist.md b/demo/checklist.md new file mode 100644 index 000000000..381b153b6 --- /dev/null +++ b/demo/checklist.md @@ -0,0 +1,15 @@ +--- +layout: default +title: Checklist plugin +title_nav: Checklist +description: Add checklists to the content. +keywords: lists todo checklist +controls: toolbar button +--- + + +## Live example + +This example shows how to use the **Checklist** plugin to add interactive checklists to your content. For more information on the Checklist plugin, see the [docs](). + +{% include codepen.html id="checklist" %} \ No newline at end of file