Inital
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user