Inital
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Trumbowyg by Alex-D</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
<style>
|
||||
.documentation-body {
|
||||
background: #1a1a1a;
|
||||
color: #f4f7fa;
|
||||
}
|
||||
|
||||
.documentation-body .section-title {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.section h4 {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.wrapper .note {
|
||||
color: #ccc;
|
||||
border-left-color: rgba(255, 184, 100, 0.7);
|
||||
}
|
||||
|
||||
.hljs {
|
||||
filter: invert(92%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Dark theme</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
Gives you a dark button pane.
|
||||
</p>
|
||||
<p class="note">
|
||||
For demo purpose, this page has been forced to be in dark mode.
|
||||
</p>
|
||||
|
||||
<div class="trumbowyg-dark">
|
||||
<textarea id="editor">
|
||||
<h2>Welcome to the dark side of Trumbowyg!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="html">
|
||||
<!-- Wrap the editor with an element with the class trumbowyg-dark -->
|
||||
<div class="trumbowyg-dark">
|
||||
<textarea id="editor"></textarea>
|
||||
</div>
|
||||
</code></pre>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor').trumbowyg();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THIS LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PRUPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Trumbowyg by Alex-D</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Default</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
No plugin, no options. Just naked Trumbowyg.
|
||||
</p>
|
||||
|
||||
<div id="editor">
|
||||
<h2>This editor is the default build of Trumbowyg.</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor').trumbowyg();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THIS LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PRUPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Trumbowyg by Alex-D</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Simple</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
Only strong (bold), emphasis (italic), some align, image and link.
|
||||
</p>
|
||||
|
||||
<div id="editor">
|
||||
<p style="text-align: center;">
|
||||
<strong>Colllect</strong> — See <em>more</em> at <a href="http://getcollect.io/?ref=trumbowyg">http://colllect.io</a>
|
||||
</p>
|
||||
<p style="text-align: center;">
|
||||
<img src="http://getcollect.io/images/install/ui.png" alt="Colllect" width="50%">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor').trumbowyg({
|
||||
btns: [
|
||||
['strong', 'em'],
|
||||
['justifyLeft', 'justifyCenter'],
|
||||
['insertImage', 'link']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THIS LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PRUPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Demos | Trumbowyg: A lightweight WYSIWYG editor | Alex-D / Alexandre Demode</title>
|
||||
<meta name="description" content="Trumbowyg is a jQuery plugin for create WYSIWYG editor">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" href="../favicon.png">
|
||||
|
||||
<link rel="stylesheet" href="../css/main.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;visibility: hidden;height: 0;width: 0;">
|
||||
<symbol id="trumbowyg-link" viewBox="0 0 72 72">
|
||||
<path d="M30.9 49.1l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9l-5.2-5.2c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L10.8 42c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7C38 50.5 38.6 46.3 37 43l-6.1 6.1zM38.5 22.7l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2-6.5 6.5c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1z"></path>
|
||||
<path d="M44.1 30.7c.2-.2.4-.6.4-.9 0-.3-.1-.6-.4-.9l-2.3-2.3c-.2-.2-.6-.4-.9-.4-.3 0-.6.1-.9.4L25.8 40.8c-.2.2-.4.6-.4.9 0 .3.1.6.4.9l2.3 2.3c.2.2.6.4.9.4.3 0 .6-.1.9-.4l14.2-14.2z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-inner">
|
||||
<header class="header-documentation">
|
||||
<a href="../" class="documentation-logo-link" title="Back to Trumbowyg landing">
|
||||
<img src="../img/logo-doc.svg" alt="" class="documentation-logo">
|
||||
</a>
|
||||
<h1 class="documentation-title">
|
||||
Demos
|
||||
</h1>
|
||||
<nav class="documentation-menu">
|
||||
<a href="../documentation/">Docs</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="../documentation/plugins/">Plugins</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="../documentation/core/">Core</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="../demos/">Demos</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<aside class="documentation-summary">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="documentation-summary-title">Core</span>
|
||||
<ul>
|
||||
<li><a href="./core/default.html">Default</a></li>
|
||||
<li><a href="./core/simple.html">Simple</a></li>
|
||||
<li><a href="./core/dark-theme.html">Dark theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="documentation-summary-title">Plugins</span>
|
||||
<ul>
|
||||
<li><a href="./plugins/allowtagsfrompaste.html">Allow tags from paste</a></li>
|
||||
<li><a href="./plugins/base64.html">Base 64</a></li>
|
||||
<li><a href="./plugins/cleanpaste.html">Clean paste</a></li>
|
||||
<li><a href="./plugins/colors.html">Colors</a></li>
|
||||
<li><a href="./plugins/emoji.html">Emoji</a></li>
|
||||
<li><a href="./plugins/fontfamily.html">Font family</a></li>
|
||||
<li><a href="./plugins/fontsize.html">Font size</a></li>
|
||||
<li><a href="./plugins/giphy.html">Giphy</a></li>
|
||||
<li><a href="./plugins/highlight.html">Highlight</a></li>
|
||||
<li><a href="./plugins/history.html">History</a></li>
|
||||
<li><a href="./plugins/indent.html">Indent</a></li>
|
||||
<li><a href="./plugins/insertaudio.html">Insert audio</a></li>
|
||||
<li><a href="./plugins/lineheight.html">Line height</a></li>
|
||||
<li><a href="./plugins/mathml.html">MathML</a></li>
|
||||
<li><a href="./plugins/mention.html">Mention</a></li>
|
||||
<li><a href="./plugins/noembed.html">Noembed</a></li>
|
||||
<li><a href="./plugins/pasteembed.html">Paste embed</a></li>
|
||||
<li><a href="./plugins/pasteimage.html">Paste image</a></li>
|
||||
<li><a href="./plugins/preformatted.html">Preformatted</a></li>
|
||||
<li><a href="./plugins/resizimg.html">Resizimg</a></li>
|
||||
<li><a href="./plugins/ruby.html">Ruby</a></li>
|
||||
<li><a href="./plugins/specialchars.html">Special chars</a></li>
|
||||
<li><a href="./plugins/table.html">Table</a></li>
|
||||
<li><a href="./plugins/template.html">Template</a></li>
|
||||
<li><a href="./plugins/upload.html">Upload</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<div class="documentation-sidebar-beer">
|
||||
<a href="../#donate">
|
||||
<img src="../img/beer.svg" alt="" class="beer-icon">
|
||||
<span class="beer-label">
|
||||
Do you enjoy Trumbowyg? <br>
|
||||
Buy me some beers :)
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="main main-demos">
|
||||
<iframe src="./core/default.html" frameborder="0"></iframe>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<script src="../js/vendor/highlight.js"></script>
|
||||
<script src="../js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,52 @@
|
||||
var baseURL = window.location.hostname.indexOf('github.') !== -1 ? '//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/' : '../../../';
|
||||
var styleLoadingContainer = document.querySelector('.loading-head');
|
||||
var scriptLoadingContainer = document.querySelector('.loading-body');
|
||||
|
||||
function loadTag(tagToInsert, container, comment, tagForDocumentation) {
|
||||
'use strict';
|
||||
|
||||
document.write(tagToInsert);
|
||||
|
||||
var html = '';
|
||||
if (container.innerHTML.trim().length > 0) {
|
||||
html = '\n' + container.innerHTML.trim() + '\n';
|
||||
}
|
||||
|
||||
if (comment !== undefined) {
|
||||
html += '\n<!-- ' + comment + ' -->';
|
||||
}
|
||||
html += tagForDocumentation.replace(/</g, '<');
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function loadStyle(stylePath, comment) {
|
||||
'use strict';
|
||||
|
||||
loadTag(
|
||||
'<link rel="stylesheet" href="' + baseURL + stylePath + '"/>',
|
||||
styleLoadingContainer,
|
||||
comment,
|
||||
'\n<link rel="stylesheet" href="trumbowyg/' + stylePath + '">\n\n'
|
||||
);
|
||||
}
|
||||
|
||||
function loadScript(scriptPath, comment) {
|
||||
'use strict';
|
||||
|
||||
loadTag(
|
||||
'<script src="' + baseURL + scriptPath + '"></script>',
|
||||
scriptLoadingContainer,
|
||||
comment,
|
||||
'\n<script src="trumbowyg/' + scriptPath + '"></script>\n\n'
|
||||
);
|
||||
}
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
$('a').click(function() {
|
||||
window.top.location = $(this).attr('href');
|
||||
return false;
|
||||
});
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
$('.js-code-to-eval').each(function() {
|
||||
eval($(this).text()); // jshint ignore:line
|
||||
$(this).text(
|
||||
$(this).text()
|
||||
.replace(/'Client-ID\s[a-z0-9]+'/, '\'Client-ID xxxxxxxxxxxx\'')
|
||||
.replace(/apiKey:\s+'.*'/, 'apiKey: \'xxxxxxxxxxxx\'')
|
||||
);
|
||||
});
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Allow tags from paste plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Allow tags from paste plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allows you to filter tags allowed when an user paste some code into the editor.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-allowtagsfrompaste" class="button button-demo">Read allow tags from paste plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h4>Try to paste something!</h4>
|
||||
<p>
|
||||
Only `h2`, `p` `strong` and `br` tags are allowed!
|
||||
All other tags will be removed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sample-data">
|
||||
<h4 style="padding: 0;">Some text to copy to test</h4>
|
||||
<p>
|
||||
This table will be not pasted:
|
||||
</p>
|
||||
<table style="margin: 0;">
|
||||
<tr>
|
||||
<td>h4 must be kept</td>
|
||||
<td>but not</td>
|
||||
<td>this table</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Second line</td>
|
||||
<td>will be</td>
|
||||
<td>striped out too</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
'viewHTML',
|
||||
'h4'
|
||||
],
|
||||
plugins: {
|
||||
allowTagsFromPaste: {
|
||||
allowedTags: ['h4', 'p', 'br']
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/allowtagsfrompaste/trumbowyg.allowtagsfrompaste.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Base64 plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Base64 plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
You can insert an image in <em>base64</em> in src attribute of <code>img</code> tag.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-base64" class="button button-demo">Read base64 plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Insert your base64 image!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['base64']
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3>base64 in dropdown</h3>
|
||||
|
||||
<div id="editor-dropdown">
|
||||
<h2>Insert your base64 image through image dropdown!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-dropdown')
|
||||
.trumbowyg({
|
||||
btnsDef: {
|
||||
// Create a new dropdown
|
||||
image: {
|
||||
dropdown: ['insertImage', 'base64'],
|
||||
ico: 'insertImage'
|
||||
}
|
||||
},
|
||||
// Redefine the button pane
|
||||
btns: [
|
||||
['viewHTML'],
|
||||
['formatting'],
|
||||
['strong', 'em', 'del'],
|
||||
['superscript', 'subscript'],
|
||||
['link'],
|
||||
['image'], // Our fresh created dropdown
|
||||
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
|
||||
['unorderedList', 'orderedList'],
|
||||
['horizontalRule'],
|
||||
['removeformat'],
|
||||
['fullscreen']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/base64/trumbowyg.base64.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Clean paste plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Clean paste plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
Clean paste plugin handle paste events, clean the HTML code before insert content into the editor.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-cleanpaste" class="button button-demo">Read clean paste plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h4>Try to paste something from Microsoft Word or something!</h4>
|
||||
<p>
|
||||
Then, check the markup. Should be cleaner than original.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor').trumbowyg();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/cleanpaste/trumbowyg.cleanpaste.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Colors plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Colors plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allow you to add a foreground and/or background color picker.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-colors" class="button button-demo">Read colors plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>You can color me!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['foreColor', 'backColor']
|
||||
],
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Custom color list</h3>
|
||||
<p>
|
||||
You can customize the color list used by both dropdowns.
|
||||
</p>
|
||||
|
||||
<div id="editor-custom-color-list">
|
||||
<h2>You can color me with custom color list!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-custom-color-list').trumbowyg({
|
||||
btns: [
|
||||
['foreColor', 'backColor']
|
||||
],
|
||||
plugins: {
|
||||
colors: {
|
||||
colorList: [
|
||||
'000', '111', '222', 'ffea00'
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Custom color list for each button</h3>
|
||||
<p>
|
||||
You can customize the color list used by each dropdown independently.
|
||||
</p>
|
||||
|
||||
<div id="editor-custom-color-list-for-each">
|
||||
<h2>You can color me with custom color list!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-custom-color-list-for-each').trumbowyg({
|
||||
btns: [
|
||||
['foreColor', 'backColor']
|
||||
],
|
||||
plugins: {
|
||||
colors: {
|
||||
foreColorList: [
|
||||
'ff0000', '00ff00', '0000ff'
|
||||
],
|
||||
backColorList: [
|
||||
'000', '333', '555'
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Display colors as a list like other dropdowns</h3>
|
||||
<p>
|
||||
The <code>displayAsList</code> option allows you to change the layout of the color dropdown from squares to list.
|
||||
</p>
|
||||
|
||||
<div id="editor-display-as-list">
|
||||
<h2>Check the dropdown is not like other examples!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
// Human labels for each hex color
|
||||
var colorLabels = {
|
||||
'#000': 'Black',
|
||||
'#555': 'Dark grey',
|
||||
'#ff0000': 'Red',
|
||||
'#00ff00': 'Green',
|
||||
'#0000ff': 'Blue',
|
||||
'#ff1493': 'Pink',
|
||||
};
|
||||
|
||||
$.each(colorLabels, function(colorHexCode, colorLabel) {
|
||||
$.trumbowyg.langs.en[colorHexCode] = colorLabel;
|
||||
})
|
||||
|
||||
$('#editor-display-as-list').trumbowyg({
|
||||
btns: [
|
||||
['foreColor', 'backColor']
|
||||
],
|
||||
plugins: {
|
||||
colors: {
|
||||
foreColorList: [
|
||||
'ff0000', '00ff00', '0000ff', 'ff1493'
|
||||
],
|
||||
backColorList: [
|
||||
'000', '555', 'ff0000'
|
||||
],
|
||||
displayAsList: true
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Loading</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/colors/ui/trumbowyg.colors.min.css', 'Import color plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/colors/trumbowyg.colors.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Emoji plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Emoji plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allow you to add an emoji picker in Trumbowyg.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-emoji" class="button button-demo">Read emoji plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Select an emoji !</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['emoji']
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/emoji/ui/trumbowyg.emoji.min.css', 'Import emoji plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/emoji/trumbowyg.emoji.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Font family plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Font family plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
User can pick some fonts in Trumbowyg.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-fontfamily" class="button button-demo">Read font family plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Change the font!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['fontfamily']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Custom font list</h3>
|
||||
|
||||
<div id="editor-custom-font-list">
|
||||
<h2>Change the font!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-custom-font-list')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['fontfamily']
|
||||
],
|
||||
plugins: {
|
||||
fontfamily: {
|
||||
fontList: [
|
||||
{name: 'Arial', family: 'Arial, Helvetica, sans-serif'},
|
||||
{name: 'Comic Sans', family: '\'Comic Sans MS\', Textile, cursive, sans-serif'},
|
||||
{name: 'Open Sans', family: '\'Open Sans\', sans-serif'}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/fontfamily/trumbowyg.fontfamily.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Font size plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Font size plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
User can change font size in Trumbowyg.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-fontsize" class="button button-demo">Read font size plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Change the size!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['fontsize']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Custom font sizes</h3>
|
||||
|
||||
<div id="editor-custom-font-sizes">
|
||||
<h2>Change the font!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-custom-font-sizes')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['fontsize']
|
||||
],
|
||||
plugins: {
|
||||
fontsize: {
|
||||
sizeList: [
|
||||
'14px',
|
||||
'18px',
|
||||
'22px'
|
||||
],
|
||||
allowCustomSize: false
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/fontsize/trumbowyg.fontsize.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Giphy plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Giphy plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
User can insert some GIFs from Giphy in Trumbowyg.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-giphy" class="button button-demo">Read Giphy plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Insert some GIFs</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['giphy']
|
||||
],
|
||||
plugins: {
|
||||
giphy: {
|
||||
apiKey: 'dNhCbN6hrhpBMxXhIswM34wIR2UBpCns'
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/giphy/ui/trumbowyg.giphy.min.css', 'Import Giphy plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/giphy/trumbowyg.giphy.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Highlight plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism-tomorrow.css">
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Highlight plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allow you to add an code highlighter in Trumbowyg.
|
||||
</p>
|
||||
<a href="../../documentation/plugins/#plugin-highlight" class="button button-demo">Read highlight plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<p>Just press plugin button and paste code there!</p>
|
||||
<p><br></p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['highlight']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
<!-- Import prismjs stylesheet -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-highlight/prism-line-highlight.min.css">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
<!-- Import prismjs -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
|
||||
<!-- Import prismjs line highlight plugin -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-highlight/prism-line-highlight.min.js"></script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
<!-- Import highlight.js -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-highlight/prism-line-highlight.min.js"></script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/highlight/ui/trumbowyg.highlight.min.css', 'Import highlight plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/highlight/trumbowyg.highlight.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>History plugin | Trumbowyg by Alex-D</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">History plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin gives you an improved undo and redo functionality based on editor changes.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-history" class="button button-demo">Read history plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Lorem ipsum dolor sit amet</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [['historyUndo','historyRedo']]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/history/trumbowyg.history.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Indent plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Indent plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allow you to indent or outdent into your page creating vibrante documents.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-indent" class="button button-demo">Read insert indent plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>You can make me come alive!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['indent', 'outdent']
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/indent/trumbowyg.indent.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert audio plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Insert audio plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allow you to insert audio files into your page creating vibrante documents.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-insertaudio" class="button button-demo">Read insert audio plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>You can make me come alive! Insert Audio</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['insertAudio']
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/insertaudio/trumbowyg.insertaudio.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Line height plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Line height plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
User can change the line-height in Trumbowyg.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-lineheight" class="button button-demo">Read font size plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Change the size!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['lineheight']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Custom font sizes</h3>
|
||||
|
||||
<div id="editor-custom-font-sizes">
|
||||
<h2>Change the font!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-custom-font-sizes')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['lineheight']
|
||||
],
|
||||
plugins: {
|
||||
lineheight: {
|
||||
sizeList: [
|
||||
'14px',
|
||||
'18px',
|
||||
'22px'
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/lineheight/trumbowyg.lineheight.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MathML plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">MathML plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allows user to use MathML.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-mathml" class="button button-demo">Read MathML plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>You can try to insert some formulas</h2>
|
||||
</div>
|
||||
|
||||
<div class="sample-data">
|
||||
<h4>Some formulas to copy/paste to try it</h4>
|
||||
<p>
|
||||
<input type="text" readonly value="\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)" onclick="this.select();">
|
||||
<input type="text" readonly value="P(E) = {n \choose k} p^k (1-p)^{ n-k}" onclick="this.select();">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
// MathJax inline configuration
|
||||
MathJax.Hub.Config({
|
||||
tex2jax: {
|
||||
inlineMath: [
|
||||
['$', '$'],
|
||||
['\\(', '\\)']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Trumbowyg initialization with MathML button
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
'mathml'
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- Import MathJax -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
<!-- Import MathJax -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/mathml/ui/trumbowyg.mathml.min.css', 'Import MathML plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/mathml/trumbowyg.mathml.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mention plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Mention plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allows to mention an user from a source list.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-mention" class="button button-demo">Read Mention plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Check this out, there are lot of guys in the mention dropdown!</h2>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['mention']
|
||||
],
|
||||
plugins: {
|
||||
mention: {
|
||||
source: [
|
||||
{login: 'jdoe', name: 'John Doe (The Jean-Claude Van Damme\'s intern)'},
|
||||
{login: 'lgaga', name: 'Lady Gaga'},
|
||||
{login: 'jcvd', name: 'Jean-Claude Van Damme'},
|
||||
{login: 'nminaj', name: 'Nicki Minaj'},
|
||||
{login: 'mshinoda', name: 'Mike Shinoda'},
|
||||
{login: 'epiaf', name: 'Edith Piaf'},
|
||||
{login: 'kwest', name: 'Kanye West'},
|
||||
{login: 'jbalasko', name: 'Josiane Balasko'},
|
||||
{login: 'jcesar', name: 'Julius Cesarius'},
|
||||
{login: 'mlisa', name: 'Mona Lisa'},
|
||||
{login: 'mjackson', name: 'Mickael Jackson'},
|
||||
{login: 'fflament', name: 'Flavie Flament'},
|
||||
],
|
||||
formatDropdownItem: function (item) {
|
||||
return item.name + ' (@' + item.login + ')';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
<!-- Import MathJax -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/mention/ui/trumbowyg.mention.min.css', 'Import Mention plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/mention/trumbowyg.mention.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Noembed plugin | Trumbowyg</title>
|
||||
<script src="../js/loader.js"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Noembed plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
You can insert embedded content via an embed proxy.
|
||||
Plugin uses <a href="//noembed.com">noembed</a> by default.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-noembed" class="button button-demo">Read noembed plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Embed Content!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F342548257&show_artwork=true"></iframe>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['noembed']
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3>Put in dropdown</h3>
|
||||
|
||||
<div id="editor-dropdown">
|
||||
<h2>Embed content through image dropdown!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-dropdown')
|
||||
.trumbowyg({
|
||||
btnsDef: {
|
||||
// Create a new dropdown
|
||||
image: {
|
||||
dropdown: ['insertImage', 'noembed'],
|
||||
ico: 'insertImage'
|
||||
}
|
||||
},
|
||||
// Redefine the button pane
|
||||
btns: [
|
||||
['viewHTML'],
|
||||
['formatting'],
|
||||
['strong', 'em', 'del'],
|
||||
['superscript', 'subscript'],
|
||||
['link'],
|
||||
['image'], // Our fresh created dropdown
|
||||
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
|
||||
['unorderedList', 'orderedList'],
|
||||
['horizontalRule'],
|
||||
['removeformat'],
|
||||
['fullscreen']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/noembed/trumbowyg.noembed.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paste embed plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Paste embed plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allow you to insert iframes into your editor just by pasting an url.<br/>
|
||||
It uses <a href="https://noembed.com">noembed</a> API to support Twitter, Youtube, Soundcloud and more. Find all supported websites at <a href="https://noembed.com">noembed</a>.<br/>
|
||||
This plugin also uses <a href="https://www.maxmade.nl/">MAXmade</a> API in order to extend the list of supported websites. Need a website supported? Message them, they're nice.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-pasteembed" class="button button-demo">Read paste embed plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Try to paste some urls!</h2>
|
||||
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/376360739&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
|
||||
<p>Try pasting this one: https://www.youtube.com/watch?v=dQw4w9WgXcQ</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor').trumbowyg();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/pasteembed/trumbowyg.pasteembed.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paste image plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Paste image plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
Paste image plugin handle paste events, check if you have image files in your clipboard, then paste them
|
||||
into the editor as base64. It do nothing on text or HTML paste.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-pasteimage" class="button button-demo">Read paste image plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Try to paste some image!</h2>
|
||||
<p>For example, you can right click > Copy Image on the Trumbowyg logo, then paste it here.</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor').trumbowyg();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/pasteimage/trumbowyg.pasteimage.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preformatted plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Preformatted plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
Wraps/unwraps your code with <code><pre><code></code> tags.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-preformatted" class="button button-demo">Read preformatted plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>
|
||||
Some code to wrap
|
||||
</h2>
|
||||
<p>
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
'viewHTML',
|
||||
'preformatted'
|
||||
]
|
||||
});
|
||||
</p>
|
||||
<p>
|
||||
Then check the HTML, code is now wrapped into <code>pre</code> + <code>code</code> tags!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
'viewHTML',
|
||||
'preformatted'
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/preformatted/trumbowyg.preformatted.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Resizimg plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Resizimg plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
Images can be resized by click over the image and dragging their bottom-right corner (the white ones).
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-resizimg" class="button button-demo">Read resizimg plugin documentation</a>
|
||||
|
||||
<div id="editor" style="margin: 1rem">
|
||||
<h2>Resize that image!</h2>
|
||||
<img src="//rawcdn.githack.com/Alex-D/Trumbowyg/develop/banner.jpg" style="height: 200px">
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<p>
|
||||
Nothing to do unless you want to change the default values of options, in which case you could:
|
||||
</p>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor').trumbowyg({
|
||||
plugins: {
|
||||
resizimg: {
|
||||
minSize: 64,
|
||||
step: 16,
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<p>Note the additional requirement: the <a href="https://github.com/RickStrahl/jquery-resizable" target="_blank">jquery-resizable</a> plugin must be loaded for Resizimg to work.</p>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.0.min.js"><\/script>')</script>
|
||||
|
||||
<!-- Import dependency for Resizimg (tested with version 0.35). For a production setup, follow install instructions here: https://github.com/RickStrahl/jquery-resizable -->
|
||||
<script src="//rawcdn.githack.com/RickStrahl/jquery-resizable/0.35/dist/jquery-resizable.min.js"></script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
<!-- Import dependency for Resizimg -->
|
||||
<script src="//rawcdn.githack.com/RickStrahl/jquery-resizable/0.35/dist/jquery-resizable.min.js"></script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.css');
|
||||
loadScript('dist/trumbowyg.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/resizimg/trumbowyg.resizimg.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ruby plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Ruby plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
You can insert Ruby markup.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-ruby" class="button button-demo">Read ruby plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Insert your ruby markup!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['ruby']
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/ruby/trumbowyg.ruby.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Special chars plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Special chars plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allow you to add a picker for special character in Trumbowyg.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-specialchars" class="button button-demo">Read special chars plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Select a character!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['specialChars']
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Custom char list</h3>
|
||||
|
||||
<div id="editor-custom-list">
|
||||
<h2>Select a character!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-custom-list')
|
||||
.trumbowyg({
|
||||
btns: [
|
||||
['specialChars']
|
||||
],
|
||||
plugins: {
|
||||
specialchars: {
|
||||
symbolList: [
|
||||
'00A2', '00A5', '00A4', '2030', null,
|
||||
'00A9', '00AE', '2122', null,
|
||||
'2023', '25B6', '2B29', '25C6', null,
|
||||
'2211', '2243', '2264', '2265'
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/specialchars/ui/trumbowyg.specialchars.min.css', 'Import special chars plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/specialchars/trumbowyg.specialchars.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Table plugin | Trumbowyg</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Table plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allows you to add and manage a table.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-table" class="button button-demo">Read table plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Add a table to the editor</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['table']
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadStyle('dist/plugins/table/ui/trumbowyg.table.min.css', 'Import table plugin specific stylesheet');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/table/trumbowyg.table.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Template plugin | Trumbowyg by Alex-D</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Template plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
This plugin allows you to add a template-dropdown.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-template" class="button button-demo">Read template plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Lorem ipsum dolor sit amet</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>The code</h3>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['template'],
|
||||
plugins: {
|
||||
templates: [
|
||||
{
|
||||
name: 'Template 1',
|
||||
html: '<p>I am a template!</p>'
|
||||
},
|
||||
{
|
||||
name: 'Template 2',
|
||||
html: '<p>I am a different template!</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/template/trumbowyg.template.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Upload plugin | Trumbowyg by Alex-D</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<div class="main main-demo-inner">
|
||||
<section class="wrapper section">
|
||||
<h2 class="section-title">Upload plugin</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Basic usage</h3>
|
||||
<p>
|
||||
You can insert an image by upload.
|
||||
</p>
|
||||
|
||||
<a href="../../documentation/plugins/#plugin-upload" class="button button-demo">Read upload plugin documentation</a>
|
||||
|
||||
<div id="editor">
|
||||
<h2>Insert your uploaded image!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>The code</h2>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor')
|
||||
.trumbowyg({
|
||||
btns: ['upload'],
|
||||
plugins: {
|
||||
// Add imagur parameters to upload plugin for demo purposes
|
||||
upload: {
|
||||
serverPath: 'https://api.imgur.com/3/image',
|
||||
fileFieldName: 'image',
|
||||
headers: {
|
||||
'Authorization': 'Client-ID 9e57cb1c4791cea'
|
||||
},
|
||||
urlPropertyName: 'data.link'
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Upload in dropdown</h3>
|
||||
|
||||
<div id="editor-dropdown">
|
||||
<h2>Insert your uploaded image through image dropdown!</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
|
||||
optio nam reiciendis eius beatae quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or
|
||||
alternatively [About] The Purposes of Good and Evil ). The original passage began: Neque porro quisquam est
|
||||
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there
|
||||
anyone who loves grief itself since it is grief and thus wants to obtain it").
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>The code</h4>
|
||||
<pre><code class="js-code-to-eval javascript">
|
||||
$('#editor-dropdown')
|
||||
.trumbowyg({
|
||||
btnsDef: {
|
||||
// Create a new dropdown
|
||||
image: {
|
||||
dropdown: ['insertImage', 'upload'],
|
||||
ico: 'insertImage'
|
||||
}
|
||||
},
|
||||
// Redefine the button pane
|
||||
btns: [
|
||||
['viewHTML'],
|
||||
['formatting'],
|
||||
['strong', 'em', 'del'],
|
||||
['superscript', 'subscript'],
|
||||
['link'],
|
||||
['image'], // Our fresh created dropdown
|
||||
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
|
||||
['unorderedList', 'orderedList'],
|
||||
['horizontalRule'],
|
||||
['removeformat'],
|
||||
['fullscreen']
|
||||
],
|
||||
plugins: {
|
||||
// Add imagur parameters to upload plugin for demo purposes
|
||||
upload: {
|
||||
serverPath: 'https://api.imgur.com/3/image',
|
||||
fileFieldName: 'image',
|
||||
headers: {
|
||||
'Authorization': 'Client-ID 9e57cb1c4791cea'
|
||||
},
|
||||
urlPropertyName: 'data.link'
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3>Setup</h3>
|
||||
|
||||
<h4>In head tag</h4>
|
||||
<pre><code class="html loading-head">
|
||||
</code></pre>
|
||||
<h4>At the end of body</h4>
|
||||
<pre><code class="html loading-body">
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Import jQuery -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
|
||||
<script src="../js/loader.js"></script>
|
||||
<script>
|
||||
loadStyle('dist/ui/trumbowyg.min.css');
|
||||
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
|
||||
loadScript('dist/plugins/upload/trumbowyg.upload.min.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
|
||||
</script>
|
||||
<script src="../js/runExampleCode.js"></script>
|
||||
<script src="../js/highlight.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="1;URL=./docs/">
|
||||
<script>
|
||||
window.location = window.location.href.replace('documentation.html', 'documentation/');
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Core | Trumbowyg: A lightweight WYSIWYG editor | Alex-D / Alexandre Demode</title>
|
||||
<meta name="description" content="Trumbowyg is a jQuery plugin for create WYSIWYG editor">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" href="../../favicon.png">
|
||||
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;visibility: hidden;height: 0;width: 0;">
|
||||
<symbol id="trumbowyg-link" viewBox="0 0 72 72">
|
||||
<path d="M30.9 49.1l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9l-5.2-5.2c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L10.8 42c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7C38 50.5 38.6 46.3 37 43l-6.1 6.1zM38.5 22.7l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2-6.5 6.5c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1z"></path>
|
||||
<path d="M44.1 30.7c.2-.2.4-.6.4-.9 0-.3-.1-.6-.4-.9l-2.3-2.3c-.2-.2-.6-.4-.9-.4-.3 0-.6.1-.9.4L25.8 40.8c-.2.2-.4.6-.4.9 0 .3.1.6.4.9l2.3 2.3c.2.2.6.4.9.4.3 0 .6-.1.9-.4l14.2-14.2z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-inner">
|
||||
<header class="header-documentation">
|
||||
<a href="../../" class="documentation-logo-link">
|
||||
<img src="../../img/logo-doc.svg" alt="" class="documentation-logo">
|
||||
</a>
|
||||
<h1 class="documentation-title">
|
||||
Core
|
||||
</h1>
|
||||
<nav class="documentation-menu">
|
||||
<a href="../">Docs</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="../plugins/">Plugins</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="./">Core</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="../../demos/">Demos</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<aside class="documentation-summary">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#core">Core</a>
|
||||
<ul>
|
||||
<li><a href="#modal-box">Modal box</a></li>
|
||||
<li><a href="#range">Range</a></li>
|
||||
<li><a href="#manage-content">Manage content</a></li>
|
||||
<li><a href="#empty">Empty</a></li>
|
||||
<li><a href="#enable-disable-edition">Enable/disable edition</a></li>
|
||||
<li><a href="#toggle">Toggle HTML/WYSIWYG</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<div class="documentation-sidebar-beer">
|
||||
<a href="../../#donate">
|
||||
<img src="../../img/beer.svg" alt="" class="beer-icon">
|
||||
<span class="beer-label">
|
||||
Do you enjoy Trumbowyg? <br>
|
||||
Buy me some beers :)
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="main">
|
||||
<section id="core" class="wrapper section">
|
||||
<h2 class="section-title">Core</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="modal-box">Modal box</h3>
|
||||
<p>
|
||||
When you want create your custom extension for Trumbowyg, you can open and close a modal box with custom
|
||||
inner HTML code, listen events and more.
|
||||
</p>
|
||||
|
||||
<h4>Open and close</h4>
|
||||
<p>
|
||||
For that use the right method: <code>openModal</code> or <code>closeModal</code> like that:
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
// Open a modal box
|
||||
var $modal = trumbowyg.openModal({
|
||||
title: 'A title for modal box',
|
||||
content: '<p>Content in HTML which you want include in created modal box</p>'
|
||||
});
|
||||
|
||||
// Close current modal box
|
||||
trumbowyg.closeModal();
|
||||
</code></pre>
|
||||
<p>
|
||||
An <code>openModal</code> call returns a jQuery object which contains the modal box. You need this
|
||||
object if you want to use listen events (see below).
|
||||
</p>
|
||||
<p class="note">
|
||||
Only one modal box can open at any given moment. So, <code>openModal</code> return false if a modal is
|
||||
currently opened.
|
||||
</p>
|
||||
|
||||
<h4>Events on modal box</h4>
|
||||
<p>
|
||||
Modal boxes in Trumbowy come with two buttons: "Confirm" and "Cancel". An event is associated to each
|
||||
one:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>tbwsubmit</code>: triggered when form is submit</li>
|
||||
<li><code>tbwreset</code>: triggered when user cancels operation</li>
|
||||
</ul>
|
||||
<pre><code class="javascript">
|
||||
// Open a modal box
|
||||
var $modal = trumbowyg.openModal({
|
||||
title: 'A title for modal box',
|
||||
content: '<p>Content in HTML which you want include in created modal box</p>'
|
||||
});
|
||||
|
||||
// Listen clicks on modal box buttons
|
||||
$modal.on('tbwconfirm', function(e){
|
||||
// Do what you want
|
||||
trumbowyg.closeModal();
|
||||
});
|
||||
$modal.on('tbwcancel', function(e){
|
||||
trumbowyg.closeModal();
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<h4>Only build inputs in modal</h4>
|
||||
<p>
|
||||
If you want to only add inputs in the modal box, this function is more simple. Indeed, you do not manage
|
||||
confirm and close buttons, and get all input value on confirm.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
var img = $('img#an-img');
|
||||
$modal = trumbowyg.openModalInsert({
|
||||
title: 'A title for modal box',
|
||||
fields: {
|
||||
url: {
|
||||
value: img.attr('src')
|
||||
},
|
||||
alt: {
|
||||
label: 'Alt',
|
||||
name: 'alt',
|
||||
value: img.attr('alt'),
|
||||
type: 'text',
|
||||
attributes: {}
|
||||
},
|
||||
|
||||
// Build your own input by setting type as a function and returning the html
|
||||
referrerpolicy: {
|
||||
label: 'Referrer Policy',
|
||||
name: 'referrerpolicy',
|
||||
type: function(field, fieldId, prefix, lg) {
|
||||
var html += '<div class="' + prefix + 'input-row">' +
|
||||
'<div class="' + prefix + 'input-infos">' +
|
||||
'<label for="' + fieldId + '">' +
|
||||
'<span>' + (lg[field.label] ? lg[field.label] : field.label) + '</span>' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="' + prefix + 'input-html">' +
|
||||
'<select id="' + fieldId + '" name="' + field.name + '">' +
|
||||
'<option' + (field.value === 'no-referrer' ? ' selected="selected"' : '') + '>no-referrer</option>' +
|
||||
'<option' + (field.value === 'no-referrer-when-downgrade' ? ' selected="selected"' : '') + '>no-referrer-when-downgrade</option>' +
|
||||
'<option' + (field.value === 'origin' ? ' selected="selected"' : '') + '>origin</option>' +
|
||||
'<option' + (field.value === 'origin-when-cross-origin' ? ' selected="selected"' : '') + '>origin-when-cross-origin</option>' +
|
||||
'<option' + (field.value === 'unsafe-url' ? ' selected="selected"' : '') + '>unsafe-url</option>' +
|
||||
'</select>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
},
|
||||
example: {
|
||||
// Missing label is replaced by the key of this object (here 'example')
|
||||
// Missing name is the key
|
||||
// When value is missing, value = ''
|
||||
// When type is missing, 'text' is assumed. You can use all the input field types,
|
||||
// plus checkbox and radio (select and textarea are not supported)
|
||||
// When attributes is missing, {} is used. Attributes are added as attributes to
|
||||
// the input element.
|
||||
// For radio and checkbox fields, you will need to use attributes if you want it
|
||||
// to be checked by default.
|
||||
}
|
||||
},
|
||||
// Callback is called when user confirms
|
||||
callback: function(values){
|
||||
img.attr('src', values['url']);
|
||||
img.attr('alt', values['alt']);
|
||||
|
||||
return true; // Return true if you have finished with this modal box
|
||||
// If you do not return anything, you must manage the closing of the modal box yourself
|
||||
}
|
||||
});
|
||||
|
||||
// You can also listen for modal confirm/cancel events to do some custom things
|
||||
// Note: the openModalInsert callback is called on tbwconfirm
|
||||
$modal.on('tbwconfirm', function(e){
|
||||
// Do what you want
|
||||
});
|
||||
$modal.on('tbwcancel', function(e){
|
||||
trumbowyg.closeModal();
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="range">Range</h3>
|
||||
|
||||
<p>
|
||||
Managing correctly text range, is not so trivial. Trumbowyg has a system to save and restore
|
||||
selection range which does not involve typical getter/setter.
|
||||
</p>
|
||||
|
||||
<h4>Save and get current range</h4>
|
||||
<pre><code class="javascript">
|
||||
// Save current range
|
||||
trumbowyg.saveRange();
|
||||
|
||||
// Restore last saved range
|
||||
trumbowyg.restoreRange();
|
||||
</code></pre>
|
||||
|
||||
<h4>Get selection range</h4>
|
||||
<pre><code class="javascript">
|
||||
// range contains a JavaScript range
|
||||
var range = trumbowyg.getRange();
|
||||
</code></pre>
|
||||
|
||||
<h4>Get last saved range text (aka selected text)</h4>
|
||||
<pre><code class="javascript">
|
||||
var text = trumbowyg.getRangeText();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="manage-content">Manage content</h3>
|
||||
<p>
|
||||
You can set and get current HTML content of the editor with a getter/setter:
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
// Get HTML content
|
||||
trumbowyg.html();
|
||||
|
||||
// Set HTML content
|
||||
trumbowyg.html('<p>Your content here</p>');
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="empty">Empty</h3>
|
||||
<p>
|
||||
You can empty the content of the editor.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
trumbowyg.empty();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="enable-disable-edition">Enable/disable edition</h3>
|
||||
<p class="added-feature">Added in 2.1.0</p>
|
||||
<p>
|
||||
As you can disable editor by using <a href="../#disabled">disabled</a> option, you can also switch between
|
||||
enabled and disabled states by using API.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
trumbowyg.setDisabled(true);
|
||||
trumbowyg.setDisabled(false);
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="toggle">Toggle between HTML & WYSIWYG modes</h3>
|
||||
<p>
|
||||
You can switch between HTML view and WYSIWYG view via toggle method.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
trumbowyg.toggle();
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<script src="../../js/vendor/highlight.js"></script>
|
||||
<script src="../../js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,34 @@
|
||||
// jshint node:true
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const $ = require('gulp-load-plugins')();
|
||||
|
||||
const mainStyle = 'scss/main.scss';
|
||||
|
||||
|
||||
gulp.task('styles', function () {
|
||||
return gulp.src(mainStyle)
|
||||
.pipe($.sass({
|
||||
sass: 'sass',
|
||||
includePaths: ['sass']
|
||||
}))
|
||||
.pipe($.autoprefixer(['last 1 version', '> 1%', 'ff >= 20', 'ie >= 8', 'opera >= 12', 'Android >= 2.2'], {cascade: true}))
|
||||
.pipe($.cleanCss())
|
||||
.pipe(gulp.dest('css/'));
|
||||
});
|
||||
|
||||
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch(['scss/*.scss'], ['styles']);
|
||||
|
||||
gulp.watch(['css/**', 'img/*', 'js/*'], function (file) {
|
||||
$.livereload.changed(file);
|
||||
});
|
||||
|
||||
$.livereload.listen();
|
||||
});
|
||||
|
||||
gulp.task('build', ['styles']);
|
||||
|
||||
gulp.task('default', ['build', 'watch']);
|
||||
@@ -0,0 +1,11 @@
|
||||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
|
||||
Alex-D -- Main developer -- @AlexandreDemode
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
HTML5, CSS3
|
||||
JavaScript, jQuery
|
||||
@@ -0,0 +1,115 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="293.9" height="343.6" viewBox="0 0 293.9 343.6">
|
||||
<style>
|
||||
@keyframes bubble1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0.2);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(-10px) scale(0.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-150px);
|
||||
}
|
||||
}
|
||||
@keyframes bubble2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0.2);
|
||||
}
|
||||
30% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(-10px) scale(0.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-150px);
|
||||
}
|
||||
}
|
||||
@keyframes bubbleSlow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(70px) scale(0.2);
|
||||
}
|
||||
10% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(40px) scale(0.5);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
opacity: 0;
|
||||
transform-origin: center center;
|
||||
}
|
||||
.bubble1 {
|
||||
animation: bubble1 2s linear infinite;
|
||||
}
|
||||
.bubble2 {
|
||||
animation: bubbleSlow 8s linear infinite 2s;
|
||||
}
|
||||
.bubble3 {
|
||||
animation: bubble1 1.5s linear infinite 0.7s;
|
||||
}
|
||||
.bubble4 {
|
||||
animation: bubble2 3s linear infinite 2.3s;
|
||||
}
|
||||
.bubble5 {
|
||||
animation: bubble1 5s linear infinite 2.7s;
|
||||
}
|
||||
.bubble6 {
|
||||
animation: bubbleSlow 4s linear infinite;
|
||||
}
|
||||
.bubble7 {
|
||||
animation: bubble1 2.5s linear infinite 1.2s;
|
||||
}
|
||||
</style>
|
||||
<path fill="#E2A25D" d="M258.7 316s0-.1 0 0v-6.5h-3.6c-13.6-12-64.6-20.9-125.4-20.9S17.8 297.5 4.2 309.5H.7v6.9c1.1 14.9 58.4 26.9 129 26.9s127.9-12 129-26.9v-.4z"/>
|
||||
<ellipse cx="129.7" cy="308.6" fill="#FFB864" rx="129" ry="27.4"/>
|
||||
<path fill="#EFEFEF" d="M247 14.4H16.6l24.6 291c.6 7.9 41 14.2 90.9 14.2 50.2 0 90.9-6.4 90.9-14.4v-.2l24-290.6z"/>
|
||||
<linearGradient id="a" x1="86.0467" x2="86.0467" y1="307.6227" y2="26.3726" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#FBB03B"/>
|
||||
<stop offset="1" stop-color="#FFD23E"/>
|
||||
</linearGradient>
|
||||
<path fill="url(#a)" d="M52.2 293.4h.2l.5 6.3c8.7 3.2 35.1 7.6 76.2 7.9l13.4-281.3H29.7l22.5 267.1z"/>
|
||||
<linearGradient id="b" x1="181.479" x2="181.479" y1="307.6332" y2="26.3726" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#FBA23B"/>
|
||||
<stop offset="1" stop-color="#FFC93E"/>
|
||||
</linearGradient>
|
||||
<path fill="url(#b)" d="M132.1 307.6c42.8 0 70.3-4.6 79.3-7.9L234 26.4h-91.6L129 307.6h3.1z"/>
|
||||
<path fill="#E5E5E5" d="M247 14.4H143l-.6 12H234l-22.6 273.4c-8.9 3.2-36.4 7.9-79.3 7.9H129l-.6 12h3.7c50.2 0 90.9-6.4 90.9-14.4v-.2l24-290.7z"/>
|
||||
<g fill="#FFF">
|
||||
<circle cx="84" cy="252.3" r="10.6" opacity=".3" class="bubble bubble1"/>
|
||||
<circle cx="119.7" cy="197.6" r="7.3" opacity=".3" class="bubble bubble2"/>
|
||||
<circle cx="96" cy="100.3" r="10.6" opacity=".3" class="bubble bubble6"/>
|
||||
<circle cx="151.4" cy="274.8" r="8.1" opacity=".3" class="bubble bubble3"/>
|
||||
<circle cx="179.5" cy="229.9" r="10.2" opacity=".3" class="bubble bubble2"/>
|
||||
<circle cx="133.7" cy="143.2" r="10.2" opacity=".3" class="bubble bubble4"/>
|
||||
<circle cx="132.2" cy="139.7" r="4.5" opacity=".3" class="bubble bubble6"/>
|
||||
<circle cx="169.9" cy="147" r="5.6" opacity=".3" class="bubble bubble5"/>
|
||||
<circle cx="189.2" cy="99.7" r="5.6" opacity=".3" class="bubble bubble2"/>
|
||||
<circle cx="80.2" cy="201.7" r="3" opacity=".3" class="bubble bubble6"/>
|
||||
<circle cx="157.5" cy="279.8" r="3" opacity=".3" class="bubble bubble7"/>
|
||||
<circle cx="161.2" cy="74.3" r="3" opacity=".3" class="bubble bubble1"/>
|
||||
</g>
|
||||
<path fill="#F4B20C" d="M31.2 44.9l.6 7.5h29.4v128.4c0 5.7 4.2 10.7 9.9 11.3 6.5.6 12.1-4.5 12.1-10.9v-70.5c0-5.5 4.5-10 10-10 6.1 0 11-5 11-11V52.4h127.6l.5-7.9-201.1.4z" opacity=".5"/>
|
||||
<path fill="#E5E5E5" d="M31.9 52.3H19.8l-.7-8.7h12.1"/>
|
||||
<path fill="#D3D3D3" d="M231.8 52.4h12.1l.7-8.7h-12.1"/>
|
||||
<path fill="#FFFAEE" d="M260.5 23c0 12.6-10.3 23-23 23H25.2c-12.6 0-23-10.3-23-23 0-12.6 10.3-23 23-23h212.4c12.6 0 22.9 10.4 22.9 23z"/>
|
||||
<g>
|
||||
<path fill="#FFFAEE" d="M88.3 17.2H73.5c-1.1 0-2.1.2-3.1.5-1.9-.6-4-.7-6.1 0-4.8 1.4-8 5.9-8 10.9v148.3c0 5.7 4.2 10.7 9.9 11.3 6.5.6 12.1-4.5 12.1-10.9v-70.5c0-5.5 4.5-10 10-10 6.1 0 11-4.9 11-11V28.2c0-6.1-5-11-11-11z"/>
|
||||
<g fill="#FFEBCC">
|
||||
<path d="M257.3 11.3c.1.7.1 1.4.1 2.1 0 12.6-10.3 23-23 23H99.3v-8.2c0-5.1-3.5-9.4-8.3-10.6.1.6.2 1.2.2 1.8v57.4c0 6.1-5 11-11 11-5.5 0-10 4.5-10 10v70.5c0 6.4-5.6 11.6-12.1 10.9-.5-.1-1.1-.2-1.6-.3.9 4.8 4.7 8.7 9.7 9.1 6.5.6 12.1-4.5 12.1-10.9v-70.5c0-5.5 4.5-10 10-10 6 0 11-5 11-11V46h138.3c12.6 0 23-10.3 23-23-.1-4.2-1.2-8.2-3.3-11.7zM25.2 46h31.1v-9.6H6.6c4.1 5.8 10.9 9.6 18.6 9.6z"/>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M249.5 298.5c-6-3.1-14.6-6-25.3-8.5l-1.2 15s0 .8-.2 1.3c1.4-.4 26.7-7.8 26.7-7.8z" opacity=".1"/>
|
||||
<path d="M256.5 303.5l33.6-9.6c3.5-1 3.2-6-.3-6.6l-64.3-12-1.3 14.8c0-.1 24.8 5.1 32.3 13.4z" opacity=".05"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,49 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="210.3" height="195" viewBox="0 0 210.3 195">
|
||||
<style>
|
||||
@keyframes slideCloudTop {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
@keyframes slideCloudBottom {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path fill="#F49037" d="M105.6 163.8h8.6v23.7h-8.6zM176.6 156.6c-2.6 2.2-6.6 1.8-8.7-.8L47.9 10.5c-2.2-2.6-1.8-6.6.8-8.7 2.6-2.2 6.6-1.8 8.7.8l120 145.3c2.2 2.6 1.8 6.5-.8 8.7z"/>
|
||||
<path d="M153.8 195l16.6-4.7c1.7-.5 1.6-2.9-.2-3.3l-33.9-4.1 1.6 5.4s12.2 2.6 15.9 6.7z" opacity=".05"/>
|
||||
<linearGradient id="SVGID_1_" x1="206.2278" x2="786.6278" y1="-151.4528" y2="-151.4528" gradientTransform="matrix(.2283 0 0 -.2283 -1.8007 48.2202)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#fba23b"/>
|
||||
<stop offset="1" stop-color="#ffc93e"/>
|
||||
</linearGradient>
|
||||
<circle cx="111.5" cy="82.8" r="66.2" fill="url(#SVGID_1_)"/>
|
||||
<path fill="#F49037" d="M162.1 139.5c-8.7 7.2-19.1 12.5-30.8 15.3-10.2 2.4-20.4 2.7-30.1 1-14.6-2.4-28.1-9.1-38.8-19-5.4-5-10.1-10.7-13.9-17.1-3.8-6.4-6.7-13.5-8.5-21.2-1.7-7.2-2.4-14.5-2-21.5.5-10.6 3.3-20.8 8-30.1s11.2-17.5 19.2-24.2l-5.8-7c-12 10-21 23.1-26 37.8-5 14.7-6.1 31-2.2 47.1 2.7 11.4 7.6 21.7 14.2 30.6 9.8 13.4 23.3 23.5 38.6 29.2 7.6 2.9 15.8 4.7 24.1 5.3s16.9-.1 25.5-2.1c13.1-3.1 24.8-9.1 34.5-17.2l-6-6.9z"/>
|
||||
<path fill="#E5892E" d="M51.4 84.8c0-36.6 29.7-66.2 66.2-66.2 6.2 0 12.2.8 17.9 2.4-7.5-2.9-15.6-4.5-24-4.5-36.6 0-66.2 29.7-66.2 66.2 0 30.4 20.5 56 48.4 63.8C69 137 51.4 113 51.4 84.8z" opacity=".8"/>
|
||||
<path fill="#FFFAEE" d="M149.1 28.2l-4.1 1.5h-.3l-6.6-.9c-.2 0-.4 0-.6.2l-3.2 3.4c-.1.1-.2.2-.3.2l-15.2 3.6-6 2.4c-.2.1-.3 0-.4-.1l-1.1-1.6c-.2-.3 0-.6.3-.6l2.7.4c.1 0 .2 0 .3-.1l1.9-1.3c.3-.2.2-.5-.1-.6l-11.7-3.8h-.2l-8.4 1.8c-.1 0-.1 0-.2.1l-5.2 5.8-.1.1-4.6 2.6c-.1.1-.2.2-.2.4l.8 4.1c0 .2.3.3.5.3l3.9-1.2c.2 0 .3 0 .4.2l2.3 3.6c.1.1.3.2.4.1l2.2-.8c.1 0 .1-.1.2-.2l2.3-3.7c.1-.1.1-.3 0-.4l-1.4-2.5c-.1-.1-.1-.3.1-.4l4.3-4.3c.1-.1.3-.1.5 0l.8.6c.2.1.2.4 0 .5l-2.3 2.2c-.1.1-.1.2-.1.3l.6 3.5c0 .1 0 .1.1.2l1.8 2.3c.2.3-.1.7-.4.6-.2-.1-.4 0-.5.2l-.9 2.4c0 .1-.1.2-.2.2l-3.3 1.3h-.1l-5 .4c-.2 0-.3-.1-.4-.2L91 47.2c-.1-.2-.2-.3-.4-.2l-1.4.3c-.2 0-.3.2-.3.4l.7 3.7c0 .2-.1.4-.3.4l-3.2.2c-.1 0-.2 0-.3.1l-2.5 3.1-2.7 2.1c-.1.1-.3.1-.5 0l-.3-.2c-.3-.2-.6 0-.6.3 0 .2-.2.4-.4.4h-2.6c-.2 0-.3.1-.4.3l-.3 1c0 .2 0 .4.3.5l3.4 1.3c.2.1.3.3.3.4l-.5 3.3c0 .2-.3.4-.5.3L73 63.8c-.1 0-.2 0-.3.1l-2.2 1.6c-.1.1-.2.2-.2.4l.5 4.6.6 2.6c0 .2.2.3.3.3l2.9.5 2.7.1h.2l2.1-.9c.1 0 .2-.1.2-.2l.9-2.1.9-2.1c0-.1.1-.1.1-.2l2-1.3 1-1.5s1.5-.8 2.1-.8c.5 0 2.6-.5 2.6-.5l1.4-.5 4 3.6 3.1 2.1v1.1l-3.5 1 2.8 2.5 2.2-3.2-.1-1.8 1.1.1.3-1.1-4.7-2.3-2.2-3.7 2.9.5 4.7 4.3 3.5 6.4 1.3 1.3 1.4-2.8-1-2.4 1.5-1.4 1 1.8 2.5 3.6 6.5.8 2.1-.4.1 1.8-1.3 5.4-4.2-1.5-2.1 1.9-7.2-2.9-2.5.7.4 2.4-6.4-2.5-4.7-2.4.1-4.2-7.5.7-5.9 2.9-4.7-1.1-2.2 2.4-2.2 5.1-3.5 2.9-5.1 7.1-.1 9.4 4.4 9.3 7.5 4.9 7.9-.8 4.6-1.5 2.6 2.8 2.2-.3 1.9 1.4-1 6 5 9.5c.5.9.6 1.9.3 2.8l-2.1 7.7c-.2.7-.2 1.4 0 2.1l.3 1.1c5.3 1.4 10.8 2.1 16.6 2.1 3.7 0 7.4-.3 10.9-.9.2-.5.5-.9.9-1.3l3.7-3.4c1.1-1 1.5-2.4 1.1-3.8l-2.1-8.1c-.3-1-.1-2.1.4-3l3.2-5.3 8.9-7.1 2.6-9.2c.1-.5-.3-1-.9-.8l-6.9 2.4c-.3.1-.6 0-.8-.3l-2.8-3.9-6.4-9-4.2-9.6 1.4-.8 6.7 9.6 4.3 10.5 12-4.8c.1 0 .2-.1.3-.3l4.9-7.6c.2-.3.1-.7-.2-.9l-2.5-1.7-.3-.3-.3-.9c-.2-.5-.9-.6-1.2-.2l-1.1 1.7c-.1.2-.3.3-.5.3h-2.8c-.3 0-.5-.1-.6-.4l-3.1-6.4c-.3-.6.3-1.2.9-.9l.2.1h.1L143 87c.3.2.6.2.8 0l1-.8c.3-.2.7-.2.9.1l1.1 1.3c.1.2.3.3.5.3l9.8.5c.2 0 .4.1.5.3l4.7 5.7c.2.2.4.3.6.2l.5-.1c.3-.1.7.2.8.5l1.9 7.4s0 .1.1.2l4.7 8.4c.1.2.3.3.4.4.9-1.9 1.8-3.9 2.5-6l-.1-3.3c0-.3.1-.5.3-.6l1.3-.7c1.6-5.7 2.4-11.7 2.4-17.9.1-22.8-11.3-42.7-28.6-54.7z"/>
|
||||
<path fill="#E2A730" d="M155.5 123.8c-25.9 25.9-67.8 25.9-93.7 0-4.4-4.4-8-9.2-10.9-14.3 3.2 7.3 7.8 14.2 13.8 20.2 25.9 25.9 67.8 25.9 93.7 0 21.5-21.5 25.1-54.1 10.9-79.4 10.7 24.3 6.1 53.7-13.8 73.5z" opacity=".6"/>
|
||||
<path fill="#DB781F" d="M149.7 17.8c-5.2 0-9.4 4.2-9.4 9.4 0 6.9 9.4 14.5 9.4 14.5S159 35 159 27.1c0-5.1-4.2-9.3-9.3-9.3zm0 14.3c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5s-2.3 5-5 5zM157 49c-5.2 0-9.4 4.2-9.4 9.4 0 6.9 9.4 14.5 9.4 14.5s9.4-6.6 9.4-14.5c0-5.2-4.2-9.4-9.4-9.4zm0 14.3c-2.7 0-5-2.2-5-5 0-2.7 2.2-5 5-5s5 2.2 5 5-2.2 5-5 5zM81.6 36.9c-5.2 0-9.4 4.2-9.4 9.4 0 6.9 9.4 14.5 9.4 14.5S91 54.2 91 46.3c-.1-5.2-4.3-9.4-9.4-9.4zm0 14.3c-2.7 0-5-2.2-5-5 0-2.7 2.2-5 5-5 2.7 0 5 2.2 5 5-.1 2.8-2.3 5-5 5z"/>
|
||||
<path fill="#F49037" d="M110.2 181.4h-.8c-43.9.1-41.5 9-41.5 9 0 2.6 2.1 4.6 4.6 4.6H147.1c2.6 0 4.6-2.1 4.6-4.6.1 0 2.5-8.9-41.5-9z"/>
|
||||
<path fill="#C6681A" d="M153.2 195H66.5c-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7h86.7c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7z"/>
|
||||
<path fill="#C96E23" d="M157.4 143.1l5.8 7.1s-3.4 2.6-6.9 4.5c.9-10.2 1.1-11.6 1.1-11.6zM105.5 165.7s4.4.5 8.7.2v2.2s-2.1.5-8.6-.1c0-1.1-.1-2.3-.1-2.3z"/>
|
||||
<g style="animation:slideCloudTop 20s linear infinite">
|
||||
<path fill="#FFF" d="M79.1 24H19c-2.5 0-4.8 1.8-5 4.3-.3 2.9 2 5.3 4.8 5.3h10c2.4 0 4.4 2 4.4 4.4 0 2.4-2 4.4-4.4 4.4H7.3c-2.7 0-4.8 2.2-4.8 4.8 0 2.7 2.2 4.8 4.8 4.8h61.5c2.7 0 4.8-2.2 4.8-4.8 0-2.7-2.2-4.8-4.8-4.8h-8.7c-2.4 0-4.4-2-4.4-4.4 0-2.4 2-4.4 4.4-4.4h18.8c2.5 0 4.8-1.8 5-4.3.3-2.9-2-5.3-4.8-5.3z"/>
|
||||
<path fill="#FFEBCC" d="M69.9 43.3c0 2.7-2.2 4.8-4.8 4.8H2.6c.4 2.3 2.4 4.1 4.8 4.1h61.5c2.7 0 4.8-2.2 4.8-4.8 0-2.3-1.6-4.2-3.8-4.7-.1.1 0 .3 0 .6z"/>
|
||||
<path fill="none" d="M56.9 35c0-.1 0 0 0 0z"/>
|
||||
<path fill="#FFEBCC" d="M63.1 30.7h13.5c2.2 0 4.3-1.4 4.9-3.6.2-.8.2-1.7 0-2.4 1.6 1 2.6 2.8 2.3 4.8-.3 2.4-2.6 4.1-5 4.1H60.1c-1.2 0-2.3.5-3.1 1.3l2.9-2.9c.8-.8 2-1.3 3.2-1.3z"/>
|
||||
</g>
|
||||
<g style="animation:slideCloudBottom 13s linear infinite">
|
||||
<path fill="#FFF" d="M204.9 112.7h-60c-2.5 0-4.8 1.8-5 4.3-.3 2.9 2 5.3 4.8 5.3h10c2.4 0 4.4 2 4.4 4.4 0 2.4-2 4.4-4.4 4.4h-21.6c-2.7 0-4.8 2.2-4.8 4.8 0 2.7 2.2 4.8 4.8 4.8h61.5c2.7 0 4.8-2.2 4.8-4.8 0-2.7-2.2-4.8-4.8-4.8h-8.7c-2.4 0-4.4-2-4.4-4.4 0-2.4 2-4.4 4.4-4.4h18.8c2.5 0 4.8-1.8 5-4.3.3-2.8-2-5.3-4.8-5.3z"/>
|
||||
<path fill="#FFEBCC" d="M195.7 132c0 2.7-2.2 4.8-4.8 4.8h-62.5c.4 2.3 2.4 4.1 4.8 4.1h61.5c2.7 0 4.8-2.2 4.8-4.8 0-2.3-1.6-4.2-3.8-4.7v.6z"/>
|
||||
<path fill="none" d="M182.8 123.7z"/>
|
||||
<path fill="#FFEBCC" d="M189 119.5h13.5c2.2 0 4.3-1.4 4.9-3.6.2-.8.2-1.7 0-2.4 1.6 1 2.6 2.8 2.3 4.8-.3 2.4-2.6 4.1-5 4.1h-18.8c-1.2 0-2.3.5-3.1 1.3l2.9-2.9c.8-.9 2-1.3 3.3-1.3z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="51.013" height="56.993" viewBox="0 0 51.013 56.993">
|
||||
<path fill="#ffb864" d="M50.453 1.264C50.05.82 49.47.556 48.866.542L24.893 0h-.104L2.144.542C1.54.556.96.82.56 1.265.156 1.71-.046 2.307.01 2.9L4.22 49.868c.08.906.723 1.662 1.614 1.9l19.233 5.15c.38.1.767.1 1.15 0l18.957-5.06c.89-.236 1.534-.994 1.615-1.9L51.005 2.9c.053-.594-.15-1.193-.552-1.636zM42.548 48.07l-16.903 4.51-17.18-4.6-3.87-43.16 20.25-.485 21.575.488-3.872 43.247z"></path>
|
||||
<path fill="#ffb864" d="M16.643 27.834l4.732-4.842c.42-.43.408-1.117-.03-1.532-.436-.415-1.132-.402-1.553.027l-5.495 5.624c-.204.21-.313.484-.308.773.005.29.124.56.336.76l5.495 5.216c.438.413 1.134.4 1.555-.03.42-.43.407-1.118-.03-1.533l-4.702-4.463zM29.683 33.83c.42.433 1.117.445 1.554.03l5.495-5.215c.212-.2.33-.47.337-.76.004-.29-.105-.564-.31-.772l-5.494-5.624c-.42-.43-1.117-.443-1.554-.028-.437.415-.45 1.102-.03 1.532l4.733 4.842-4.703 4.463c-.436.414-.45 1.1-.03 1.53z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 994 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="42.064" height="61.946" viewBox="0 0 42.064 61.946">
|
||||
<path fill="#ffb864" d="M22.855 4.076c-.418.058-.763.358-.875.762l-.792 2.855-2.386-4.134a1.019 1.019 0 0 0-.628-.475L6.37.033c-.51-.13-1.045.14-1.242.628l-3.64 9.004c-.117.293-.095.623.06.894L3.86 14.56l-2.543-.657c-.406-.104-.84.043-1.098.376-.26.332-.293.784-.085 1.144L6.68 26.758c.135.234.364.408.628.476s.552.028.79-.11l2.49-1.437-1.322 4.766c-.073.262-.037.547.098.78L13 37.532c.135.234.364.41.628.476l3.547.918-1.012 3.647c-.073.264-.037.548.098.783l5.005 8.667c.15.26.408.44.708.493l12.625 2.223 3.575 6.192c.567.982 1.837 1.31 2.836.733 1-.576 1.35-1.84.783-2.823l-3.937-6.817 4-14.408c.072-.262.036-.547-.1-.78l-3.08-5.334c-.134-.234-.363-.408-.627-.477l-3.076-.794.898-3.236c.073-.262.038-.547-.098-.78l-2.887-5c-.135-.236-.364-.41-.628-.477s-.553-.03-.79.11l-2.832 1.633 1.698-6.118c.073-.263.037-.547-.098-.782l-6.35-11.002c-.207-.36-.616-.556-1.033-.498zm-.017 46.49l-4.555-7.89 1.175-4.232c.073-.263.037-.547-.098-.78a1.02 1.02 0 0 0-.628-.478l-4.135-1.068-3.21-5.562 1.876-6.76c.112-.405-.03-.833-.363-1.084-.332-.25-.787-.278-1.153-.066l-3.77 2.177-4.793-8.3 2.543.658c.405.105.84-.043 1.097-.376.26-.333.292-.784.084-1.144L3.606 9.94l2.112-5.226 27.53 47.682-10.41-1.83zm5.38-34.314l-2.253 8.115c-.112.403.032.83.363 1.082.332.25.787.277 1.153.065l4.11-2.374 2.163 3.744-1.06 3.822c-.074.262-.04.547.097.782.135.234.364.408.628.476l3.662.945 2.655 4.598-3.33 11.997L9.552 2.995l7.653 1.978 3.413 5.91c.208.36.615.557 1.033.5.418-.058.764-.36.876-.763l.792-2.854 4.9 8.486z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1501.1" height="300" viewBox="0 0 1501.1 300">
|
||||
<g fill="#FFCD9D">
|
||||
<path d="M1345.9 268c-29.2 0-46.4-10-55.9-25.9-1.8-2.6-2.5-4.8-2.4-6.9h-.1v24.5h.1c0 1.9.8 4 2.4 6.4 9.5 15.9 26.7 25.9 55.9 25.9 42.4 0 59.4-23.5 59.4-58.9v-24c0 35.4-17 58.9-59.4 58.9z"/>
|
||||
<path d="M1374 197.3c-8.1 2.2-19.4 4.9-32.4 4.9-38.6 0-56.2-20.3-56.2-54.3v24c0 34 17.5 54.3 56.2 54.3 12.3 0 23.1-2.4 31.1-4.5.9-3.2 1.3-6.8 1.3-10.8v-13.6zM1371.6 92.2c-5.9-1.6-14-3-23-3-21.6 0-31.9 9.2-31.9 29.2v24c0-20 10.3-29.2 31.9-29.2 8.9 0 17 1.4 23 3 1.9.8 2.4 1.4 2.4 3.2v-24c0-1.8-.5-2.4-2.4-3.2zM1199.3 268c-29.2 0-46.4-10-56.2-25.9-1.7-2.6-2.4-4.9-2.2-7v24.6c0 1.9.7 4 2.2 6.4 9.7 15.9 27 25.9 56.2 25.9 42.4 0 59.4-23.5 59.4-58.9v-24c0 35.4-17 58.9-59.4 58.9z"/>
|
||||
<path d="M1227.4 198.1c-8.4 1.9-18.9 3.8-32.1 3.8-38.6 0-56.4-20.2-56.4-54.3v24c0 34 17.8 54.3 56.4 54.3 12.4 0 22.8-1.7 30.9-3.4 1-3.4 1.2-7.3 1.2-11.6v-12.8zM930.9 68.3v0zM1118.6 74.4l-36.2 122.9c-1.6 5.9-5.1 7.6-11.3 7.6h-9.2c-6.5 0-9.7-1.6-11.6-7.6l-19.7-69.1c-3.5-13-4.6-26.7-4.9-27.8h-1.4c-.3 1.1-1.6 14.9-5.1 27.8l-19.7 69.1c-1.6 5.9-5.1 7.6-11.3 7.6h-8.9c-6.2 0-9.7-1.6-11.3-7.6L932 74.4c-.7-2.3-1.1-4-1.1-5.4v23.5c-.1 1.4.3 3.3 1.1 5.9l36 122.8c1.6 5.9 5.1 7.6 11.3 7.6h8.9c6.2 0 9.7-1.6 11.3-7.6l19.7-69.1c3.5-13 4.9-26.7 5.1-27.8h1.4c.3 1.1 1.3 14.9 4.9 27.8l19.7 69.1c1.9 5.9 5.1 7.6 11.6 7.6h9.2c6.2 0 9.7-1.6 11.3-7.6l36.2-122.9c.6-2.3 1-4.1 1-5.5V68.4h-.1c.2 1.4-.2 3.4-.9 6zM189.5 56.7V39.8c0-2.9-.3-5.1-.9-6.9-1.2 3.5-3.8 4.8-8.3 4.8h-46.4v30.6h46.4c6.8.1 9.2-3 9.2-11.6zM53.4 37.8c-4.7 0-7.2-1.4-8.3-4.8-.6 1.7-.8 4-.8 6.9v16.9c0 8.6 2.2 11.7 9.2 11.7h46.4V37.8H53.4zM124.7 204.5H109c-6.8 0-9.2-2.4-9.2-9.2v24c0 6.8 2.4 9.2 9.2 9.2h15.7c6.7 0 9.2-2.4 9.2-9.2v-24c0 6.8-2.4 9.2-9.2 9.2zM206.3 204.5h-14.9c-6.2 0-8.4-2.2-8.4-8.4v24c0 6.2 2.2 8.4 8.4 8.4h14.9c6.2 0 8.1-2.2 8.1-8.4v-24c0 6.3-1.9 8.4-8.1 8.4zM252.4 76.3l-9.7-.2c-10.5 0-18.6 1.3-25.7 3.5-2.4.5-2.7 1.9-2.7 3.2v36.9c0-1.4.3-2.7 2.7-3.2 7-2.2 15.1-3.2 25.7-3.2h9.7c6.2 0 8.4-2.2 8.4-8.4V80.1c0-2.9-.4-4.8-1.4-6.1-1.3 1.7-3.5 2.3-7 2.3zM386.6 199.1c-10.8 4.3-27.3 9.5-52.9 9.5-38.6 0-56.4-20.2-56.4-54.3v24c0 34 17.8 54.3 56.4 54.3 25.7 0 42.1-5.1 52.9-9.5 8.6-3.5 10.5-6.8 10.5-15.1v-24c.1 8.4-1.8 11.6-10.5 15.1zM563.5 89.3c-10.8 0-20 2.7-26.2 4.9 2.2 5.7 3 12.7 3 20.2v2.8c6-1.9 14-3.9 23.2-3.9 17.5 0 26.2 8.9 26.2 26.2v-24c0-17.3-8.7-26.2-26.2-26.2zM612.9 204.5H598c-6.2 0-8.4-2.2-8.4-8.4v24c0 6.2 2.2 8.4 8.4 8.4h14.8c6.2 0 8.1-2.2 8.1-8.4v-24c.1 6.3-1.8 8.4-8 8.4zM482.5 89.3c-8.4 0-14.8 1.1-21.6 3.2-1.9.8-2.2 1.9-2.2 3.2v24c0-1.4.3-2.4 2.2-3.2 6.8-2.2 13.2-3.2 21.6-3.2 17.3 0 26.5 8.9 26.5 26.2v-24c-.1-17.3-9.2-26.2-26.5-26.2zM450.6 204.5h-14.9c-6.2 0-8.4-2.2-8.4-8.4v24c0 6.2 2.2 8.4 8.4 8.4h14.9c6.2 0 8.1-2.2 8.1-8.4v-24c0 6.3-1.9 8.4-8.1 8.4zM531.9 204.5h-14.6c-6.2 0-8.4-2.2-8.4-8.4v24c0 6.2 2.2 8.4 8.4 8.4h14.6c6.2 0 8.4-2.2 8.4-8.4v-24c0 6.3-2.2 8.4-8.4 8.4zM709.5 208.6c-21.9 0-39.4-4.6-48.9-8.6-8.6-4.1-10-6.2-10-14.9v24c0 8.6 1.4 10.8 10 14.9 9.5 4 27 8.6 48.9 8.6 41.3 0 61-20.2 61-57.2v-24c.1 36.9-19.6 57.2-61 57.2zM709.8 89.3c-11.3 0-21.3 2.7-27.8 4.9v24c6.5-2.2 16.5-4.9 27.8-4.9 19.2 0 29.4 9.5 29.4 26.5v-24c0-17.1-10.2-26.5-29.4-26.5zM855.1 89c-19.7 0-30.8 9.2-30.8 25.7v24c0-16.5 11.1-25.7 30.8-25.7 20 0 31.1 9.2 31.1 25.7v-24c-.1-16.5-11.1-25.7-31.1-25.7zM855.1 208.6c-40 0-62.1-20.5-62.1-54v24c0 33.5 22.1 54 62.1 54 40.5 0 62.4-20.5 62.4-54v-24c-.1 33.5-21.9 54-62.4 54zM930.9 69v-.5.5z"/>
|
||||
</g>
|
||||
<path fill="#FFF" d="M189.6 22v13.2c0 6.8-2.4 9.2-9.2 9.2H134v150.9c0 6.8-2.4 9.2-9.2 9.2h-15.7c-6.8 0-9.2-2.4-9.2-9.2V44.4H53.5c-7 0-9.2-2.4-9.2-9.2V22c0-6.8 2.2-9.2 9.2-9.2h126.9c6.7 0 9.2 2.5 9.2 9.2zM252.5 60.6c6.2 0 8.4 1.9 8.4 8.4v11.9c0 6.2-2.2 8.4-8.4 8.4h-9.7c-10.5 0-18.6 1.1-25.7 3.2-2.4.5-2.7 1.9-2.7 3.2v100.4c0 6.2-1.9 8.4-8.1 8.4h-14.9c-6.2 0-8.4-2.2-8.4-8.4v-112c0-8.6 1.9-11.9 10.5-15.4 10-3.8 26.2-7.6 50.2-8.1h8.8zM397.2 72.8V184c0 8.4-1.9 11.6-10.5 15.1-10.8 4.3-27.3 9.5-52.9 9.5-38.6 0-56.4-20.2-56.4-54.3V72.8c0-6.2 2.2-8.1 8.4-8.1h14.9c6.2 0 8.1 1.9 8.1 8.1v80.5c0 18.1 9.7 26.7 29.4 26.7 10.5 0 17.6-1.1 24.8-3.2 2.4-.8 3-2.4 3-4.6V72.8c0-6.2 2.2-8.1 8.4-8.1H389c6 0 8.2 1.9 8.2 8.1zM568.1 60.6c36.7 0 52.9 19.7 52.9 53.7v81.8c0 6.2-1.9 8.4-8.1 8.4H598c-6.2 0-8.4-2.2-8.4-8.4v-80.7c0-17.3-8.6-26.2-26.2-26.2-10.8 0-20 2.7-26.2 4.9 2.2 5.7 3 12.7 3 20.2v81.8c0 6.2-2.2 8.4-8.4 8.4h-14.6c-6.2 0-8.4-2.2-8.4-8.4v-80.7c0-17.3-9.2-26.2-26.5-26.2-8.4 0-14.9 1.1-21.6 3.2-1.9.8-2.2 1.9-2.2 3.2V196c0 6.2-1.9 8.4-8.1 8.4h-14.9c-6.2 0-8.4-2.2-8.4-8.4V85c0-8.6 2.2-11.9 10.5-15.4 10.5-4.3 25.4-9.2 49.1-9.2 14.3 0 25.4 3 33.5 8.9 9.8-3.5 24.7-8.7 47.9-8.7zM682 13.1v52.1c8.1-1.9 19.2-4.6 32.4-4.6 38.6 0 56.2 20 56.2 54.3v36.5c0 37-19.7 57.2-61 57.2-21.9 0-39.4-4.6-48.9-8.6-8.6-4.1-10-6.2-10-14.9v-172c0-6.2 2.2-8.4 8.4-8.4H674c6.1 0 8 2.2 8 8.4zm27.8 76.2c-11.3 0-21.3 2.7-27.8 4.9v79.7c0 1.3.3 2.2 2.2 3 6.2 2.2 14.3 3.2 23.2 3.2 21.6 0 31.9-9.5 31.9-29.4v-34.8c0-17.2-10.3-26.6-29.5-26.6zM855.1 60.6c40.5 0 62.4 20.5 62.4 54v40c0 33.5-21.9 54-62.4 54-40 0-62.1-20.5-62.1-54v-40c0-33.4 22.1-54 62.1-54zm0 28.4c-19.7 0-30.8 9.2-30.8 25.7v40c0 16.2 11.1 25.7 30.8 25.7 20 0 31.1-9.5 31.1-25.7v-40c-.1-16.5-11.1-25.7-31.1-25.7zM1118.6 74.4l-36.2 122.9c-1.6 5.9-5.1 7.6-11.3 7.6h-9.2c-6.5 0-9.7-1.6-11.6-7.6l-19.7-69.1c-3.5-13-4.6-26.7-4.9-27.8h-1.4c-.3 1.1-1.6 14.9-5.1 27.8l-19.7 69.1c-1.6 5.9-5.1 7.6-11.3 7.6h-8.9c-6.2 0-9.7-1.6-11.3-7.6L932 74.4c-2.4-7.8-1.4-9.7 6.8-9.7h10.5c10 0 13.5 1.4 14.8 8.4l15.4 60.5c2.4 11.9 4 31.6 4.6 32.9h1.4c.3-1.4 2.2-20.5 5.7-33.2l17.8-59.1c2.2-7.3 3.8-8.6 13.8-8.6h6.2c10 0 11.6 1.3 13.8 8.4l18.1 59.4c4 13.8 5.4 31.9 5.7 33.2h1.6c.3-1.4 1.1-17.8 4.6-33.2l14.9-60.2c1.6-7 4.9-8.4 15.1-8.4h8.9c8-.1 9.1 1.8 6.9 9.6zM1258.7 72.8v136.4c0 35.4-17 58.9-59.4 58.9-29.2 0-46.4-10-56.2-25.9-3.8-5.9-3-10.3 3.5-13.5l10.3-5.7c6.5-3.2 9.5-2.4 13.5 3.2 5.7 8.9 13.8 13.8 28.4 13.8 18.9 0 28.6-10 28.6-29.2v-12.7c-8.4 1.9-18.9 3.8-32.1 3.8-38.6 0-56.4-20.2-56.4-54.3V72.8c0-6.2 2.2-8.1 8.4-8.1h14.8c6.2 0 8.1 1.9 8.1 8.1v73.7c0 18.1 9.7 26.7 29.4 26.7 11.3 0 20.5-1.9 27.8-3.8V72.8c0-6.2 2.2-8.1 8.4-8.1h14.6c6.2 0 8.3 1.9 8.3 8.1zM1346.5 60.6c21.9 0 39.4 4 48.9 8.4 8.6 4 10 6.2 10 14.8v125.3c0 35.4-17 58.9-59.4 58.9-29.2 0-46.4-10-55.9-25.9-4-5.9-3-10.3 3.2-13.5l10.3-5.7c6.5-3.2 9.5-2.4 13.8 3.2 5.7 8.9 13.5 13.8 28.1 13.8 18.9 0 28.6-10 28.6-29.2v-13.5c-8.1 2.2-19.4 4.9-32.4 4.9-38.6 0-56.2-20.3-56.2-54.3v-30.5c0-36.7 19.7-56.7 61-56.7zm2.2 28.7c-21.6 0-31.9 9.2-31.9 29.2V147c0 17 10.3 26.5 29.4 26.5 11.6 0 21.1-2.2 27.8-3.8V95.5c0-1.9-.5-2.4-2.4-3.2-5.9-1.7-14-3-22.9-3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1522" height="287.26" viewBox="0 0 1522 287.26">
|
||||
<path fill="#FFCD9D" d="M1340.258 263.26c-29.16 0-46.44-9.99-55.892-25.92-1.757-2.578-2.545-4.85-2.37-6.86h-.07v24.502h.058c-.015 1.887.77 3.99 2.383 6.357 9.45 15.93 26.73 25.92 55.892 25.92 42.39 0 59.4-23.49 59.4-58.86v-24c-.002 35.37-17.012 58.86-59.402 58.86"/>
|
||||
<path fill="#FFCD9D" d="M1368.34 192.52c-8.103 2.16-19.44 4.86-32.4 4.86-38.613 0-56.163-20.252-56.163-54.272v24c0 34.02 17.55 54.27 56.162 54.27 12.29 0 23.12-2.428 31.115-4.52.85-3.206 1.284-6.817 1.284-10.84v-13.5zm-2.432-105.034c-5.94-1.62-14.04-2.97-22.95-2.97-21.602 0-31.86 9.18-31.86 29.16v24c0-19.98 10.26-29.16 31.86-29.16 8.91 0 17.01 1.35 22.95 2.97 1.89.81 2.43 1.35 2.43 3.24v-24c0-1.89-.54-2.43-2.43-3.24M1193.65 263.26c-29.16 0-46.44-9.99-56.16-25.92-1.67-2.622-2.44-4.927-2.228-6.964h-.034v24.59h.012c-.024 1.89.738 4 2.25 6.373 9.72 15.93 27 25.92 56.16 25.92 42.39 0 59.4-23.49 59.4-58.86v-24c0 35.37-17.01 58.86-59.4 58.86"/>
|
||||
<path fill="#FFCD9D" d="M1221.73 193.328c-8.37 1.89-18.9 3.78-32.13 3.78-38.61 0-56.432-20.25-56.432-54.27v24c0 34.02 17.82 54.27 56.43 54.27 12.45 0 22.8-1.672 30.917-3.444 1-3.402 1.216-7.283 1.216-11.645v-12.692zM925.223 63.554v.254c.004-.09.016-.17.024-.254h-.024zm187.727 6.09l-36.183 122.852c-1.62 5.94-5.13 7.56-11.34 7.56h-9.18c-6.48 0-9.72-1.62-11.61-7.56l-19.71-69.122c-3.51-12.96-4.59-26.73-4.86-27.81h-1.35c-.27 1.08-1.62 14.85-5.13 27.81l-19.71 69.122c-1.62 5.94-5.13 7.56-11.34 7.56h-8.91c-6.21 0-9.72-1.62-11.34-7.56l-35.91-122.852c-.703-2.26-1.1-4.01-1.132-5.38v23.522c-.065 1.426.346 3.328 1.13 5.858l35.91 122.852c1.62 5.94 5.13 7.56 11.34 7.56h8.91c6.212 0 9.722-1.62 11.342-7.56l19.71-69.12c3.51-12.96 4.86-26.73 5.13-27.812h1.35c.27 1.08 1.35 14.85 4.86 27.81l19.71 69.122c1.89 5.94 5.13 7.56 11.61 7.56h9.18c6.21 0 9.72-1.62 11.34-7.56l36.182-122.852c.642-2.33.987-4.124.958-5.51h.04V63.632h-.074c.147 1.444-.2 3.39-.925 6.014M183.86 51.983V35.105c0-2.882-.28-5.134-.896-6.87-1.222 3.455-3.793 4.84-8.285 4.84h-46.442v30.62h46.44c6.75 0 9.18-3.1 9.18-11.712M47.777 33.077c-4.672 0-7.183-1.386-8.345-4.843-.585 1.738-.835 3.99-.835 6.87v16.88c0 8.612 2.16 11.713 9.18 11.713h46.44v-30.62h-46.44zm71.281 166.733h-15.66c-6.75 0-9.18-2.43-9.18-9.18v24c0 6.75 2.43 9.18 9.18 9.18h15.66c6.75 0 9.18-2.43 9.18-9.18v-24c0 6.75-2.43 9.18-9.18 9.18m81.539 0h-14.85c-6.21 0-8.37-2.16-8.37-8.37v24c0 6.21 2.16 8.37 8.37 8.37h14.85c6.21 0 8.1-2.16 8.1-8.37v-24c0 6.208-1.89 8.37-8.1 8.37m46.171-128.205l-9.72-.23c-10.53 0-18.63 1.31-25.65 3.47-2.43.54-2.7 1.89-2.7 3.24v36.912c0-1.35.27-2.7 2.7-3.24 7.02-2.16 15.12-3.24 25.65-3.24h9.72c6.21 0 8.37-2.16 8.37-8.37V75.355c0-2.85-.42-4.812-1.416-6.116-1.27 1.686-3.476 2.365-6.954 2.365m134.188 122.804c-10.8 4.32-27.27 9.45-52.92 9.45-38.61 0-56.432-20.25-56.432-54.27v24c0 34.02 17.82 54.27 56.43 54.27 25.65 0 42.122-5.13 52.922-9.45 8.64-3.51 10.53-6.75 10.53-15.12v-24c0 8.37-1.89 11.61-10.53 15.12m176.85-109.891c-10.8 0-19.98 2.7-26.19 4.86 2.16 5.67 2.97 12.69 2.97 20.25v2.762c6.012-1.916 14.025-3.873 23.22-3.873 17.55 0 26.19 8.91 26.19 26.19v-24c0-17.28-8.64-26.19-26.19-26.19m49.409 115.294h-14.85c-6.21 0-8.37-2.16-8.37-8.37v24c0 6.21 2.16 8.37 8.37 8.37h14.85c6.21 0 8.1-2.16 8.1-8.37v-24c0 6.208-1.888 8.37-8.1 8.37M476.803 84.517c-8.37 0-14.85 1.08-21.6 3.24-1.89.81-2.16 1.89-2.16 3.24v24c0-1.35.27-2.43 2.16-3.24 6.75-2.16 13.23-3.24 21.6-3.24 17.28 0 26.46 8.91 26.46 26.19v-24c.002-17.28-9.18-26.19-26.46-26.19m-31.86 115.293h-14.85c-6.21 0-8.37-2.16-8.37-8.37v24c0 6.21 2.16 8.37 8.37 8.37h14.85c6.21 0 8.1-2.16 8.1-8.37v-24c0 6.208-1.89 8.37-8.1 8.37m81.271 0h-14.58c-6.21 0-8.37-2.16-8.37-8.37v24c0 6.21 2.16 8.37 8.37 8.37h14.58c6.21 0 8.37-2.16 8.37-8.37v-24c0 6.208-2.16 8.37-8.37 8.37m177.659 4.048c-21.87 0-39.42-4.59-48.87-8.64-8.64-4.05-9.99-6.21-9.99-14.85v24c0 8.64 1.35 10.8 9.99 14.85 9.45 4.05 27 8.64 48.87 8.64 41.31 0 61.02-20.25 61.02-57.24v-24c0 36.99-19.71 57.24-61.02 57.24m.269-119.341c-11.34 0-21.33 2.7-27.81 4.86v24c6.48-2.16 16.47-4.86 27.81-4.86 19.17 0 29.43 9.45 29.43 26.46v-24c0-17.01-10.26-26.46-29.43-26.46m145.258-.27c-19.71 0-30.78 9.18-30.78 25.65v24c0-16.47 11.07-25.65 30.78-25.65 19.98 0 31.05 9.18 31.05 25.65v-24c0-16.47-11.07-25.65-31.05-25.65m0 119.611c-39.96 0-62.102-20.52-62.102-54v24c0 33.478 22.142 54 62.102 54 40.5 0 62.37-20.52 62.37-54v-24c0 33.48-21.87 54-62.37 54M925.223 64.29v-.482c-.007.152-.004.317 0 .48"/>
|
||||
<path fill="#FFD23E" d="M1115 115.417c260 0 344.89 11.12 395.905 62.135 5.295 3.076 11.095-.747 11.095-6.872V56.47c0-6.125-5.8-9.986-11.095-6.91C1462.193 98.276 1382 111.05 1115 111.05v4.367z"/>
|
||||
<path fill="#FFF" d="M183.883 17.28v13.23c0 6.75-2.43 9.18-9.18 9.18h-46.44v150.933c0 6.75-2.43 9.18-9.18 9.18h-15.66c-6.75 0-9.182-2.43-9.182-9.18V39.69H47.8c-7.02 0-9.18-2.43-9.18-9.18V17.28c0-6.75 2.16-9.18 9.18-9.18h126.903c6.75 0 9.18 2.43 9.18 9.18m62.909 38.61c6.21 0 8.37 1.89 8.37 8.37v11.88c0 6.21-2.16 8.37-8.37 8.37h-9.72c-10.53 0-18.63 1.08-25.65 3.24-2.43.54-2.7 1.89-2.7 3.24v100.442c0 6.21-1.89 8.37-8.1 8.37h-14.85c-6.21 0-8.37-2.16-8.37-8.37V79.38c0-8.64 1.89-11.88 10.53-15.39 9.99-3.78 26.19-7.56 50.22-8.1h8.64zM391.51 68.04v111.242c0 8.37-1.89 11.61-10.53 15.12-10.8 4.32-27.27 9.45-52.92 9.45-38.612 0-56.432-20.25-56.432-54.27v-81.54c0-6.212 2.16-8.102 8.37-8.102h14.85c6.21 0 8.1 1.89 8.1 8.1v80.462c0 18.09 9.72 26.73 29.43 26.73 10.53 0 17.55-1.08 24.84-3.24 2.432-.81 2.972-2.43 2.972-4.59V68.04c0-6.212 2.16-8.102 8.37-8.102h14.58c6.21 0 8.37 1.89 8.37 8.1M562.418 55.89c36.72 0 52.92 19.71 52.92 53.73v81.813c0 6.21-1.89 8.37-8.1 8.37h-14.85c-6.21 0-8.37-2.16-8.37-8.37v-80.73c0-17.282-8.64-26.192-26.19-26.192-10.8 0-19.98 2.7-26.19 4.86 2.16 5.67 2.97 12.692 2.97 20.25v81.814c0 6.21-2.16 8.37-8.37 8.37h-14.58c-6.21 0-8.37-2.16-8.37-8.37v-80.73c0-17.282-9.18-26.192-26.46-26.192-8.37 0-14.85 1.08-21.6 3.24-1.89.81-2.16 1.89-2.16 3.24v100.442c0 6.21-1.89 8.37-8.1 8.37h-14.852c-6.21 0-8.37-2.16-8.37-8.37V80.46c0-8.64 2.16-11.88 10.53-15.39 10.53-4.32 25.38-9.18 49.14-9.18 14.312 0 25.38 2.97 33.48 8.91 9.452-3.78 24.302-8.91 47.522-8.91M676.355 8.37v52.11c8.1-1.89 19.17-4.59 32.4-4.59 38.612 0 56.162 19.98 56.162 54.27v36.452c0 36.99-19.71 57.24-61.02 57.24-21.872 0-39.42-4.59-48.872-8.64-8.64-4.052-9.99-6.21-9.99-14.85V8.368c0-6.212 2.16-8.37 8.37-8.37h14.85c6.21 0 8.1 2.158 8.1 8.37m27.81 76.14c-11.34 0-21.33 2.7-27.81 4.86v79.652c0 1.35.27 2.16 2.16 2.97 6.21 2.16 14.31 3.24 23.22 3.24 21.602 0 31.862-9.45 31.862-29.43v-34.83c0-17.01-10.26-26.46-29.43-26.46m145.257-28.62c40.5 0 62.37 20.52 62.37 54v39.96c0 33.482-21.87 54.002-62.37 54.002-39.96 0-62.1-20.52-62.1-54v-39.96c0-33.48 22.14-54.002 62.1-54.002m0 28.35c-19.71 0-30.78 9.18-30.78 25.65v39.96c0 16.202 11.07 25.652 30.78 25.652 19.98 0 31.05-9.45 31.05-25.65v-39.96c0-16.47-11.07-25.65-31.05-25.65m263.524-14.582l-36.18 122.853c-1.62 5.94-5.132 7.56-11.342 7.56h-9.18c-6.48 0-9.72-1.62-11.61-7.56l-19.71-69.122c-3.51-12.958-4.59-26.73-4.86-27.81h-1.35c-.27 1.08-1.62 14.852-5.13 27.81l-19.71 69.123c-1.62 5.94-5.13 7.56-11.34 7.56h-8.91c-6.21 0-9.72-1.62-11.34-7.56L926.375 69.66c-2.432-7.83-1.352-9.72 6.75-9.72h10.53c9.99 0 13.5 1.35 14.85 8.37l15.39 60.482c2.43 11.88 4.05 31.59 4.59 32.94h1.35c.27-1.35 2.16-20.52 5.67-33.21l17.82-59.132c2.16-7.29 3.78-8.64 13.77-8.64h6.212c9.99 0 11.61 1.35 13.77 8.37l18.09 59.4c4.05 13.772 5.4 31.862 5.67 33.21h1.62c.27-1.35 1.08-17.82 4.59-33.21l14.852-60.21c1.62-7.02 4.86-8.37 15.12-8.37h8.91c8.098 0 9.178 1.89 7.018 9.72m140.127-1.62v136.353c0 35.37-17.01 58.86-59.4 58.86-29.162 0-46.44-9.99-56.163-25.92-3.777-5.94-2.968-10.26 3.513-13.5l10.26-5.67c6.48-3.24 9.45-2.43 13.5 3.24 5.67 8.91 13.77 13.77 28.35 13.77 18.9 0 28.622-9.99 28.622-29.16v-12.69c-8.37 1.89-18.9 3.78-32.13 3.78-38.612 0-56.432-20.25-56.432-54.27V68.04c0-6.21 2.16-8.1 8.37-8.1h14.85c6.21 0 8.1 1.89 8.1 8.1v73.712c0 18.09 9.72 26.73 29.432 26.73 11.34 0 20.52-1.89 27.81-3.78v-96.66c0-6.212 2.16-8.102 8.37-8.102h14.58c6.21 0 8.37 1.89 8.37 8.1m87.744-12.15c21.87 0 39.42 4.05 48.87 8.37 8.64 4.05 9.99 6.21 9.99 14.85v125.282c0 35.37-17.01 58.86-59.4 58.86-29.16 0-46.44-9.99-55.89-25.92-4.05-5.94-2.97-10.26 3.238-13.5l10.26-5.67c6.48-3.24 9.45-2.43 13.772 3.24 5.67 8.91 13.5 13.77 28.08 13.77 18.9 0 28.62-9.99 28.62-29.16v-13.5c-8.1 2.16-19.44 4.86-32.4 4.86-38.61 0-56.16-20.252-56.16-54.272v-30.51c0-36.72 19.71-56.7 61.02-56.7m2.16 28.62c-21.602 0-31.86 9.18-31.86 29.16v28.62c0 17.01 10.26 26.46 29.43 26.46 11.61 0 21.062-2.16 27.812-3.778V90.72c0-1.89-.54-2.43-2.43-3.24-5.94-1.62-14.04-2.97-22.952-2.97"/>
|
||||
<path fill="#FFD23E" d="M26.444 181.734h67.882v5H26.444zm1032.519-34.947l.728 5h3.757l.58-5M128.2 181.734h49.22v5H128.2zm151.143 0H208.7v5h74.244c-1.53-1.83-2.747-3.62-3.6-5m843.506-70.986h-103.505l-.117 5h103.622l214.737 5.636v-16.336m-368.367 5.7l1.23 5h18.88l1.57-5M9.386 142.4c-2.714-2.717-4.384-6.444-4.386-10.587v-1.092c.002-4.142 1.672-7.87 4.386-10.587 2.718-2.713 6.445-4.384 10.588-4.386h157.462v-5H19.974C8.94 110.75 0 119.69 0 130.723v1.092c.002 11.032 8.942 19.972 19.974 19.974h74.29v-5h-74.29c-4.143-.003-7.87-1.673-10.588-4.387m1123.874 4.385h-42.96l-1.547 5h44.894c-.23-1.89-.338-3.8-.387-5"/>
|
||||
<path fill="#FFBF40" d="M24.656 194.01c-2.198 0-3.997-1.8-3.997-3.997v-11.437c0-2.198 1.798-3.996 3.996-3.996s3.997 1.798 3.997 3.996v11.437c0 2.197-1.8 3.997-3.997 3.997"/>
|
||||
<path fill="#FFD23E" d="M391.422 181.734c-.075 1.458-.363 3.42-.937 5h31.264v-5H391.42zm641.598-29.947l-1.406-5H818.546v5m-690.346-5h293.55v5H128.2zm324.896.001H584.02v5H453.097zm486.697-31.04l-1.43-5H764.94v5m-556.21-5h294.566v5H208.73zm325.826 0H733.58v5H534.556zm-81.46 70.986v5H645.62c-.497-2.056-.558-4.18-.56-5H453.096zm731.052-34.947h-19.408c.086 1.03.325 3.043.965 5h18.443c4.143 0 7.87 1.672 10.588 4.386 2.713 2.718 4.384 6.445 4.386 10.59-.002 4.14-1.673 7.868-4.386 10.586-2.72 2.713-6.445 4.384-10.588 4.385H756.02c-1.05 1.577-3.283 4.29-3.873 5h432c11.032-.002 19.973-8.942 19.974-19.973h.002c-.002-11.033-8.942-19.973-19.974-19.975m-507.837.002h110.955v5H676.312zm-61.018 0h29.75v5h-29.75z"/>
|
||||
<path fill="#F7AD5E" d="M94.244 115.763h34.015v2.572H94.243zm83.25 36.075h31.232v2.572h-31.232zm94.141-36.108h31.31v2.57h-31.31z"/>
|
||||
<path fill="#F7AD5E" d="M291.408 117.923h2.526v28.797h-2.526zm68.844-2.085h31.232v2.572h-31.232zm0 35.875h31.232v2.572h-31.232zm61.535-35.875h31.232v2.572h-31.233zm81.508 35.942h31.31v2.57h-31.31z"/>
|
||||
<path fill="#F7AD5E" d="M523.383 153.566h2.572v26.53h-2.572z"/>
|
||||
<path fill="#F7AD5E" d="M530.042 155.446h-22.185l-2-2.572h26.185M298.81 119.567h-22.185l-2-2.572h26.185m-2 38.173h-22.185l-2-2.572h26.185m229.232 37.85h-22.185l-2-2.572h26.185m52.011-72.036h31.232v2.572h-31.232zm61-.093h31.232v2.572h-31.232zm142.279.045h31.277v2.572H787.33zm120.401 38.593l-2.216 1.614-19.31-.03-1.665-1.65h-4.37l.346-2.57h31.277l-.148 2.636m-3.914-35.875l-2.216 1.614-19.31-.03-1.665-1.65h-4.073v-2.687h31.343l-.016 2.734m186.844-.171h-29.015l.644-2.572h29.152m-21.671 73.557h-33.984l-.717-2.573h35.466m85.987-66.314l-31.277-1.82v-2.573l31.277.802m88.548 6.539l-31.278-1.553v-3.46l31.277.802m-200.939-.819h-32.822l-.05-2.572h32.09m-46.578 38.603h-23.97l.353-2.572h24.32m-27.969 2.572h-26.36l-.733-2.572h26.81m-78.693 34.977l-97.852-.032 2.64 2.572h92.598s1.566-1.383 2.614-2.54m96.182 2.552h-33.346l-.698-2.572 34.84.03m-230.861-32.417h-31.75l.375-2.572h31.54m-180.737 34.854h31.232v2.572h-31.232z"/>
|
||||
<path fill="#F7AD5E" d="M503.295 186.73h31.31v2.572h-31.31zm-199.982-32.382h-31.607v-2.573h31.353m901.029 16.152c-.605 10.49-9.3 18.806-19.94 18.807h-48.22l.87 2.6h47.35c12.14 0 19.48-9.43 19.964-21.452l-.024.045z"/>
|
||||
<path fill="#FFBF40" d="M1515.063 183.442h-1.125c-3.83 0-6.938-3.105-6.938-6.937V51.115c0-3.832 3.107-6.938 6.938-6.938h1.125c3.83 0 6.937 3.106 6.937 6.937v125.392c0 3.83-3.106 6.936-6.937 6.936"/>
|
||||
<path fill="#FFD23E" d="M289.022 160.377h-3.876c-1.31 0-2.37-1.06-2.37-2.37V104.42c0-1.31 1.06-2.37 2.37-2.37h3.876c1.31 0 2.37 1.06 2.37 2.37v53.584c.002 1.31-1.06 2.37-2.37 2.37"/>
|
||||
<path fill="#FFD23E" d="M297.598 110.34v4.96c0 1.01-.82 1.828-1.83 1.828H278.4c-1.01 0-1.83-.818-1.83-1.828v-4.96c0-1.01.82-1.83 1.83-1.83h17.368c1.01 0 1.83.82 1.83 1.83m.09 36.07v4.96c0 1.01-.82 1.827-1.83 1.827h-17.367c-1.01 0-1.828-.817-1.828-1.827v-4.96c0-1.01.82-1.83 1.83-1.83h17.367c1.01 0 1.828.82 1.828 1.83m223.334 48.44h-3.875c-1.31 0-2.37-1.062-2.37-2.372V141.74c0-1.31 1.06-2.37 2.37-2.37h3.875c1.31 0 2.37 1.06 2.37 2.37v50.738c0 1.31-1.06 2.37-2.37 2.37"/>
|
||||
<path fill="#FFD23E" d="M529.598 146.787v4.96c0 1.01-.82 1.828-1.83 1.828H510.4c-1.01 0-1.83-.817-1.83-1.828v-4.96c0-1.01.82-1.83 1.83-1.83h17.368c1.01 0 1.83.82 1.83 1.83m.09 35.123v4.96c0 1.01-.82 1.827-1.83 1.827h-17.367c-1.01 0-1.828-.817-1.828-1.827v-4.96c0-1.01.82-1.83 1.83-1.83h17.367c1.01 0 1.828.82 1.828 1.83m368.667-22.25h-3.875c-1.31 0-2.37-1.06-2.37-2.37v-52.648c0-1.31 1.06-2.37 2.37-2.37h3.875c1.31 0 2.37 1.06 2.37 2.37v52.648c.002 1.31-1.06 2.37-2.37 2.37"/>
|
||||
<path fill="#FFD23E" d="M906.93 110.904v4.96c0 1.01-.817 1.828-1.828 1.828h-17.367c-1.01 0-1.83-.818-1.83-1.828v-4.96c0-1.01.82-1.83 1.83-1.83h17.367c1.01 0 1.83.82 1.83 1.83m.088 34.946v4.96c0 1.01-.818 1.828-1.828 1.828h-17.368c-1.01 0-1.83-.817-1.83-1.828v-4.96c0-1.01.82-1.83 1.83-1.83h17.368c1.01 0 1.83.82 1.83 1.83"/>
|
||||
<path fill="#F7AD5E" d="M1311.15 120.648l-31.323-.726v4.005l31.323 2.78"/>
|
||||
<path fill="#FCC74F" d="M1355.465 113.664c-48.844 0-215.89 2.035-240.465 2.035h.015c92.948 1.257 167.36 5.58 221.797 5.58 11.178.887 21.67 1.895 31.55 3.03v-10.533c-4.445-.08-8.76-.113-12.897-.113m44.229 1.577v13.46c54.928 9.307 86.913 24.554 111.21 48.852 5.296 3.077 11.096-.747 11.096-6.87V157.9c-32.64-29.156-80.04-39.297-122.306-42.66"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,890 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Trumbowyg - A lightweight WYSIWYG editor by Alex-D / Alexandre Demode</title>
|
||||
<meta name="description" content="Trumbowyg is a very small jQuery plugin for creating a powerful WYSIWYG editor">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
|
||||
<meta name="google-site-verification" content="JCnDOPMjp30qGb-ab2q0YnQ99Np9wop0E3wYXKwSoOw">
|
||||
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" type="text/css">
|
||||
<link rel="stylesheet" href="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/ui/trumbowyg.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header header-landing">
|
||||
<ul class="header-nav">
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg" class="view-on-github">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="438.549" height="438.549" viewBox="0 0 438.549 438.549">
|
||||
<path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736 15.166 259.057 5.365 219.27 5.365c-39.78 0-76.47 9.804-110.062 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.853 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.42-1.996 2.474-2.282 3.71-5.14 3.71-8.562 0-.57-.05-5.708-.144-15.417-.098-9.71-.144-18.18-.144-25.406l-6.567 1.136c-4.187.767-9.47 1.092-15.846 1-6.375-.09-12.992-.757-19.843-2-6.854-1.23-13.23-4.085-19.13-8.558-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.9-9.233-8.992-14.56-4.093-5.33-8.232-8.944-12.42-10.847l-1.998-1.43c-1.332-.952-2.568-2.1-3.71-3.43-1.143-1.33-1.998-2.663-2.57-3.997-.57-1.335-.097-2.43 1.428-3.29 1.525-.858 4.28-1.275 8.28-1.275l5.708.853c3.807.763 8.516 3.042 14.133 6.85 5.615 3.807 10.23 8.755 13.847 14.843 4.38 7.807 9.657 13.755 15.846 17.848 6.184 4.093 12.42 6.136 18.7 6.136 6.28 0 11.703-.476 16.273-1.423 4.565-.95 8.848-2.382 12.847-4.284 1.713-12.758 6.377-22.56 13.988-29.41-10.847-1.14-20.6-2.857-29.263-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.98-3.9-12.373-5.852-26.647-5.852-42.825 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.38-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.284 18.794 7.953 23.84 10.995 5.046 3.04 9.09 5.618 12.135 7.708 17.706-4.947 35.977-7.42 54.82-7.42s37.116 2.473 54.822 7.42l10.85-6.85c7.418-4.57 16.18-8.757 26.26-12.564 10.09-3.806 17.803-4.854 23.135-3.14 8.562 21.51 9.325 40.923 2.28 58.24 15.035 16.18 22.558 35.788 22.558 58.818 0 16.178-1.958 30.497-5.853 42.966-3.9 12.47-8.94 22.457-15.125 29.98-6.19 7.52-13.9 13.85-23.13 18.985-9.233 5.14-18.183 8.85-26.84 11.135-8.663 2.286-18.416 4.004-29.264 5.146 9.894 8.563 14.842 22.078 14.842 40.54v60.237c0 3.422 1.19 6.28 3.572 8.562 2.38 2.278 6.136 2.95 11.276 1.994 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.16 41.826-81.126 41.826-128.906-.01-39.77-9.818-76.454-29.414-110.05z"></path>
|
||||
</svg>
|
||||
View project on GitHub — <span class="star-count">2700</span> <span class="star">★</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://alex-d.fr">
|
||||
Made by Alex-D
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#donate">
|
||||
Donate
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/">
|
||||
Plugins
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="header-logo-container">
|
||||
<h1 class="header-logo-h1">
|
||||
<img src="./img/logo.svg" alt="Trumbowyg" class="header-logo">
|
||||
<span class="header-logo-animation">
|
||||
<svg class="header-logo-animation-strong">
|
||||
<use xlink:href="#trumbowyg-strong"></use>
|
||||
</svg>
|
||||
<svg class="header-logo-animation-p">
|
||||
<use xlink:href="#trumbowyg-p"></use>
|
||||
</svg>
|
||||
<svg class="header-logo-animation-link">
|
||||
<use xlink:href="#trumbowyg-link"></use>
|
||||
</svg>
|
||||
<svg class="header-logo-animation-blockquote">
|
||||
<use xlink:href="#trumbowyg-blockquote"></use>
|
||||
</svg>
|
||||
<svg class="header-logo-animation-view-html">
|
||||
<use xlink:href="#trumbowyg-view-html"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h2 class="header-subtitle">A lightweight WYSIWYG editor</h2>
|
||||
<p class="header-description">
|
||||
Light, translatable and customisable jQuery plugin <br>
|
||||
Beautiful design, generates semantic code, comes with a powerful API
|
||||
</p>
|
||||
|
||||
<div class="header-buttons">
|
||||
<a href="./documentation/" class="button button-secondary">
|
||||
Get started
|
||||
</a>
|
||||
<a href="./demos/" class="button button-ghost">
|
||||
See Demos
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="main">
|
||||
<section class="section wrapper" id="demonstration">
|
||||
<textarea id="trumbowyg-demo">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <strong>some text bold</strong> sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Duis aute <a href="https://twitter.com/AlexandreDemode" target="_blank">some link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.
|
||||
</p>
|
||||
</textarea>
|
||||
|
||||
<div class="demo-switcher current-core">
|
||||
<button type="button" class="button current" data-config="core">
|
||||
Default
|
||||
</button>
|
||||
<button type="button" class="button" data-config="plugins">
|
||||
With plugins
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section section-introduction">
|
||||
<div class="introduction-section">
|
||||
<div class="wrapper">
|
||||
<div class="introduction-section-col">
|
||||
<h4 class="introduction-section-col-title">
|
||||
<img src="./img/introduction-html.svg" alt="">
|
||||
HTML5 & semantic
|
||||
</h4>
|
||||
<p class="introduction-section-col-description">
|
||||
Editor and generated code are optimized for HTML5 support. Compatible with all recents
|
||||
browsers like IE9+, Chrome, Opera and Firefox.
|
||||
</p>
|
||||
</div>
|
||||
<div class="introduction-section-col">
|
||||
<h4 class="introduction-section-col-title">
|
||||
<img src="./img/introduction-lightweight.svg" alt="" class="illu-lightweight">
|
||||
Fast & lightweight
|
||||
</h4>
|
||||
<p class="introduction-section-col-description">
|
||||
All existing WYSIWYG editors are larger than 45kB. Trumbowyg is only 20kB which means faster
|
||||
page loading. No useless features, just the necessary ones to generate clean, semantic code.
|
||||
</p>
|
||||
</div>
|
||||
<div class="introduction-section-col">
|
||||
<h4 class="introduction-section-col-title">
|
||||
<img src="./img/introduction-customizable.svg" alt="">
|
||||
Customizable
|
||||
</h4>
|
||||
<p class="introduction-section-col-description">
|
||||
Options and design are entirely configurable to suit your needs. However, the default design
|
||||
is compatible with Retina display and optimized for a great and simple user experience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section section-primary languages" id="languages">
|
||||
<div class="wrapper">
|
||||
<h2 class="section-title">40+ Languages</h2>
|
||||
|
||||
<p>
|
||||
Read the documentation to <a href="./documentation/#localization">apply a localization</a>
|
||||
</p>
|
||||
<p>
|
||||
You can <a href="./documentation/#add-localization">create your own localization file</a> and submit
|
||||
it in a pull request :)
|
||||
</p>
|
||||
|
||||
<div class="languages-columns">
|
||||
<div class="col-globe">
|
||||
<img src="img/globe.svg" alt="" class="globe">
|
||||
</div>
|
||||
<div class="col-list">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="continent-name" type="button">
|
||||
Africa
|
||||
</button>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ar.min.js">
|
||||
<span class="lang-code">ar</span>
|
||||
<span class="lang-name">Arabic</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button class="continent-name" type="button">
|
||||
America
|
||||
</button>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/es_ar.min.js">
|
||||
<span class="lang-code">es_ar</span>
|
||||
<span class="lang-name">Spanish (Argentina)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/pt_br.min.js">
|
||||
<span class="lang-code">pt_br</span>
|
||||
<span class="lang-name">Portuguese (Brazil)</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button class="continent-name" type="button">
|
||||
Asia
|
||||
</button>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/bn.min.js">
|
||||
<span class="lang-code">bn</span>
|
||||
<span class="lang-name">Bengla</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/fa.min.js">
|
||||
<span class="lang-code">fa</span>
|
||||
<span class="lang-name">Persian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/he.min.js">
|
||||
<span class="lang-code">he</span>
|
||||
<span class="lang-name">Hebrew</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/id.min.js">
|
||||
<span class="lang-code">id</span>
|
||||
<span class="lang-name">Indonesian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ja.min.js">
|
||||
<span class="lang-code">ja</span>
|
||||
<span class="lang-name">Japanese</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ko.min.js">
|
||||
<span class="lang-code">ko</span>
|
||||
<span class="lang-name">Korean</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/mn.min.js">
|
||||
<span class="lang-code">mn</span>
|
||||
<span class="lang-name">Mongolian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/my.min.js">
|
||||
<span class="lang-code">my</span>
|
||||
<span class="lang-name">Malaysian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ph.min.js">
|
||||
<span class="lang-code">ph</span>
|
||||
<span class="lang-name">Filipino</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ru.min.js">
|
||||
<span class="lang-code">ru</span>
|
||||
<span class="lang-name">Russian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/th.min.js">
|
||||
<span class="lang-code">th</span>
|
||||
<span class="lang-name">Thai</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/tr.min.js">
|
||||
<span class="lang-code">tr</span>
|
||||
<span class="lang-name">Turkish</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/vi.min.js">
|
||||
<span class="lang-code">vi</span>
|
||||
<span class="lang-name">Vietnamese</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/zh_cn.min.js">
|
||||
<span class="lang-code">zh_cn</span>
|
||||
<span class="lang-name">Simplified Chinese</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/zh_tw.min.js">
|
||||
<span class="lang-code">zh_tw</span>
|
||||
<span class="lang-name">Traditional Chinese</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button class="continent-name" type="button">
|
||||
Europe
|
||||
</button>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/bg.min.js">
|
||||
<span class="lang-code">bg</span>
|
||||
<span class="lang-name">Bulgarian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/by.min.js">
|
||||
<span class="lang-code">by</span>
|
||||
<span class="lang-name">Belarusian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ca.min.js">
|
||||
<span class="lang-code">ca</span>
|
||||
<span class="lang-name">Catalan</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/cs.min.js">
|
||||
<span class="lang-code">cs</span>
|
||||
<span class="lang-name">Czech</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/da.min.js">
|
||||
<span class="lang-code">da</span>
|
||||
<span class="lang-name">Danish</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/de.min.js">
|
||||
<span class="lang-code">de</span>
|
||||
<span class="lang-name">German</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/el.min.js">
|
||||
<span class="lang-code">el</span>
|
||||
<span class="lang-name">Greek</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/src/langs/en.js">
|
||||
<span class="lang-code">en</span>
|
||||
<span class="lang-name">English</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/es.min.js">
|
||||
<span class="lang-code">es</span>
|
||||
<span class="lang-name">Spanish</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/et.min.js">
|
||||
<span class="lang-code">et</span>
|
||||
<span class="lang-name">Estonian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/fi.min.js">
|
||||
<span class="lang-code">fi</span>
|
||||
<span class="lang-name">Finnish</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/fr.min.js">
|
||||
<span class="lang-code">fr</span>
|
||||
<span class="lang-name">French</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/hr.min.js">
|
||||
<span class="lang-code">hr</span>
|
||||
<span class="lang-name">Croatian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/hu.min.js">
|
||||
<span class="lang-code">hu</span>
|
||||
<span class="lang-name">Hungarian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/it.min.js">
|
||||
<span class="lang-code">it</span>
|
||||
<span class="lang-name">Italian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/lt.min.js">
|
||||
<span class="lang-code">lt</span>
|
||||
<span class="lang-name">Lithuanian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/nl.min.js">
|
||||
<span class="lang-code">nl</span>
|
||||
<span class="lang-name">Dutch</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/no_nb.min.js">
|
||||
<span class="lang-code">no_nb</span>
|
||||
<span class="lang-name">Norwegian (Bokmål)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/pl.min.js">
|
||||
<span class="lang-code">pl</span>
|
||||
<span class="lang-name">Polish</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/pt.min.js">
|
||||
<span class="lang-code">pt</span>
|
||||
<span class="lang-name">Portuguese</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ro.min.js">
|
||||
<span class="lang-code">ro</span>
|
||||
<span class="lang-name">Romanian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/rs.min.js">
|
||||
<span class="lang-code">rs</span>
|
||||
<span class="lang-name">Serbian (Cyrlic)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/rs_latin.min.js">
|
||||
<span class="lang-code">rs_latin</span>
|
||||
<span class="lang-name">Serbian (Latin)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ru.min.js">
|
||||
<span class="lang-code">ru</span>
|
||||
<span class="lang-name">Russian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/sk.min.js">
|
||||
<span class="lang-code">sk</span>
|
||||
<span class="lang-name">Slovak</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/sl.min.js">
|
||||
<span class="lang-code">sl</span>
|
||||
<span class="lang-name">Slovenian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/sq.min.js">
|
||||
<span class="lang-code">sq</span>
|
||||
<span class="lang-name">Albanian</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/sv.min.js">
|
||||
<span class="lang-code">sv</span>
|
||||
<span class="lang-name">Swedish</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Alex-D/Trumbowyg/blob/v2.25.0/dist/langs/ua.min.js">
|
||||
<span class="lang-code">ua</span>
|
||||
<span class="lang-name">Ukrainian</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="section section-secondary plugins-packages">
|
||||
<div class="wrapper">
|
||||
<div class="col-plugins">
|
||||
<h2 class="section-title" id="plugins">Plugins</h2>
|
||||
<h3 class="section-subtitle">Extends Trumbowyg</h3>
|
||||
|
||||
<p>
|
||||
You can create your own plugins for Trumbowyg and propose them via pull requests on the Github
|
||||
repository.
|
||||
<a href="./documentation/plugins/">Plugins documentation</a>
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-cleanpaste">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-removeformat"></use>
|
||||
</svg>
|
||||
Allow tags from paste
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-base64">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-base64"></use>
|
||||
</svg>
|
||||
Base 64
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-cleanpaste">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-removeformat"></use>
|
||||
</svg>
|
||||
Clean paste
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-colors">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-back-color"></use>
|
||||
</svg>
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-emoji">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-emoji"></use>
|
||||
</svg>
|
||||
Emoji
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-fontfamily">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-bold"></use>
|
||||
</svg>
|
||||
Font family
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-fontsize">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-fontsize"></use>
|
||||
</svg>
|
||||
Font size
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-giphy">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-giphy"></use>
|
||||
</svg>
|
||||
Giphy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-highlight">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-highlight"></use>
|
||||
</svg>
|
||||
Highlight
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-history">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-undo"></use>
|
||||
</svg>
|
||||
History
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-indent">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-indent"></use>
|
||||
</svg>
|
||||
Indent
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-insertaudio">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-insert-audio"></use>
|
||||
</svg>
|
||||
Insert audio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-lineheight">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-lineheight"></use>
|
||||
</svg>
|
||||
Line height
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-mathml">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-mathml"></use>
|
||||
</svg>
|
||||
MathML
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-mention">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-mention"></use>
|
||||
</svg>
|
||||
Mention
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-noembed">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-noembed"></use>
|
||||
</svg>
|
||||
No embed
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-pasteembed">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-noembed"></use>
|
||||
</svg>
|
||||
Paste embed
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-pasteimage">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-insert-image"></use>
|
||||
</svg>
|
||||
Paste image
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-preformatted">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-preformatted"></use>
|
||||
</svg>
|
||||
Preformatted
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-resizimg">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-insert-image"></use>
|
||||
</svg>
|
||||
Resizimg
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-ruby">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-ruby"></use>
|
||||
</svg>
|
||||
Ruby
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-specialchars">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-special-chars"></use>
|
||||
</svg>
|
||||
Special chars
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-table">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-table"></use>
|
||||
</svg>
|
||||
Table
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-template">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-justify-full"></use>
|
||||
</svg>
|
||||
Template
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./documentation/plugins/#plugin-upload">
|
||||
<svg>
|
||||
<use xlink:href="#trumbowyg-upload"></use>
|
||||
</svg>
|
||||
Upload
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-packages">
|
||||
<h2 class="section-title" id="packages">Packages</h2>
|
||||
<h3 class="section-subtitle">Ready for use Web frameworks and CMS packages</h3>
|
||||
|
||||
<p>
|
||||
You can create your own package for Trumbowyg or use a ready for use. This is the full list of
|
||||
known packages for Trumbowyg.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jutaz/angular-trumbowyg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
|
||||
<path fill="#FF974A" d="M17.9 14.9l-2.9-6-.1-.1-2.6 6.2h5.6zM15 0L.8 5 3 23.4 15 30l12-6.6 2.2-18.5L15 0zm6 22l-2-4.5h-7.9l-1.8 4.4-3.2.1 8.8-19.4L24.1 22H21z"></path>
|
||||
</svg>
|
||||
AngularJS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/ankurk91/vue-trumbowyg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.19 24.38">
|
||||
<path fill="#ff974a" d="M0 .06l14.09 24.32L28.18 0h-5.65l-8.44 14.66L5.65.03z"></path>
|
||||
<path fill="#ffbe92" d="M5.66.03l8.47 14.63L22.53 0h-5.19l-3.21 5.69L10.86.05 5.66.03z"></path>
|
||||
</svg>
|
||||
Vue.js
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/RD17/react-trumbowyg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.7 33.5">
|
||||
<g fill="#ff974a">
|
||||
<circle cx="18.8" cy="16.7" r="3.4"></circle>
|
||||
<path d="M37.5 15.8c-.2-.5-.5-1-.8-1.5-.3-.3-.6-.7-1-1-.6-.5-1.3-.9-2.1-1.3s-1.7-.8-2.6-1.1c-.4-.1-.8-.3-1.2-.4.1-.3.1-.6.2-.8.3-1.4.4-2.6.4-3.8 0-1.3-.2-2.4-.5-3.3-.2-.5-.4-.9-.7-1.2-.3-.4-.6-.7-1-.9-.3-.1-.5-.3-.8-.3-.3-.2-.6-.2-.9-.2-.5 0-1 .1-1.5.2-.8.2-1.6.6-2.5 1.1-.9.5-1.8 1.2-2.7 2l-.9.9-.6-.6c-1.3-1.1-2.5-2-3.7-2.6-.6-.3-1.2-.5-1.7-.7-.7-.2-1.2-.3-1.8-.3-.3 0-.6 0-.9.1-.3.1-.6.2-.8.4-.4.2-.7.5-1 .8-.2.3-.4.6-.5.9-.2.5-.4 1-.5 1.6-.1.6-.1 1.3-.1 1.9 0 1.1.1 2.2.4 3.5l.3 1.2c-.5.1-.9.3-1.4.4-1 .3-1.9.7-2.6 1.1-.6.3-1.1.6-1.6 1-.7.5-1.3 1.1-1.7 1.7-.2.3-.4.6-.5 1-.1.4-.2.8-.2 1.1 0 .3.1.6.1.9.2.5.5 1 .8 1.5.6.7 1.4 1.4 2.4 2 1 .6 2.2 1.2 3.5 1.6.3.1.7.2 1 .3-.1.5-.2.9-.3 1.3-.2 1.2-.3 2.3-.3 3.3 0 1.2.2 2.3.5 3.2.2.5.4.9.7 1.2.3.4.6.7 1 .9.3.2.6.3.9.3.3.1.6.1.9.1.5 0 1-.1 1.6-.2.8-.2 1.7-.6 2.6-1.1.9-.5 1.8-1.2 2.8-2 .3-.2.5-.5.8-.7.3.3.7.6 1 .9 1.2 1 2.3 1.8 3.4 2.3.6.3 1.1.5 1.6.6.5.1 1 .2 1.5.2.3 0 .6 0 .9-.1.3-.1.6-.2.8-.3.4-.2.7-.5 1-.9.2-.3.4-.6.5-.9.2-.5.4-1.1.5-1.7.1-.6.2-1.3.2-2 0-1.1-.1-2.2-.4-3.5-.1-.3-.1-.7-.2-1 .2-.1.5-.1.7-.2 1.1-.4 2-.8 2.9-1.2.6-.3 1.2-.7 1.7-1.1.8-.6 1.4-1.2 1.8-1.8.2-.3.4-.7.5-1 .1-.3.2-.7.2-1.1.1-.1 0-.4-.1-.7zM20.8 4.5C22 3.5 23 2.8 24 2.3c.5-.2.9-.4 1.4-.5.4-.1.8-.2 1.1-.2.2 0 .4 0 .5.1.2 0 .3.1.4.2.2.1.3.2.5.5l.3.6c.2.4.3.8.4 1.3.1.5.1 1.1.1 1.7 0 1-.1 2.2-.4 3.5-.1.2-.1.5-.2.7-.9-.2-1.8-.4-2.8-.5-.7-.1-1.5-.2-2.2-.3-.4-.6-.8-1.1-1.2-1.6-.7-.8-1.3-1.6-2-2.4.4-.4.7-.6.9-.9zm-8.6 8.4c-.4.6-.7 1.3-1.1 1.9-.1-.3-.2-.5-.3-.8-.3-.8-.6-1.7-.9-2.5.8-.2 1.6-.3 2.5-.5.3 0 .6-.1.9-.1-.4.7-.7 1.4-1.1 2zm-1.1 5.8c.3.6.7 1.3 1.1 1.9.4.7.8 1.3 1.2 1.9-.3 0-.5-.1-.8-.1-1-.1-1.9-.3-2.7-.5.2-.8.5-1.6.9-2.5.1-.2.2-.5.3-.7zm2.5 1.1c-.6-1-1.1-2-1.6-3 .5-1 1-2 1.6-3 .6-1 1.2-2 1.8-2.9 1.1-.1 2.3-.1 3.4-.1 1.2 0 2.3 0 3.4.1.6.9 1.2 1.9 1.8 2.9.6 1 1.1 2 1.6 3-.5 1-1 2-1.6 3-.6 1-1.2 2-1.8 2.9-1.1.1-2.3.1-3.4.1-1.2 0-2.3 0-3.4-.1-.6-.9-1.2-1.9-1.8-2.9zm11.9.8c.4-.7.7-1.3 1.1-2 .1.2.2.5.3.7.4.9.7 1.8 1 2.6-.9.2-1.9.4-2.9.5-.2 0-.4 0-.6.1.3-.6.7-1.3 1.1-1.9zm1.3-6.3c-.1.2-.1.4-.2.5-.3-.7-.7-1.3-1.1-2-.4-.6-.8-1.3-1.1-1.9.3 0 .6.1.8.1.9.1 1.8.3 2.6.5-.3 1-.6 1.9-1 2.8zm-8-7.8c.6.7 1.2 1.4 1.9 2.2.1.2.2.3.4.5-.7 0-1.5-.1-2.2-.1-.7 0-1.5 0-2.2.1.2-.2.3-.4.5-.7.5-.7 1.1-1.4 1.6-2zM9.3 3.1c.1-.3.3-.6.4-.8.1-.2.3-.3.5-.4.1-.1.3-.1.4-.2.2 0 .3-.1.6-.1s.7.1 1.2.2c.7.2 1.4.5 2.3 1 .8.5 1.7 1.1 2.6 1.9.2.2.4.3.6.5-.6.7-1.2 1.4-1.9 2.2-.6.6-1 1.2-1.5 1.9-.8.1-1.6.2-2.3.3-.9.1-1.8.3-2.7.5l-.3-1.2c-.2-1.2-.3-2.2-.3-3.2s.1-1.9.4-2.6zm-1 18.5l-.9-.3c-1-.3-1.8-.7-2.5-1.1-.6-.3-1-.6-1.5-.9-.6-.5-1.1-1-1.4-1.4-.1-.2-.3-.4-.3-.6-.1-.2-.1-.4-.1-.5 0-.1 0-.3.1-.4.1-.3.3-.6.5-.9l.8-.8c.5-.4 1-.8 1.7-1.1.7-.4 1.5-.7 2.4-1 .4-.1.8-.3 1.3-.4l.9 2.7.9 2.1c-.3.7-.6 1.5-.9 2.2-.4.6-.7 1.5-1 2.4zm8.8 7.3c-1.1 1-2.3 1.8-3.3 2.2-.5.2-1 .4-1.4.5-.4.1-.8.2-1.2.2-.2 0-.4 0-.6-.1-.2 0-.3-.1-.4-.2-.2-.1-.3-.2-.5-.4-.1-.2-.2-.3-.3-.6-.2-.3-.3-.8-.4-1.2-.1-.5-.1-1-.1-1.6 0-.9.1-1.9.3-3 .1-.4.2-.8.3-1.3.9.2 1.9.4 2.9.5.7.1 1.4.2 2.1.2.5.6.9 1.3 1.4 1.9.6.8 1.2 1.5 1.8 2.1-.2.4-.4.6-.6.8zm1.8-1.8c-.6-.6-1.1-1.3-1.7-2-.2-.2-.4-.5-.6-.7h2.2c.8 0 1.5 0 2.3-.1-.1.2-.3.4-.4.6-.6.8-1.2 1.5-1.8 2.2zm9.5 3.2c-.1.4-.3.6-.5.9-.2.2-.3.4-.5.5-.1.1-.3.1-.4.2-.2 0-.3.1-.5.1-.3 0-.7-.1-1.1-.2-.6-.2-1.3-.5-2.1-.9-.7-.4-1.5-1-2.4-1.7l-.9-.9c.6-.7 1.3-1.5 1.9-2.3.4-.5.8-1.1 1.2-1.7.7-.1 1.3-.1 1.9-.2 1.1-.1 2.2-.3 3.2-.6.1.3.1.6.2.9.2 1.2.3 2.2.3 3.2.1 1.1 0 2-.3 2.7zM36 17.2c-.1.3-.3.6-.6 1-.2.3-.5.5-.9.8-.5.4-1.2.8-1.9 1.2-.7.4-1.6.8-2.6 1.1-.2.1-.4.1-.6.2-.3-.9-.6-1.9-1-2.8-.3-.6-.6-1.3-.9-1.9.3-.6.5-1.2.8-1.8.4-1 .8-2 1.1-2.9.4.1.8.2 1.1.4.9.3 1.7.7 2.5 1 .5.3 1 .6 1.4.9.6.4 1.1.9 1.3 1.3l.3.6c.1.2.1.3.1.5 0 .1-.1.2-.1.4z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
React
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bitbucket.org/fogstream/django-fs-trumbowyg/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
|
||||
<g fill="#FF974A">
|
||||
<path d="M3.5 10.3h1.6v7.6c-.8.2-1.5.2-2.1.2-2 0-3-.9-3-2.6 0-1.7 1.1-2.8 2.8-2.8.3 0 .5 0 .7.1v-2.5zm0 3.8c-.2-.1-.4-.1-.6-.1-.8 0-1.3.5-1.3 1.4 0 .9.5 1.3 1.3 1.3h.6v-2.6z"></path>
|
||||
<path d="M7.8 12.9v3.8c0 1.3-.1 1.9-.4 2.5-.3.5-.6.8-1.4 1.1l-1.5-.7c.7-.3 1.1-.6 1.3-1.1.2-.5.3-1 .3-2.4v-3.2h1.7zm-1.7-2.6h1.6V12H6.1v-1.7zM8.8 13.2c.7-.3 1.4-.5 2.2-.5.8 0 1.4.2 1.6.7.1.2.2.6.2 1.2V18c-.7.1-1.7.2-2.3.2-1.4 0-2-.5-2-1.5 0-1.1.8-1.7 2.8-1.8v-.4c0-.3-.1-.4-.6-.4-.6 0-1.3.2-1.9.5v-1.4zm2.5 2.6c-1.1.1-1.4.3-1.4.7 0 .3.2.5.6.5.2 0 .5 0 .8-.1v-1.1zM13.5 13.1c1-.3 1.8-.4 2.6-.4s1.4.2 1.8.6c.3.4.4.7.4 1.6v3.2h-1.6V15c0-.6-.2-.9-.8-.9-.2 0-.4 0-.8.1v3.9h-1.6v-5zM19 19c.6.3 1.1.4 1.8.4 1.1 0 1.5-.4 1.5-1.5-.3.2-.6.2-1.1.2-1.4 0-2.3-.9-2.3-2.4 0-1.9 1.3-2.9 3.7-2.9.7 0 1.3.1 2.1.2l-.6 1.2c-.4-.1 0 0-.4 0v2.9c0 1.4-.1 2.1-.5 2.6-.5.8-1.4 1.2-2.6 1.2-.6 0-1.2-.1-1.8-.3L19 19zm3.3-4.9c-.1 0-.1 0 0 0h-.2c-.3 0-.7.1-.9.2-.4.2-.6.6-.6 1.2 0 .8.4 1.3 1.1 1.3.2 0 .4 0 .6-.1v-.5-2.1zM27.3 12.7c1.6 0 2.6 1 2.6 2.7 0 1.7-1 2.8-2.7 2.8-1.6 0-2.6-1-2.6-2.7 0-1.7 1-2.8 2.7-2.8zm0 4.2c.6 0 1-.5 1-1.4 0-.9-.4-1.4-1-1.4s-1 .5-1 1.4c0 .9.3 1.4 1 1.4z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
Django
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/TikiTDO/trumbowyg_rails">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
|
||||
<path fill="#FF974A" d="M8.8 26.5c0-1.5-1.1-1.7-2.4-1.7H4.7V30H6v-1.4l1.2 1.2h2l-1.6-1.6s1.1 0 1.2-1.7zm-1.6.6H6v-.9h1.1v.9zm4.7-2.3h-.3c-.7 0-1.7.1-1.7 1.4v3.6h1.3V29h1.3v.9h1.3v-3.8c0-1.2-1.2-1.3-1.9-1.3zm.6 2.8h-1.2v-1.4h1.2v1.4zm2.7 2.2h1.4v-5h-1.4v5zm4.1-4.9H18v5h3.3v-1.3h-1.9v-3.7zm5 1.8h-.9v-.5h2.2v-1.3h-1.9c-1.2 0-1.8.5-1.8 1.7s1.1 1.5 1.8 1.5c.6 0 .9.1.9.3 0 .2 0 .4-.6.4h-2V30h1.7c1.4 0 2.1-.1 2.1-1.7 0-1.6-1-1.6-1.5-1.6zM19 1.3c-4.3.4-7.2 3.3-9 6.8-1.8 3.5-2.9 6-3.6 9.7-.7 3.7-.4 5.6-.4 5.6h11.3s-2.5-5.9-1.9-11.3c.6-5.4 4.8-7.9 7.1-8.1 2.3-.3 3.6 1.2 3.6 1.2l.5-.8S23.2.9 19 1.3zM5.9 17.6l-2.2-.2-.3 2.2 2.1.3.4-2.3zm1.8-6.7l-2-.8-.6 1.9 2 .7.6-1.8zM11 5.3l-1.5-1-1.1 1.4 1.5 1.1L11 5.3zm4.3-3.6l-1-1.2-1.4.7 1 1.3 1.4-.8zm4.6-.6L19.7 0l-1.8-.1.3 1.3 1.7-.1zm5.3 1.2l-1.4-1.1V2l1.2.7.2-.4zm-.5 2.6l-1.1-.3v.7l1.1.1v-.5zm-4.8.3l.6 1.1.8-.7-.2-.7-1.2.3zM19 7.8l-.9-1.3-.9.8 1.2 1.4.6-.9zm-3.1 3.5l1.4 1.3.3-1.4-1.2-1-.5 1.1zm-.1 4.4l1.8.8-.1-1.5-1.6-.9-.1 1.6zm3.2 5.6l-.8-1.7h-1.9l.4 1.6 2.3.1z"></path>
|
||||
</svg>
|
||||
Ruby on Rails
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Johnathan/nova-trumbowyg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="100 105 500 500">
|
||||
<path fill="#FF974A" d="M556.8 344.2c-2.9-3.2-42.3-52.6-49.3-61-7-8.4-10.3-6.9-14.6-6.2s-54.2 9-60 10c-5.8 1-9.4 3.3-5.9 8.3 3.2 4.4 36 51 43.2 61.2l-130.5 31.3-103.6-173.5c-4.1-6.1-5-8.3-14.4-7.8-9.4.4-81.4 6.4-86.5 6.8-5.1.4-10.8 2.7-5.6 14.8 5.1 12.1 86.9 188.3 89.2 193.4 2.3 5.1 8.2 13.4 22.1 10.1 14.2-3.4 63.5-16.3 90.4-23.3 14.2 25.8 43.3 78 48.6 85.5 7.2 10 12.1 8.3 23.1 5 8.6-2.6 134.4-47.8 140.1-50.2 5.7-2.3 9.2-4 5.3-9.7-2.8-4.2-36-48.6-53.4-71.9 11.9-3.2 54.2-14.4 58.8-15.7 5.2-1.3 5.9-3.9 3-7.1zm-237.2 48.5c-1.6.3-74.6 17.8-78.5 18.7-3.9.9-3.9.4-4.3-.9-.4-1.3-86.9-179.6-88.1-181.8-1.2-2.2-1.1-4 0-4s69-6.1 71.4-6.2 2.1.4 3 1.9c0 0 95.7 165.2 97.4 168.1 1.7 3 .7 3.9-.9 4.2zm206.1 38.6c1.2 1.8 2.3 3-1.3 4.3-3.7 1.3-123.7 41.8-126 42.8-2.3 1-4.2 1.3-7.2-3s-42-71.9-42-71.9l127.2-33.1c3.2-1 4.2-1.7 6.2 1.5s41.9 57.6 43.1 59.4zm8.1-90.3c-2.9.6-49.6 12.2-49.6 12.2L446 300.8c-1.1-1.5-2-3 .7-3.4 2.7-.4 46.1-8.2 48-8.6 2-.4 3.7-1 6.1 2.3 2.4 3.3 35.4 45.1 36.7 46.7 1.3 1.6-.8 2.6-3.7 3.2z"></path>
|
||||
</svg>
|
||||
Laravel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/alexdw/trumbowygBundle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="60 47 80 80">
|
||||
<path fill="#FF974A" d="M124.389 49.119c-5.697.195-10.67 3.34-14.373 7.68-4.1 4.765-6.824 10.411-8.791 16.18-3.514-2.882-6.223-6.611-11.864-8.233-4.359-1.253-8.936-.737-13.146 2.399-1.992 1.489-3.367 3.738-4.02 5.859-1.692 5.498 1.778 10.396 3.354 12.151l3.447 3.691c.709.725 2.422 2.613 1.584 5.319-.9 2.947-4.451 4.85-8.092 3.731-1.627-.499-3.963-1.71-3.439-3.413.215-.699.715-1.225.984-1.821.244-.521.363-.907.438-1.14.665-2.169-.245-4.994-2.57-5.713-2.171-.666-4.391-.138-5.252 2.655-.977 3.174.543 8.935 8.681 11.441 9.535 2.935 17.597-2.259 18.742-9.026.721-4.239-1.195-7.392-4.701-11.441l-2.859-3.163c-1.73-1.729-2.324-4.677-.533-6.942 1.512-1.912 3.664-2.726 7.191-1.768 5.15 1.396 7.443 4.969 11.271 7.851-1.578 5.187-2.613 10.392-3.547 15.059l-.574 3.481c-2.736 14.352-4.826 22.235-10.256 26.76-1.094.779-2.658 1.943-5.014 2.027-1.238.037-1.637-.814-1.654-1.186-.027-.865.703-1.264 1.188-1.652.727-.396 1.824-1.053 1.748-3.156-.078-2.484-2.137-4.639-5.111-4.541-2.229.075-5.625 2.171-5.497 6.011.131 3.967 3.827 6.938 9.401 6.75 2.979-.102 9.633-1.312 16.188-9.105 7.631-8.935 9.766-19.175 11.372-26.671l1.793-9.897c.992.119 2.059.2 3.217.228 9.504.201 14.256-4.72 14.328-8.302.049-2.167-1.42-4.302-3.479-4.251-1.471.041-3.32 1.022-3.762 3.057-.436 1.995 3.023 3.798.32 5.553-1.92 1.242-5.361 2.116-10.209 1.407l.881-4.872c1.799-9.238 4.018-20.6 12.436-20.878.615-.029 2.857.026 2.91 1.512.014.493-.109.623-.689 1.757-.592.884-.814 1.64-.785 2.504.08 2.356 1.873 3.908 4.471 3.818 3.473-.116 4.469-3.496 4.412-5.233-.146-4.085-4.449-6.665-10.14-6.477z"></path>
|
||||
</svg>
|
||||
Symfony
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/artkost/yii2-trumbowyg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
|
||||
<path fill="#FF974A" d="M24.8 0c-3.3.1-7.3 4.4-5.9 8.4 1.4 3.9 2.4 6.8 2.6 11.2 3.5-3.6 6.7-7.5 6.9-12.1.1-3.7-1.6-6.5-3.6-7.5zm-8.7 16.4c-.5.9-1.1 1.9-2 3-1.8 2.3-3.6 6.1-3 10.5 7.3-.8 9.6-6.5 9.8-9.6-1.3-2.2-3.8-3.5-4.8-3.9zM1.3 2.8c-.3 3.5 1.2 8.6 7 10.3 2.5.8 4.2 1.2 6 1.9 2.7 1 4.9 2.3 6.6 4.6-.3-3.9-1.9-8.3-4.3-11.8-3.5-5-9.6-7.4-15.3-5z"></path>
|
||||
</svg>
|
||||
Yii 2 widget
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="section wrapper">
|
||||
<h2 class="section-title" id="donate">Buy me some beers</h2>
|
||||
|
||||
<div class="donate-container">
|
||||
<div class="donate-description">
|
||||
<p>
|
||||
Trumbowyg is an MIT-licensed open source project and completely free to use.
|
||||
</p>
|
||||
<p>
|
||||
However, the amount of effort needed to maintain and develop new features for the project is not sustainable
|
||||
without proper financial backing.
|
||||
You can support its ongoing development by being a backer or a sponsor on
|
||||
<a href="https://www.patreon.com/alexandredemode">Trumbowyg Patreon campaign</a>
|
||||
(recurring, with perks for different tiers), and get your company logo here.
|
||||
</p>
|
||||
<p>
|
||||
Also, you can make a <a href="https://www.paypal.me/demodealexandre/20eur">one time donation via PayPal</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="donate-footer">
|
||||
<a href="https://www.patreon.com/alexandredemode" class="button button-ghost">Be a sponsor on Patreon</a>
|
||||
<a href="https://www.paypal.me/demodealexandre/20eur" class="button button-secondary">Donate via PayPal</a>
|
||||
</div>
|
||||
|
||||
<img src="img/beer.svg" alt="" class="donate-beer">
|
||||
</div>
|
||||
|
||||
<div class="sponsors-container">
|
||||
<p class="section-subtitle">Sponsored by</p>
|
||||
|
||||
<a href="https://avot.nl/?ref=trumbowyg">
|
||||
<img src="https://rawcdn.githack.com/Alex-D/Trumbowyg/develop/sponsors/avot.svg" alt="avot®" width="200px"/>
|
||||
</a>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<a href="https://socialoptic.com/?ref=trumbowyg">
|
||||
<img src="https://rawcdn.githack.com/Alex-D/Trumbowyg/develop/sponsors/socialoptic.png" alt="SocialOptic" width="150px"/>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="wrapper">
|
||||
<span class="footer-text">
|
||||
Made with <span class="hearts">♥</span> by Alex-D
|
||||
</span>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<a class="footer-link" href="http://alex-d.fr/" title="Discover the author's website">
|
||||
Website
|
||||
</a>
|
||||
<a class="footer-link" href="https://github.com/Alex-D" title="Alex-D's GitHub profile">
|
||||
GitHub
|
||||
</a>
|
||||
<a class="footer-link" href="https://twitter.com/AlexandreDemode" title="Alex-D's Twitter">
|
||||
Twitter
|
||||
</a>
|
||||
<a class="footer-link" href="https://www.facebook.com/Alex.D.fr" title="Alex-D's Facebook page">
|
||||
Facebook
|
||||
</a>
|
||||
<a class="footer-link" href="https://soundcloud.com/alexandre-demode"
|
||||
title="Listen Alex-D's compositions on SoundCloud">
|
||||
SoundCloud
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/trumbowyg.min.js"></script>
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/base64/trumbowyg.base64.min.js" defer></script>
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/colors/trumbowyg.colors.min.js" defer></script>
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/giphy/trumbowyg.giphy.min.js" defer></script>
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/noembed/trumbowyg.noembed.min.js" defer></script>
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/pasteimage/trumbowyg.pasteimage.min.js" defer></script>
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/preformatted/trumbowyg.preformatted.min.js" defer></script>
|
||||
<script src="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/upload/trumbowyg.upload.min.js" defer></script>
|
||||
|
||||
<script src="js/vendor/highlight.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/colors/ui/trumbowyg.colors.min.css">
|
||||
<link rel="stylesheet" href="//rawcdn.githack.com/Alex-D/Trumbowyg/v2.25.0/dist/plugins/giphy/ui/trumbowyg.giphy.min.css">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "trumbowyg-github-page",
|
||||
"title": "Trumbowyg GitHub Page",
|
||||
"description": "GitHub page of Trumbowyg",
|
||||
"homepage": "http://alex-d.github.io/Trumbowyg",
|
||||
"private": true,
|
||||
"author": {
|
||||
"name": "Alexandre Demode (Alex-D)",
|
||||
"email": "contact@alex-d.fr",
|
||||
"url": "http://alex-d.fr"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Alex-D/Trumbowyg.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/Alex-D/Trumbowyg/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"gulp": "3.9.1",
|
||||
"gulp-autoprefixer": "6.0.0",
|
||||
"gulp-clean-css": "3.7.0",
|
||||
"gulp-livereload": "4.0.1",
|
||||
"gulp-load-plugins": "1.5.0",
|
||||
"gulp-sass": "4.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "gulp",
|
||||
"build": "gulp build",
|
||||
"test": "gulp test"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# robotstxt.org/
|
||||
|
||||
User-agent: *
|
||||
@@ -0,0 +1,246 @@
|
||||
@import "variables";
|
||||
|
||||
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
img,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $font;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
code.console {
|
||||
background: $text-color;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
.note {
|
||||
color: #888;
|
||||
padding: 3px 0 3px 15px;
|
||||
border-left: 3px solid $primary-color-light;
|
||||
margin-right: 30px;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $primary-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
hr.clearfix {
|
||||
display: block;
|
||||
border: none;
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
table {
|
||||
margin: 30px auto;
|
||||
text-align: left;
|
||||
|
||||
thead {
|
||||
background: #fff;
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
&:nth-child(2n){
|
||||
background: #fcfcfc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
.ir a:after,
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 0.5cm;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
@import "variables";
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 250px;
|
||||
border: 2px solid transparent;
|
||||
margin: 0 auto;
|
||||
padding: 23px 30px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
border-radius: 50px;
|
||||
text-align: center;
|
||||
transition: color $transition-duration, background-color $transition-duration;
|
||||
|
||||
&-primary {
|
||||
background: $primary-color;
|
||||
}
|
||||
&-secondary {
|
||||
background: $secondary-color;
|
||||
}
|
||||
&-ghost {
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.button:hover,
|
||||
.button:focus {
|
||||
background: #fff;
|
||||
color: $primary-color;
|
||||
outline: none;
|
||||
}
|
||||
@@ -0,0 +1,471 @@
|
||||
@import "variables";
|
||||
|
||||
$added-color: #5ecb0e;
|
||||
$deprecated-color: #ff9a4d;
|
||||
|
||||
$sidebar-width: 22%;
|
||||
$beer-height: 70px;
|
||||
|
||||
.documentation-body {
|
||||
background: $grey;
|
||||
display: flex;
|
||||
|
||||
.main {
|
||||
padding: 0 60px;
|
||||
height: 100vh;
|
||||
width: 100% - $sidebar-width;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main-demos {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: $grey;
|
||||
}
|
||||
}
|
||||
|
||||
.main-demo-inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding: 50px 0 0;
|
||||
}
|
||||
h3 {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
}
|
||||
h4 {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
p,
|
||||
dd,
|
||||
ul {
|
||||
code {
|
||||
color: #616870;
|
||||
background: #dfe5eb;
|
||||
padding: 0 5px;
|
||||
border: 1px solid #d0d9e1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
code.type {
|
||||
padding: 0 3px;
|
||||
color: $primary-color-dark;
|
||||
|
||||
&::before {
|
||||
content: "<";
|
||||
}
|
||||
&::after {
|
||||
content: ">";
|
||||
}
|
||||
}
|
||||
|
||||
.button.button-demo {
|
||||
border-color: rgba($secondary-color, 0.6);
|
||||
color: $secondary-color;
|
||||
width: auto;
|
||||
padding: 10px 30px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
border-color: $secondary-color;
|
||||
background: $secondary-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 17px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: $grey;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cfd7de;
|
||||
border: 2px solid $grey;
|
||||
|
||||
&:hover {
|
||||
background: #616870;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-documentation {
|
||||
margin-top: 50px;
|
||||
|
||||
.documentation-logo-link {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
max-width: 350px;
|
||||
|
||||
.documentation-logo {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.documentation-title {
|
||||
text-align: center;
|
||||
font-family: $panton;
|
||||
font-weight: 100;
|
||||
line-height: 1;
|
||||
|
||||
@media (max-width: 1290px) {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
}
|
||||
.documentation-menu {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
background: $secondary-color;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 20px 5px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1550px) {
|
||||
padding: 5px 7%;
|
||||
|
||||
a {
|
||||
width: 48%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.documentation-menu-dot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
color: $white;
|
||||
background: $primary-color linear-gradient(to bottom left, $primary-color, $primary-color-light);
|
||||
width: $sidebar-width;
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $primary-color-light;
|
||||
border: 1px solid $primary-color-light;
|
||||
border-right: none;
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: $beer-height;
|
||||
width: calc(100% - 17px);
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, rgba($primary-color-light, 0), $primary-color-light);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: calc(100vh - #{$beer-height});
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
transition: color $transition-duration, text-indent $transition-duration;
|
||||
}
|
||||
|
||||
.documentation-summary {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
margin-bottom: 100px;
|
||||
|
||||
> ul {
|
||||
max-width: 340px;
|
||||
margin: 0 auto;
|
||||
padding: 0 30px;
|
||||
|
||||
a,
|
||||
.documentation-summary-title {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> li {
|
||||
margin-top: 30px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
> a,
|
||||
.documentation-summary-title {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
> a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
ul li a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-color-dark;
|
||||
text-indent: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documentation-sidebar-beer {
|
||||
position: fixed;
|
||||
width: $sidebar-width;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $white;
|
||||
height: $beer-height;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: $beer-height;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 10px 17px 0 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-top: 1px solid #e9eef3;
|
||||
color: #9ca4ac;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.beer-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1700px) {
|
||||
.beer-icon {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: calc((100% - 236px) / 2);
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.beer-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 236px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1290px) {
|
||||
.beer-label {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 7px 0 0 15px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.added-feature,
|
||||
.deprecated-feature {
|
||||
display: inline-block;
|
||||
padding: 3px 13px;
|
||||
margin: 0;
|
||||
color: $white;
|
||||
font-size: 14px;
|
||||
border-radius: 50px;
|
||||
transform: translateX(10px) translateY(-4px);
|
||||
}
|
||||
|
||||
.added-feature {
|
||||
background: $added-color;
|
||||
}
|
||||
|
||||
.deprecated-feature {
|
||||
background: $deprecated-color;
|
||||
}
|
||||
|
||||
.deprecated-info {
|
||||
padding: 7px 15px;
|
||||
border-radius: 2px;
|
||||
background: #f2dfc1;
|
||||
border: 1px solid $deprecated-color;
|
||||
|
||||
a {
|
||||
color: $deprecated-color;
|
||||
}
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
background: $added-color;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.note .version-tag {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.feature {
|
||||
position: relative;
|
||||
padding-bottom: 60px;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 40%;
|
||||
height: 0;
|
||||
border-bottom: 1px solid $primary-color-light;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
h3 {
|
||||
position: relative;
|
||||
padding-top: 50px;
|
||||
margin-left: -15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title-link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 53px;
|
||||
left: -45px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
transition: opacity $transition-duration, background $transition-duration, color $transition-duration;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $white;
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $white;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.title-link {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.trumbowyg-box,
|
||||
.trumbowyg-editor {
|
||||
margin: 24px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sample-data {
|
||||
background: $white;
|
||||
padding: 25px;
|
||||
|
||||
h4 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 5px 7px;
|
||||
color: #616870;
|
||||
background: #dfe5eb;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
dt {
|
||||
display: inline-block;
|
||||
color: #616870;
|
||||
background: #dfe5eb;
|
||||
padding: 0 5px;
|
||||
border: 1px solid #d0d9e1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
dd {
|
||||
padding: 5px 0 15px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@import "variables";
|
||||
|
||||
.donate-container {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
.donate-description {
|
||||
width: 100%;
|
||||
padding: 30px 50px 50px;
|
||||
background: $grey;
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
.donate-footer {
|
||||
text-align: center;
|
||||
padding: 50px 0;
|
||||
background: $primary-color linear-gradient(to bottom left, $primary-color, $primary-color-light);
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
.donate-beer {
|
||||
position: absolute;
|
||||
left: -190px;
|
||||
bottom: -30px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background: $white;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sponsors-container {
|
||||
margin: 150px 0 0;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// Panton Light
|
||||
@font-face {
|
||||
font-family: 'Panton';
|
||||
src: url('../font/panton.eot');
|
||||
src: url('../font/panton.eot?#iefix') format('embedded-opentype'),
|
||||
url('../font/panton.woff2') format('woff2'),
|
||||
url('../font/panton.woff') format('woff'),
|
||||
url('../font/panton.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@import "variables";
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
background: linear-gradient(to bottom left, $primary-color, $primary-color-light);
|
||||
clear: both;
|
||||
|
||||
.footer-text,
|
||||
.footer-link {
|
||||
display: inline-block;
|
||||
padding: 40px;
|
||||
}
|
||||
.footer-text {
|
||||
padding-bottom: 0;
|
||||
|
||||
.hearts {
|
||||
font-size: 18px;
|
||||
color: $primary-color-dark;
|
||||
}
|
||||
}
|
||||
.footer-link {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
transition: color 0.15s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
@import "variables";
|
||||
|
||||
.installation-first-step {
|
||||
height: 400px;
|
||||
color: $text-color;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
margin: 20px 0 50px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
|
||||
code {
|
||||
display: block;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.installation-download,
|
||||
.installation-package-managers {
|
||||
width: 48%;
|
||||
float: left;
|
||||
}
|
||||
.installation-col-title {
|
||||
font-size: 22px;
|
||||
padding: 30px 0;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
color: $text-color;
|
||||
border-color: rgba(0, 0, 0, 0.07);
|
||||
background-color: transparent;
|
||||
box-shadow: 0 0 50px rgba(0, 0, 0, 0.03);
|
||||
transition: background-color 150ms, box-shadow 150ms, color 150ms;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
background-color: $primary-color;
|
||||
box-shadow: 0 0 50px rgba($primary-color, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.installation-or {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
width: 4%;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
margin: 140px 0 20px;
|
||||
border-radius: 50px;
|
||||
z-index: 0;
|
||||
}
|
||||
.installation-or::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
min-width: 45px;
|
||||
min-height: 45px;
|
||||
background: $white;
|
||||
border-radius: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.installation-package-managers {
|
||||
font-size: 18px;
|
||||
|
||||
code {
|
||||
padding-top: 5px;
|
||||
line-height: 1.6;
|
||||
|
||||
& + code {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.installation-cdn {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
|
||||
code {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,358 @@
|
||||
@import "variables";
|
||||
|
||||
.header-landing {
|
||||
position: relative;
|
||||
background: $primary-color linear-gradient(to bottom left, $primary-color, $primary-color-light);
|
||||
text-align: center;
|
||||
color: $white;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
float: right;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 25px 40px 0;
|
||||
font-weight: 400;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
float: right;
|
||||
margin-right: 30px;
|
||||
|
||||
&:first-child {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $primary-color-dark;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
transition: color $transition-duration;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.view-on-github {
|
||||
transform: translateY(-11px);
|
||||
|
||||
svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
fill: currentColor;
|
||||
margin-right: 10px;
|
||||
vertical-align: baseline;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
.star {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo-container {
|
||||
margin: 0 auto;
|
||||
padding-top: calc(80px + 4%);
|
||||
text-align: center;
|
||||
|
||||
.header-logo-h1 {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 1000px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
margin-right: -3%;
|
||||
width: 1000px;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 28px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-description {
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.header-install {
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#demonstration {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 80px;
|
||||
|
||||
.trumbowyg-editor {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
.trumbowyg-editor,
|
||||
.trumbowyg-textarea {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#demonstration .trumbowyg:not(.trumbowyg-fullscreen),
|
||||
#trumbowyg-demo:not(.trumbowyg-textarea) {
|
||||
display: block;
|
||||
margin: -150px auto 0;
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
max-width: 900px;
|
||||
background: $white;
|
||||
box-shadow: 0 0 27px rgba(0, 0, 0, 0.03);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#demonstration .trumbowyg {
|
||||
font-size: 16px;
|
||||
line-height: 2;
|
||||
|
||||
p {
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
button {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
#trumbowyg-demo:not(.trumbowyg-textarea) {
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbdfe0;
|
||||
}
|
||||
|
||||
.demo-switcher {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
border-radius: 50px;
|
||||
border: 1px solid #dbdfe0;
|
||||
background: $white;
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: 50%;
|
||||
background: none;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
transition: color $transition-duration, text-indent $transition-duration;
|
||||
|
||||
&:first-child {
|
||||
text-indent: 5px;
|
||||
}
|
||||
&:last-child {
|
||||
text-indent: -5px;
|
||||
}
|
||||
|
||||
&.current {
|
||||
text-indent: 0;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border-radius: 50px;
|
||||
background: $primary-color;
|
||||
transition: margin-left $transition-duration;
|
||||
}
|
||||
&.current-plugins {
|
||||
&::after {
|
||||
margin-left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo-animation {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: -30px;
|
||||
left: 91.5%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
fill: $white;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.header-logo-animation-strong {
|
||||
animation: headerLogoStrong 1s linear infinite;
|
||||
animation-delay: -0.85s;
|
||||
}
|
||||
|
||||
.header-logo-animation-p {
|
||||
animation: headerLogoP 1s linear infinite;
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
|
||||
.header-logo-animation-link {
|
||||
animation: headerLogoLink 1s linear infinite;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
|
||||
.header-logo-animation-blockquote {
|
||||
animation: headerLogoBlockquote 1s linear infinite;
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
|
||||
.header-logo-animation-view-html {
|
||||
animation: headerLogoViewHtml 1s linear infinite;
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headerLogoStrong {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(-30px) translateY(70px);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(15px) translateY(80px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(35px) translateY(75px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(40px) translateY(60px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(35px) translateY(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(10px) translateY(0) scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headerLogoP {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(-30px) translateY(60px);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(10px) translateY(60px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(20px) translateY(60px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(25px) translateY(55px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(32px) translateY(40px);
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(35px) translateY(20px) scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headerLogoLink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(-30px) translateY(90px);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(15px) translateY(100px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(25px) translateY(95px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(30px) translateY(80px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(30px) translateY(70px);
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(10px) translateY(0) scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headerLogoBlockquote {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(-30px) translateY(55px);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(5px) translateY(50px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(10px) translateY(45px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(13px) translateY(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(10px) translateY(10px) scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headerLogoViewHtml {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(-30px) translateY(90px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(30px) translateY(105px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(40px) translateY(100px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateX(50px) translateY(90px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(70px) translateY(70px) scale(0.5);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0 1.5em;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.diff .hljs-header,
|
||||
.hljs-javadoc {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.css .rule .hljs-keyword,
|
||||
.hljs-winutils,
|
||||
.nginx .hljs-title,
|
||||
.hljs-subst,
|
||||
.hljs-request,
|
||||
.hljs-status {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-hexcolor,
|
||||
.ruby .hljs-constant {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-phpdoc,
|
||||
.hljs-dartdoc,
|
||||
.tex .hljs-formula {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-id,
|
||||
.scss .hljs-preprocessor {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-list .hljs-keyword,
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-type,
|
||||
.vhdl .hljs-literal,
|
||||
.tex .hljs-command {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-tag .hljs-title,
|
||||
.hljs-rules .hljs-property,
|
||||
.django .hljs-tag .hljs-keyword {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-variable,
|
||||
.lisp .hljs-body {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-regexp {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.ruby .hljs-symbol .hljs-string,
|
||||
.lisp .hljs-keyword,
|
||||
.clojure .hljs-keyword,
|
||||
.scheme .hljs-keyword,
|
||||
.tex .hljs-special,
|
||||
.hljs-prompt {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma,
|
||||
.hljs-pi,
|
||||
.hljs-doctype,
|
||||
.hljs-shebang,
|
||||
.hljs-cdata {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.diff .hljs-change {
|
||||
background: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-chunk {
|
||||
color: #aaa;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@import "variables";
|
||||
|
||||
.section-introduction {
|
||||
margin-top: 50px;
|
||||
padding-bottom: 70px;
|
||||
|
||||
.introduction-section {
|
||||
height: 300px;
|
||||
}
|
||||
.introduction-section-col {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 30%;
|
||||
margin-right: 5%;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.introduction-section-col-title {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
padding-top: 50px;
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
margin-right: 8px;
|
||||
transform: translateY(-3px);
|
||||
|
||||
&.illu-lightweight {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.introduction-section-col-description {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
@import "variables";
|
||||
|
||||
.languages {
|
||||
p {
|
||||
text-align: center;
|
||||
margin: 0 0 5px;
|
||||
font-size: 18px;
|
||||
color: $white;
|
||||
|
||||
a {
|
||||
color: $primary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.languages-columns {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.col-globe {
|
||||
flex: 1.07;
|
||||
margin-top: 30px;
|
||||
|
||||
.globe {
|
||||
width: 90%;
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
}
|
||||
|
||||
.col-list {
|
||||
flex: 0.93;
|
||||
padding-top: 80px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
|
||||
.continent-name {
|
||||
color: $white;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: 6px solid transparent;
|
||||
border-left-color: $white;
|
||||
transform: translateX(5px) translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
li[style] {
|
||||
.continent-name {
|
||||
&::after {
|
||||
border-left-color: transparent;
|
||||
border-top-color: $white;
|
||||
transform: translateX(2px) translateY(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lang-code {
|
||||
display: inline-block;
|
||||
min-width: 30px;
|
||||
padding-right: 8px;
|
||||
opacity: 0.6;
|
||||
transition: opacity $transition-duration;
|
||||
}
|
||||
.lang-name {
|
||||
transition: padding-left $transition-duration;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color-dark;
|
||||
transition: color $transition-duration;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
|
||||
.lang-code {
|
||||
opacity: 1;
|
||||
}
|
||||
.lang-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
padding-right: 50px;
|
||||
|
||||
> li {
|
||||
overflow: hidden;
|
||||
transition: height $transition-duration linear;
|
||||
|
||||
&[data-height] {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 15px 0;
|
||||
columns: 2;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,527 @@
|
||||
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
||||
* Known issue: no IE 6 support.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||
* `em` units.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `font-family` inconsistency between `textarea` and other form
|
||||
* elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins handled incorrectly in IE 6/7.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address font sizes and margins set differently in IE 6/7.
|
||||
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
||||
* and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
* Known issue: no IE 6/7 normalization.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 6/7/8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address CSS quotes not supported in IE 6/7.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `quotes` property not supported in Safari 4.
|
||||
*/
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address paddings set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct list images handled incorrectly in IE 7.
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
||||
* 2. Improve image quality when scaled in IE 7.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited in IE 6/7/8/9.
|
||||
* 2. Correct text not wrapping in Firefox 3.
|
||||
* 3. Correct alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font size not being inherited in all browsers.
|
||||
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improve appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to content-box in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 3. Remove excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@import "variables";
|
||||
|
||||
.plugins-packages {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.col-plugins {
|
||||
flex: 1.07;
|
||||
}
|
||||
.col-packages {
|
||||
flex: 0.93;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: left;
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 100px 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
columns: 2;
|
||||
margin: 50px 0 0;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
color: $text-color;
|
||||
transition: color $transition-duration, transform $transition-duration;
|
||||
line-height: 1.8;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
display: inline-block;
|
||||
color: $primary-color;
|
||||
fill: $primary-color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@import "variables";
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
padding-bottom: 100px;
|
||||
|
||||
&-primary {
|
||||
color: $primary-color-dark;
|
||||
background: linear-gradient(to bottom left, $primary-color, $primary-color-light);
|
||||
|
||||
.section-title {
|
||||
color: $white;
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&-secondary {
|
||||
background: $grey;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
color: $text-color;
|
||||
font-size: 28px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-family: $panton;
|
||||
font-size: 100px;
|
||||
color: $primary-color;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.section-subtitle {
|
||||
margin-top: -22px;
|
||||
font-size: 23px;
|
||||
color: $text-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
$primary-color: #ff974a;
|
||||
$primary-color-light: #ffb864;
|
||||
$primary-color-dark: #b65207;
|
||||
$secondary-color: #f48d40;
|
||||
$text-color: #392813;
|
||||
$grey: #f4f7fa;
|
||||
$white: #fff;
|
||||
|
||||
$panton: "Panton", sans-serif;
|
||||
$font: "Open Sans", sans-serif;
|
||||
|
||||
$radius: 6px;
|
||||
|
||||
$transition-duration: 150ms;
|
||||
@@ -0,0 +1,16 @@
|
||||
@import "normalize";
|
||||
@import "variables";
|
||||
@import "font";
|
||||
@import "base";
|
||||
@import "buttons";
|
||||
@import "header";
|
||||
@import "section";
|
||||
@import "introduction";
|
||||
@import "get-started";
|
||||
@import "languages";
|
||||
@import "plugins-packages";
|
||||
@import "donate";
|
||||
@import "footer";
|
||||
|
||||
@import "highlightjs-github";
|
||||
@import "documentation";
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user