jodit-pro
Version:
PRO Version of Jodit Editor
509 lines (480 loc) • 15.4 kB
HTML
<!--
* Jodit Editor PRO (https://xdsoft.net/jodit/)
* See LICENSE.md in the project root for license information.
* Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
-->
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Jodit Pro — Style Plugin</title>
<link rel="icon" type="image/png" href="assets/icon.png" />
<style>
/* ===== Custom style definitions CSS ===== */
/* --- Block styles --- */
.document-title {
font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
font-size: 2.8em;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
color: #1a1a2e;
margin: 0 0 0.2em;
padding: 0;
}
.document-subtitle {
font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif;
font-size: 1.35em;
font-weight: 300;
line-height: 1.4;
color: #6c757d;
margin: 0 0 0.8em;
padding: 0;
}
.category-header {
font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #999;
margin: 0 0 0.4em;
padding: 0;
}
.info-box {
position: relative;
padding: 1.2em 1.5em;
border-left: 5px solid #e8436a;
border-radius: 0 8px 8px 0;
background: linear-gradient(135deg, #fef8f9 0%, #fff5f7 100%);
margin: 1.5em 0;
}
.info-box::before {
content: '';
position: absolute;
top: -6px;
right: -6px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 24px 24px 0;
border-color: transparent #e8436a transparent transparent;
border-radius: 0 8px 0 0;
}
.side-quote {
position: relative;
padding: 1.5em 2em;
border: none;
background: none;
margin: 1.5em 0;
font-style: normal;
}
.side-quote::before {
content: '\201C';
position: absolute;
top: -0.2em;
left: 0;
font-family: Georgia, serif;
font-size: 5em;
font-weight: 700;
line-height: 1;
color: #e8436a;
opacity: 0.3;
}
.side-quote p:first-child {
font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
font-size: 1.4em;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
color: #1a1a2e;
}
.side-quote p:last-child {
font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.2em;
text-align: right;
text-transform: uppercase;
color: #999;
margin-top: 0.5em;
}
.fancy-code {
position: relative;
padding: 2em 1.5em 1.5em;
border-radius: 12px;
margin: 1.5em 0;
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
font-size: 0.9em;
line-height: 1.6;
overflow-x: auto;
}
.fancy-code::before {
content: '';
position: absolute;
top: 12px;
left: 16px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff5f57;
box-shadow:
20px 0 0 #ffbd2e,
40px 0 0 #28c840;
}
.fancy-code-bright {
background: #f5f5f5;
border: 1px solid #e0e0e0;
color: #333;
}
.fancy-code-bright::after {
content: 'JavaScript';
position: absolute;
top: 8px;
right: 16px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 0.75em;
color: #999;
}
.fancy-code-dark {
background: #1e1e2e;
color: #cdd6f4;
}
.fancy-code-dark::after {
content: 'JavaScript';
position: absolute;
top: 8px;
right: 16px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 0.75em;
color: #585b70;
}
/* --- Text / Inline styles --- */
.marker {
background-color: #fdfd77;
padding: 0.05em 0.2em;
}
.marker-green {
background-color: #62f962;
padding: 0.05em 0.2em;
}
.marker-pink {
background-color: #fc7999;
padding: 0.05em 0.2em;
color: #fff;
}
.pen-red {
color: #e8436a;
}
.pen-green {
color: #118c4f;
}
.spoiler {
background-color: #1a1a2e;
color: #1a1a2e;
padding: 0.05em 0.2em;
border-radius: 3px;
transition: color 0.3s;
cursor: pointer;
}
.spoiler:hover {
color: #fff;
}
.typewriter {
font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
font-size: 0.92em;
background: #f0f0f0;
padding: 0.1em 0.4em;
border-radius: 4px;
border: 1px solid #ddd;
}
.uppercase-badge {
font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
font-size: 0.7em;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
background: #1a1a2e;
color: #fff;
padding: 0.2em 0.6em;
border-radius: 3px;
vertical-align: middle;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="container">
<li>
<a href="https://xdsoft.net/jodit/">Jodit homepage</a>
</li>
<li>
<a href="https://xdsoft.net/jodit/play.html">Playground</a>
</li>
<li>
<a href="https://xdsoft.net/jodit/docs/">Documentation</a>
</li>
<li><a href="https://github.com/xdan/jodit/">Github</a></li>
<li>
<a href="https://github.com/xdan/jodit/blob/main/CHANGELOG.md">Changelog</a>
</li>
<li>
<a href="#examples">Examples</a>
<ul id="examples">
<!-- see app.js-->
</ul>
</li>
<li style="float: right">
<a href="https://github.com/xdan/jodit/releases/latest">Download</a>
</li>
</ul>
</nav>
</header>
<div id="main_container" class="container">
<h1>Style Plugin Demo</h1>
<p>
The <strong>Style</strong> plugin lets you apply predefined CSS
classes to block and inline elements. Click the
<strong>Styles</strong> button in the toolbar to see all
available styles grouped by type.
</p>
<div id="introduction">
<h3>JavaScript</h3>
<pre><code class="language-javascript">
Jodit.make('#editor', {
customStyles: {
definitions: [
// Block styles
{ name: 'Document title', element: 'h2', classes: ['document-title'] },
{ name: 'Subtitle', element: 'h3', classes: ['document-subtitle'] },
{ name: 'Category header', element: 'p', classes: ['category-header'] },
{ name: 'Info box', element: 'p', classes: ['info-box'] },
{ name: 'Side quote', element: 'blockquote', classes: ['side-quote'] },
{ name: 'Code (bright)', element: 'pre', classes: ['fancy-code', 'fancy-code-bright'] },
{ name: 'Code (dark)', element: 'pre', classes: ['fancy-code', 'fancy-code-dark'] },
// Text styles
{ name: 'Marker', element: 'span', classes: ['marker'] },
{ name: 'Marker (green)', element: 'span', classes: ['marker-green'] },
{ name: 'Marker (pink)', element: 'span', classes: ['marker-pink'] },
{ name: 'Pen (red)', element: 'span', classes: ['pen-red'] },
{ name: 'Pen (green)', element: 'span', classes: ['pen-green'] },
{ name: 'Spoiler', element: 'span', classes: ['spoiler'] },
{ name: 'Typewriter', element: 'span', classes: ['typewriter'] },
{ name: 'Badge', element: 'span', classes: ['uppercase-badge'] },
]
}
});
</code></pre>
</div>
<div class="result">
<textarea id="area_editor"></textarea>
</div>
</div>
<footer>
<nav>
<ul class="container">
<li>
<a href="https://xdsoft.net/jodit/">Jodit homepage</a>
</li>
<li>
<a href="https://xdsoft.net/jodit/play.html">Playground</a>
</li>
<li>
<a href="https://xdsoft.net/jodit/docs/">Documentation</a>
</li>
<li><a href="https://github.com/xdan/jodit/">Github</a></li>
<li>
<a href="https://github.com/xdan/jodit/blob/main/CHANGELOG.md">Changelog</a>
</li>
<li style="float: right">
<a href="https://github.com/xdan/jodit/releases/latest">Download</a>
</li>
</ul>
</nav>
</footer>
</body>
<link rel="stylesheet" href="./es2021/jodit.fat.min.css" />
<link rel="stylesheet" href="assets/app.css" />
<link
href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Source+Sans+Pro:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<script src="./es2021/jodit.fat.min.js"></script>
<script src="assets/prism.js"></script>
<script src="assets/app.js"></script>
<script>
const editor = Jodit.make('#area_editor', {
height: 600,
buttons: [
'source',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'|',
'style',
'|',
'ul',
'ol',
'|',
'font',
'fontsize',
'brush',
'paragraph',
'|',
'image',
'table',
'link',
'|',
'align',
'|',
'undo',
'redo',
'|',
'hr',
'eraser',
'fullsize'
],
customStyles: {
definitions: [
// Block styles
{
name: 'Document title',
element: 'h2',
classes: ['document-title']
},
{
name: 'Subtitle',
element: 'h3',
classes: ['document-subtitle']
},
{
name: 'Category header',
element: 'p',
classes: ['category-header']
},
{
name: 'Info box',
element: 'p',
classes: ['info-box']
},
{
name: 'Side quote',
element: 'blockquote',
classes: ['side-quote']
},
{
name: 'Code (bright)',
element: 'pre',
classes: ['fancy-code', 'fancy-code-bright']
},
{
name: 'Code (dark)',
element: 'pre',
classes: ['fancy-code', 'fancy-code-dark']
},
// Text styles
{
name: 'Marker',
element: 'span',
classes: ['marker']
},
{
name: 'Marker (green)',
element: 'span',
classes: ['marker-green']
},
{
name: 'Marker (pink)',
element: 'span',
classes: ['marker-pink']
},
{
name: 'Pen (red)',
element: 'span',
classes: ['pen-red']
},
{
name: 'Pen (green)',
element: 'span',
classes: ['pen-green']
},
{
name: 'Spoiler',
element: 'span',
classes: ['spoiler']
},
{
name: 'Typewriter',
element: 'span',
classes: ['typewriter']
},
{
name: 'Badge',
element: 'span',
classes: ['uppercase-badge']
}
]
}
});
editor.value = `
<p class="category-header">Deep Dive</p>
<h2 class="document-title">The lost art of slow reading</h2>
<h3 class="document-subtitle">Why the way we consume text has fundamentally changed — and what we can do about it</h3>
<hr>
<blockquote class="side-quote">
<p>We are drowning in information but starving for knowledge.</p>
<p>Rutherford D. Rogers</p>
</blockquote>
<p>There was a time when reading a book meant <span class="marker">sitting with it for hours</span>, letting sentences settle into the mind like tea steeping in hot water. Today, most of us read the way we drive on a highway — scanning signs, changing lanes, barely noticing the scenery.</p>
<p>The average person now spends roughly <span class="pen-red">eight hours a day</span> looking at screens. That's more time than most of us sleep. And the vast majority of that time is spent skimming: headlines, notifications, feeds, threads. We scroll past ten thousand words before lunch and remember <span class="spoiler">almost none of them</span>.</p>
<p class="info-box">A 2023 study at the University of Valencia found that people who read long-form text on screens comprehend 29% less than those who read the same text on paper. The effect was strongest for <strong>informational</strong> texts and nearly disappeared for narrative fiction.</p>
<hr>
<h4>The F-shaped pattern</h4>
<p>Eye-tracking research by the Nielsen Norman Group revealed something called the <span class="typewriter">F-shaped reading pattern</span>. Users read the first few lines almost fully, then scan progressively less and less as they move down the page, creating a shape that looks like the letter F.</p>
<p>This isn't laziness — it's <span class="pen-green">adaptation</span>. When you encounter hundreds of articles per day, your brain develops shortcuts. The problem is that these shortcuts are <span class="marker-pink">terrible</span> for deep comprehension.</p>
<pre class="fancy-code fancy-code-bright"><code>// How your brain reads the web:
read(firstLine); // 100% attention
read(secondLine); // 80% attention
scan(thirdLine); // 40% attention
skip(everythingElse); // 5% attention
scrollToComments(); // 200% attention</code></pre>
<h4>Three techniques for deeper reading</h4>
<p><span class="uppercase-badge">First</span> Try the <strong>Pomodoro method</strong> for reading: 25 minutes of focused reading, then a 5-minute break. No phone, no tabs, no multitasking. Just you and the text.</p>
<p><span class="uppercase-badge">Second</span> Annotate as you go. <span class="marker-green">Highlighting passages</span> forces your brain to evaluate what's important, creating a secondary layer of engagement with the material.</p>
<p><span class="uppercase-badge">Third</span> After finishing a chapter or article, close your eyes and try to summarize what you just read in three sentences. If you can't, go back. This is called <span class="typewriter">retrieval practice</span> and it's one of the most effective learning strategies known to cognitive science.</p>
<pre class="fancy-code fancy-code-dark"><code>// A simple reading tracker
const session = {
started: new Date(),
pages: 0,
notes: [],
addNote(text) {
this.notes.push({
text,
time: new Date(),
page: this.pages
});
},
summary() {
const mins = (Date.now() - this.started) / 60000;
return \`Read \${this.pages} pages in \${mins.toFixed(0)} min\`;
}
};</code></pre>
<h4>The paradox of choice</h4>
<p>We have access to more written material than any generation in history. The Library of Alexandria held roughly <span class="pen-red">400,000 scrolls</span>. Today, the internet adds an estimated 2.5 million new blog posts <em>every single day</em>.</p>
<p>Yet for all this abundance, most people read <span class="marker">fewer books per year</span> than their grandparents did. The sheer volume of available content creates a kind of paralysis — there's always something <span class="spoiler">newer, shorter, more urgent</span> competing for attention.</p>
<blockquote class="side-quote">
<p>A reader lives a thousand lives before he dies. The man who never reads lives only one.</p>
<p>George R.R. Martin</p>
</blockquote>
<p>The solution isn't to read <em>more</em> — it's to read <span class="pen-green">better</span>. Choose fewer things, read them more carefully, and give yourself permission to <span class="marker-pink">sit with an idea</span> before rushing to the next one.</p>
`;
</script>
</html>