clemens/praxis-creutzburg-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inital

Browse Source
This commit is contained in:
Clemens Creutzburg
2026-03-20 17:13:38 +01:00
parent 4c84735b75
commit c043ee9a52
1152 changed files with 317560 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/trumbowyg/docs/demos/plugins/allowtagsfrompaste.html
+97
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/base64.html
+123
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/cleanpaste.html
+66
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/colors.html
+187
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/emoji.html
+71
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/fontfamily.html
+103
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/fontsize.html
+104
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/giphy.html
+78
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/highlight.html
+80
View File
@@ -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">
&lt;!-- Import prismjs stylesheet -->
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism.css">
&lt;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">
&lt;!-- Import jQuery -->
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/script>
&lt;!-- Import prismjs -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js">&lt;/script>
&lt;!-- Import prismjs line highlight plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-highlight/prism-line-highlight.min.js">&lt;/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>
admin/trumbowyg/docs/demos/plugins/history.html
+76
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/indent.html
+76
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/insertaudio.html
+76
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/lineheight.html
+103
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/mathml.html
+93
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/script>
&lt;!-- Import MathJax -->
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">&lt;/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>
admin/trumbowyg/docs/demos/plugins/mention.html
+92
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/noembed.html
+126
View File
@@ -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&amp;url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F342548257&amp;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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/pasteembed.html
+67
View File
@@ -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&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/pasteimage.html
+65
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/preformatted.html
+83
View File
@@ -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>&lt;pre>&lt;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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/resizimg.html
+80
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.4.0.min.js">&lt;\/script>')&lt;/script>
&lt;!-- Import dependency for Resizimg (tested with version 0.35). For a production setup, follow install instructions here: https://github.com/RickStrahl/jquery-resizable -->
&lt;script src="//rawcdn.githack.com/RickStrahl/jquery-resizable/0.35/dist/jquery-resizable.min.js">&lt;/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>
admin/trumbowyg/docs/demos/plugins/ruby.html
+76
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/specialchars.html
+105
View File
@@ -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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/table.html
+77
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/template.html
+88
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</p>
</div>
<h3>The code</h3>
<pre><code class="js-code-to-eval javascript">
$('#editor')
.trumbowyg({
btns: ['template'],
plugins: {
templates: [
{
name: 'Template 1',
html: '&lt;p&gt;I am a template!&lt;/p&gt;'
},
{
name: 'Template 2',
html: '&lt;p&gt;I am a different template!&lt;/p&gt;'
}
]
}
});
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>
admin/trumbowyg/docs/demos/plugins/upload.html
+144
View File
@@ -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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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: &quot;Neither is there
anyone who loves grief itself since it is grief and thus wants to obtain it&quot;).
</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">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/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>