quill-focus
Version:
Quill.js module that add focus mode.
194 lines (159 loc) • 11.5 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8">
<!-- Begin Jekyll SEO tag v2.3.0 -->
<title>Quill Focus | quill-focus</title>
<meta property="og:title" content="Quill Focus" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Enable focus mode" />
<meta property="og:description" content="Enable focus mode" />
<link rel="canonical" href="https://amka.github.io/quill-focus/" />
<meta property="og:url" content="https://amka.github.io/quill-focus/" />
<meta property="og:site_name" content="quill-focus" />
<script type="application/ld+json">
{
"name": "Quill Focus",
"description": "Enable focus mode",
"author": null,
"@type": "WebSite",
"url": "https://amka.github.io/quill-focus/",
"image": null,
"publisher": null,
"headline": "Quill Focus",
"dateModified": null,
"datePublished": null,
"sameAs": null,
"mainEntityOfPage": null,
"@context": "http://schema.org"
}
</script>
<!-- End Jekyll SEO tag -->
<meta name="description" content="Enable focus mode" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#157878">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="quill-focus.css">
<link href="https://unpkg.com/quill@latest/dist/quill.snow.css" rel="stylesheet">
<link href="https://rawgit.com/amka/quill-focus/master/src/focus.css" rel="stylesheet">
</head>
<body>
<a href="https://github.com/amka/quill-focus" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
<section class="main-content">
<h1 id="quill-focus">Quill Focus</h1>
<p>
This package is a
<a href="https://quillljs.com/">Quill.js</a> module that add
<strong>"Focus mode"</strong>.
</p>
<h2 id="example">Example</h2>
<div id="editor">
<p>Lorem ipsum dolor sit amet, albucius interpretaris ut vim. Sea id hinc assueverit. Odio moderatius vix at, sed ex appareat honestatis. Populo pericula accusamus eu est. Eos ne alterum antiopam, vitae expetendis sed at. Lucilius tacimates senserit id vim. Ius ea adhuc phaedrum salutandi, minimum perfecto qui no.
<p>An quo graecis suscipit. Ei qui audire efficiantur. Eum ei adhuc graeci. Eam no illud luptatum quaerendum, utinam aeterno postulant ex mel, ea semper verterem inciderint usu.
<p>Eos populo possit interpretaris an. Ex usu docendi apeirian, no quo autem aliquam. Ex atqui mollis percipit duo, nisl semper persius his ne, quot verterem ne vis. Iuvaret facilisi no eos, lucilius temporibus ius ne, pri ut esse numquam. Populo nemore docendi mea in, mel cu tation appareat.
<p>At vidit iudicabit vim, aliquip atomorum pericula sit ut. Vis intellegat conclusionemque ei. Usu ad commodo propriae quaestio, id probo option per. Te numquam vituperatoribus sea, mucius prompta vim id. Ius cu civibus reprehendunt, an eum cibo ponderum.
<p>Duis diceret adipisci et vis, no his quot sensibus. Tamquam accusata duo et, harum assueverit eu eos. Ex nisl temporibus cum, ea nominavi petentium urbanitas qui. Vix modus impedit abhorreant ex, vim tractatos tincidunt no. Unum pertinacia abhorreant his ex, quas partem molestiae in qui.
</div>
<script src="https://unpkg.com/quill@latest/dist/quill.js"></script>
<script src="https://rawgit.com/amka/quill-focus/master/src/focus.js"></script>
<script>
// Don't forget to register module
Quill.register('modules/focus', Focus)
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
focus: {
focusClass: 'focused-blot' // Defaults to .focused-blot.
}
}
});
quill.getSelection(true)
</script>
<h2 id="quickstart">Quickstart</h2>
<p>To install the module, set up an instance of Quill, add a script tag to the focus.js file and register it as a Quill
module. Don’t forget to link default focus stylesheet. See example.</p>
<div class="language-html highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"ie=edge"</span><span class="nt">></span>
<span class="nt"><title></span>Quill-Focus Example<span class="nt"></title></span>
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://unpkg.com/quill@latest/dist/quill.snow.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
<span class="c"><!-- Link Base Stylesheet --></span>
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://rawgit.com/amka/quill-focus/master/src/focus.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"editor"</span><span class="nt">></div></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://unpkg.com/quill@latest/dist/quill.js"</span><span class="nt">></script></span>
<span class="c"><!-- Link Focus module --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://rawgit.com/amka/quill-focus/master/src/focus.js"</span><span class="nt">></script></span>
<span class="nt"><script></span>
<span class="c1">// Don't forget to register module</span>
<span class="nx">Quill</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="s1">'modules/focus'</span><span class="p">,</span> <span class="nx">Focus</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">quill</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Quill</span><span class="p">(</span><span class="s1">'#editor'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">theme</span><span class="p">:</span> <span class="s1">'snow'</span><span class="p">,</span>
<span class="na">modules</span><span class="p">:</span> <span class="p">{</span>
<span class="c1">// Activate Focus module</span>
<span class="na">focus</span><span class="p">:</span> <span class="p">{</span>
<span class="na">focusClass</span><span class="p">:</span> <span class="s1">'focused-blot'</span> <span class="c1">// Defaults to .focused-blot.</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nt"></script></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre>
</div>
</div>
<h3>Contributors are welcomed!</h3>
<footer class="site-footer">
<span class="site-footer-owner">
<a href="https://github.com/amka/quill-focus">quill-focus</a> is maintained by
<a href="https://github.com/amka">amka</a>.</span>
<span class="site-footer-credits">This page was generated by
<a href="https://pages.github.com">GitHub Pages</a>.</span>
</footer>
</section>
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter47482414 = new Ya.Metrika2({ id:47482414, clickmap:true, trackLinks:true, accurateTrackBounce:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/tag.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks2"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/47482414" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
</body>
</html>