Showing preview only (1,016K chars total). Download the full file or copy to clipboard to get everything.
Repository: Alex-D/Trumbowyg
Branch: develop
Commit: c4ccb3fc1aee
Files: 166
Total size: 964.7 KB
Directory structure:
gitextract_ml_8nko7/
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE.md
│ └── workflows/
│ ├── lint.yml
│ └── website.yml
├── .gitignore
├── .jshintrc
├── .npmignore
├── BACKERS.md
├── CONTRIBUTORS.md
├── LICENSE
├── README.md
├── bower.json
├── docs/
│ ├── .gitignore
│ ├── .jshintrc
│ ├── css/
│ │ └── main.css
│ ├── demos/
│ │ ├── core/
│ │ │ ├── dark-theme.html
│ │ │ ├── default.html
│ │ │ └── simple.html
│ │ ├── index.html
│ │ ├── js/
│ │ │ ├── highlight.js
│ │ │ ├── loader.js
│ │ │ └── runExampleCode.js
│ │ └── plugins/
│ │ ├── allowtagsfrompaste.html
│ │ ├── base64.html
│ │ ├── cleanpaste.html
│ │ ├── colors.html
│ │ ├── emoji.html
│ │ ├── fontfamily.html
│ │ ├── fontsize.html
│ │ ├── giphy.html
│ │ ├── highlight.html
│ │ ├── history.html
│ │ ├── indent.html
│ │ ├── insertaudio.html
│ │ ├── lineheight.html
│ │ ├── mathml.html
│ │ ├── mention.html
│ │ ├── noembed.html
│ │ ├── pasteembed.html
│ │ ├── pasteimage.html
│ │ ├── preformatted.html
│ │ ├── resizimg.html
│ │ ├── ruby.html
│ │ ├── specialchars.html
│ │ ├── speechrecognition.html
│ │ ├── table.html
│ │ ├── template.html
│ │ ├── tenor.html
│ │ └── upload.html
│ ├── documentation/
│ │ ├── core/
│ │ │ └── index.html
│ │ ├── index.html
│ │ └── plugins/
│ │ └── index.html
│ ├── gulpfile.mjs
│ ├── humans.txt
│ ├── index.html
│ ├── js/
│ │ ├── main.js
│ │ └── vendor/
│ │ └── highlight.js
│ ├── package.json
│ ├── robots.txt
│ └── scss/
│ ├── _base.scss
│ ├── _buttons.scss
│ ├── _documentation.scss
│ ├── _donate.scss
│ ├── _font.scss
│ ├── _footer.scss
│ ├── _get-started.scss
│ ├── _header.scss
│ ├── _highlightjs-github.scss
│ ├── _introduction.scss
│ ├── _languages.scss
│ ├── _normalize.scss
│ ├── _plugins-packages.scss
│ ├── _section.scss
│ ├── _variables.scss
│ └── main.scss
├── gulpfile.mjs
├── index.html
├── package.json
├── plugins/
│ ├── allowtagsfrompaste/
│ │ └── trumbowyg.allowtagsfrompaste.js
│ ├── base64/
│ │ └── trumbowyg.base64.js
│ ├── cleanpaste/
│ │ └── trumbowyg.cleanpaste.js
│ ├── colors/
│ │ ├── trumbowyg.colors.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.colors.scss
│ ├── emoji/
│ │ ├── trumbowyg.emoji.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.emoji.scss
│ ├── fontfamily/
│ │ └── trumbowyg.fontfamily.js
│ ├── fontsize/
│ │ └── trumbowyg.fontsize.js
│ ├── giphy/
│ │ ├── trumbowyg.giphy.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.giphy.scss
│ ├── highlight/
│ │ ├── trumbowyg.highlight.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.highlight.scss
│ ├── history/
│ │ └── trumbowyg.history.js
│ ├── indent/
│ │ └── trumbowyg.indent.js
│ ├── insertaudio/
│ │ └── trumbowyg.insertaudio.js
│ ├── lineheight/
│ │ └── trumbowyg.lineheight.js
│ ├── mathml/
│ │ ├── trumbowyg.mathml.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.mathml.scss
│ ├── mention/
│ │ ├── trumbowyg.mention.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.mention.scss
│ ├── noembed/
│ │ └── trumbowyg.noembed.js
│ ├── pasteembed/
│ │ └── trumbowyg.pasteembed.js
│ ├── pasteimage/
│ │ └── trumbowyg.pasteimage.js
│ ├── preformatted/
│ │ └── trumbowyg.preformatted.js
│ ├── resizimg/
│ │ └── trumbowyg.resizimg.js
│ ├── ruby/
│ │ └── trumbowyg.ruby.js
│ ├── specialchars/
│ │ ├── trumbowyg.specialchars.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.specialchars.scss
│ ├── speechrecognition/
│ │ └── trumbowyg.speechrecognition.js
│ ├── table/
│ │ ├── trumbowyg.table.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.table.scss
│ ├── template/
│ │ └── trumbowyg.template.js
│ ├── tenor/
│ │ ├── trumbowyg.tenor.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.tenor.scss
│ └── upload/
│ └── trumbowyg.upload.js
└── src/
├── langs/
│ ├── ar.js
│ ├── az.js
│ ├── bg.js
│ ├── bn.js
│ ├── by.js
│ ├── ca.js
│ ├── cs.js
│ ├── da.js
│ ├── de.js
│ ├── el.js
│ ├── en.js
│ ├── es.js
│ ├── es_ar.js
│ ├── et.js
│ ├── fa.js
│ ├── fi.js
│ ├── fr.js
│ ├── he.js
│ ├── hr.js
│ ├── hu.js
│ ├── id.js
│ ├── it.js
│ ├── ja.js
│ ├── ko.js
│ ├── lt.js
│ ├── mn.js
│ ├── my.js
│ ├── nb.js
│ ├── nl.js
│ ├── ph.js
│ ├── pl.js
│ ├── pt.js
│ ├── pt_br.js
│ ├── ro.js
│ ├── rs.js
│ ├── rs_latin.js
│ ├── ru.js
│ ├── sk.js
│ ├── sl.js
│ ├── sq.js
│ ├── sv.js
│ ├── th.js
│ ├── tr.js
│ ├── ua.js
│ ├── vi.js
│ ├── zh_cn.js
│ └── zh_tw.js
├── trumbowyg.js
└── ui/
└── sass/
└── trumbowyg.scss
================================================
FILE CONTENTS
================================================
================================================
FILE: .bowerrc
================================================
{
"directory": "bower_components/"
}
================================================
FILE: .editorconfig
================================================
# EditorConfig: https://EditorConfig.org
# Notepad++ Plugin: https://github.com/editorconfig/editorconfig-notepad-plus-plus
# Visual Studio Code Plugin: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[{*.json,*.yml,*.yaml,*.md}]
indent_size = 2
# Ignore paths
[{docs/css/**,docs/scss/_normalize.scss,**/vendor/**,dist/**}]
charset = unset
end_of_line = unset
insert_final_newline = unset
trim_trailing_whitespace = unset
indent_style = unset
indent_size = unset
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
# SCSS and JS files must always use LF for tools to work
*.js eol=lf
*.scss eol=lf
================================================
FILE: .github/FUNDING.yml
================================================
github: Alex-D
patreon: AlexandreDemode
custom: https://paypal.me/demodealexandre
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
<!--- Provide a general summary of the issue in the Title above -->
### Description
<!--
Provide relevant details according to the context:
- OS
- Browser + version
- Screen resolution
- ...
-->
### How to reproduce?
<!--
If relevant, provide a link to a live example based on: https://jsfiddle.net/AlexandreDemode/p7hb3x6u/
- Edit
- Ctrl + S
- Copy/Paste the URL here
-->
================================================
FILE: .github/workflows/lint.yml
================================================
name: Lint
on:
push:
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
- run: npm ci
- run: npm run lint
editorconfig:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: editorconfig-checker/action-editorconfig-checker@main
- run: editorconfig-checker
================================================
FILE: .github/workflows/website.yml
================================================
name: Deploy Website
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
- run: npm ci
- run: npm run build
working-directory: docs/
- uses: actions/upload-pages-artifact@v3
with:
path: docs/
deploy:
needs: build
# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
permissions:
pages: write # to deploy to Pages
id-token: write # to verify the deployment originates from an appropriate source
# Deploy to the github-pages environment
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
================================================
FILE: .gitignore
================================================
# Others
~$*
/.sass-cache
/uploaded-files
/node_modules
/bower_components
/dist
/src/ui/sass/_sprite*
/plugins/**/ui/sass/_sprite*
# We use npm: ignore yarn
yarn.lock
# Windows image file caches
Thumbs.db
# Folder config file
Desktop.ini
# Mac crap
.DS_Store
# IDEA
.idea
/nbproject
================================================
FILE: .jshintrc
================================================
{
"bitwise": true,
"camelcase": true,
"esnext": true,
"curly": true,
"eqeqeq": true,
"forin": true,
"indent": 4,
"latedef": false,
"newcap": false,
"noarg": true,
"noempty": true,
"plusplus": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"maxparams": 5,
"maxdepth": 5,
"maxstatements": 40,
"maxcomplexity": 20,
"maxlen": 1200,
"eqnull": true,
"browser": true,
"globals": {
"jQuery": false
}
}
================================================
FILE: .npmignore
================================================
Gulpfile.js
banner.jpg
bower.json
src
docs
bower_components
.gitattributes
.gitignore
.jshintrc
.github
.idea
.bowerrc
sponsors
BACKERS.md
CONTRIBUTORS.md
================================================
FILE: BACKERS.md
================================================
<h1 align="center">Sponsors & Backers</h1>
Trumbowyg is an MIT-licensed open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features for
the project is not sustainable without proper financial backing.
You can support it's ongoing development by being a backer or a sponsor:
- [Become a backer or sponsor on Patreon](https://www.patreon.com/alexandredemode)
- [One-time donation via PayPal](https://www.paypal.me/demodealexandre/20eur)
<h2 align="center">Gold sponsors</h2>
<p align="center">
<a href="https://avot.nl/?ref=trumbowyg">
<img src="https://rawcdn.githack.com/Alex-D/Trumbowyg/develop/sponsors/avot.svg" alt="avot®" width="200px"/>
</a>
</p>
<p align="center">
<a href="https://www.patreon.com/bePatron?c=1176005&rid=1940456">
Become a Sponsor
</a>
</p>
<h2 align="center">Silver sponsors</h2>
<p align="center">
<a href="https://socialoptic.com/?ref=trumbowyg">
<img src="https://rawcdn.githack.com/Alex-D/Trumbowyg/develop/sponsors/socialoptic.png" alt="SocialOptic" width="150px"/>
</a>
</p>
<p align="center">
<a href="https://www.patreon.com/bePatron?c=1176005&rid=1940456">
Become a Sponsor
</a>
</p>
<h2 align="center">Backers</h2>
- Johan Rosenson
- Integrious Ltd
<p align="center">
<a href="https://www.patreon.com/bePatron?c=1176005&rid=1940349">
Become a Backer
</a>
</p>
================================================
FILE: CONTRIBUTORS.md
================================================
# Contributors
Trumbowyg is the result of many people who made translations or the code better.
Special thanks to [Adrien Gervaix](https://dribbble.com/adriengervaix) for the Trumbowyg v2 icon set.
- Alex-D
- Steve Rackham
- Lawrence
- Ra100
- lizardK
- Ulrich Mayring
- Kirill Urgant
- VeeeneX
- Nicolas Pion
- Sven Dunemann
- Zane Chua
- freekpost
- Blufish Technologies
- Civil
- Danny Hiemstra
- Edwin Veldhuizen
- Florian
- Michael Holroyd
- Nicklas
- Nicolás Moncada
- Don Desroches
- Jan Svoboda
- Martin
- Max Seelig
- Stufingo
- Alexander van Eerd
- AragurDEV
- Davor Budimir
- Eduardo Russo
- Fathi Anshory
- Fyers
- Hirokazu Kutsu
- Justas Brazauskas
- Jérôme Steunou
- Manfred62
- Merianos Nikos
- Nikola Trifunovic
- Paul Pritchard
- Richard Kiewiet
- Stef Kariotidis
- Vijay Jagadeesan
- Vlad Radulescu
- Vladimir
- foo9
- g2010a
- hiendv
- jake johns
- matopeter
- ronan
- sinjuice
- Adam Balogh
- AdamHess
- Aleksandar Dimitrov
- Aleksandr-ru
- Alessio Dionisi
- Alex Gotardi
- Andreas Kohn
- Andrei
- Andrey Kogut
- Antoine Leblanc
- Anton Morozov
- Artur
- Benjamin Bourot
- Bennett
- Boylett
- Burak Erdem
- Burak Ozdemir
- Carlos Barros
- Chitoku
- Christian
- Christopher Kirk-Nielsen
- maxom
- Dariush Abbasi
- Delvallée
- Denis Jacquemin
- Elisha Witte
- Eric Radin
- Ersin Guvenc
- François Houlbrèque
- Freek Post
- Gabriel S. L
- Grafikart
- Henio Tierra
- Hunor Karamán
- Ian Mustafa
- John Pozy
- Jonathan Hedrén
- Jonathan del Strother
- JoongSeob Vito Kim
- Jorrit Schippers
- Karalkou
- Ken Cheung
- Kim Trolle Wadum
- Lars Boldt
- Leo Gono
- Leopard Ho
- MIRK0
- Marcin Wieprzkowicz
- Markus Spallek
- Matt Johnson
- Mattias Hagberg
- Mike Goodfellow
- Mike Richmond
- Mitja Šlenc
- Moisés Márquez
- Nathan Rosquist
- Nenad Novkovic
- Nikki Locke
- OBernard2
- Oguzhan Inan
- Oleg Berman
- Paweł Abramowicz
- Peter Dave Hello
- Petr Čech
- Philipp Palmtag
- Ramiro Varandas Jr
- Rezha Julio
- Ricardo Cardeña
- Roberto
- Rodrigo Boratto
- Sergey Golomedov
- Stéphane Lavergne
- TheGeekTortoise
- Tiago Alves
- TikiTDO
- Tim
- Timo Jarventausta
- Todd Graham
- Val
- Vietworm
- Vinzgore
- Wisse Jelgersma
- Zane J. Chua
- abomokhahmed
- adalenv
- akai
- basteyy
- brainfogz
- brentanalexander
- chadidi
- cleoo
- de Oliveira Prado
- dev.hibiki
- dominiczaq
- figroc
- gonatee
- joey91133
- jsejakobsen
- kingdido999
- loclamor
- luetge
- munzur
- naoh
- root
- slackwalker
- teppokoivula
- udidoron
- Игорь
- Михаил Гущин
- Олег Ильин
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2012-2016 Alexandre Demode (Alex-D)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="http://alex-d.github.io/Trumbowyg/"><img src="banner.jpg" alt="" /></a>
</p>
<p align="center">
<a href="https://bundlephobia.com/result?p=trumbowyg"><img src="https://img.shields.io/bundlephobia/minzip/trumbowyg.svg?style=for-the-badge" alt="Downloads" /></a>
<a href="https://www.npmjs.com/package/trumbowyg"><img src="https://img.shields.io/npm/dm/trumbowyg.svg?color=blue&label=npm%20downloads&style=for-the-badge" alt="Downloads" /></a>
<a href="https://github.com/Alex-D/Trumbowyg/blob/develop/LICENSE"><img src="https://img.shields.io/npm/l/trumbowyg.svg?color=blue&style=for-the-badge" alt="Licence" /></a>
<br>
<a href="https://www.npmjs.com/package/trumbowyg"><img src="https://img.shields.io/npm/v/trumbowyg.svg?color=blue&style=for-the-badge" alt="Version on npm" /></a>
<a href="https://cdnjs.com/libraries/Trumbowyg"><img src="https://img.shields.io/cdnjs/v/Trumbowyg.svg?color=blue&style=for-the-badge" alt="CDNJS" /></a>
<img src="https://img.shields.io/bower/v/trumbowyg.svg?color=blue&style=for-the-badge" alt="Version on bower" />
</p>
<h2 align="center">Supporting Trumbowyg</h2>
Trumbowyg is an MIT-licensed open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features for
the project is not sustainable without proper financial backing.
You can support its ongoing development by being a backer or a sponsor:
- [Become a backer or sponsor on Patreon](https://www.patreon.com/alexandredemode)
- [One-time donation via PayPal](https://www.paypal.me/demodealexandre/20eur)
<h3 align="center">Sponsors</h3>
<h4 align="center">Gold</h4>
<p align="center">
<a href="https://www.premirus.com/?ref=trumbowyg">Premirus Corporation</a>
</p>
<p align="center">
•••<br>
<a href="https://www.patreon.com/bePatron?c=1176005&rid=1940456">
Become a Sponsor
</a>
</p>
------------------------------------
## Introduction
Trumbowyg is a simple and lightweight WYSIWYG editor, weight only 30kB minified (10kB gzip) for faster page loading.
Visit presentation page: http://alex-d.github.io/Trumbowyg/
## Documentation
All you need to know about Trumbowyg is here:
- [Get started](https://alex-d.github.io/Trumbowyg/documentation/)
- [25+ Demos](https://alex-d.github.io/Trumbowyg/demos/)
- [45+ Supported languages](https://alex-d.github.io/Trumbowyg/#languages)
- [All Options explained](https://alex-d.github.io/Trumbowyg/documentation/#basic-options)
- [All existing Plugins](https://alex-d.github.io/Trumbowyg/documentation/plugins/)
- [Create your own Plugin](https://alex-d.github.io/Trumbowyg/documentation/plugins/#create-your-own)
## Contribution
You can contribute to Trumbowyg with translations in languages you know.
Thanks to `node` and `gulp`, you can improve core script, style or icons easily.
First, fork and clone the repository
```bash
cd Trumbowyg # go into the project's root directory
npm install # install development dependencies
npm run dev # watch mode
npm run build # to build the project
```
## Author
<table>
<tr width="100%">
<td align="center" width="100%">
<a href="https://github.com/Alex-D">
<img src="https://avatars2.githubusercontent.com/u/426843?s=150&v=4"><br>
@Alex-D
</a> <br>
<strong>Alexandre Demode</strong><br>
• • •<br>
<em>Latest release and announcements</em><br>
https://x.com/AlexandreDemode
</td>
</tr>
</table>
## License
This project is under [MIT license](LICENSE).
================================================
FILE: bower.json
================================================
{
"name": "trumbowyg",
"version": "2.28.0",
"homepage": "https://github.com/Alex-D/Trumbowyg",
"authors": [
{
"name": "Alexandre Demode (Alex-D)",
"email": "contact@alex-d.fr",
"homepage": "https://alex-d.fr"
}
],
"description": "A lightweight WYSIWYG editor",
"main": "dist/trumbowyg.js",
"keywords": [
"wysiwyg",
"editor",
"rich text",
"contenteditable",
"trumbowyg"
],
"license": "MIT",
"ignore": [
"**/.*",
"bower_components",
"node_modules",
"plugins",
"!dist/plugins",
"test",
"tests",
"src",
"docs",
"sponsors",
"banner.jpg",
"gulpfile.js",
"package.json"
],
"dependencies": {
"jquery": ">=1.8"
}
}
================================================
FILE: docs/.gitignore
================================================
/node_modules/
/bower_components
/dist
/src
/plugins
uploaded-files/
================================================
FILE: docs/.jshintrc
================================================
{
"bitwise": true,
"camelcase": true,
"esnext": true,
"curly": true,
"eqeqeq": true,
"forin": true,
"indent": 4,
"latedef": false,
"newcap": false,
"noarg": true,
"noempty": true,
"plusplus": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"maxparams": 5,
"maxdepth": 5,
"maxstatements": 40,
"maxcomplexity": 20,
"maxlen": 1200,
"eqnull": true,
"browser": true,
"node": true,
"globals": {
"jQuery": false,
"hljs": false
}
}
================================================
FILE: docs/css/main.css
================================================
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:"";content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Panton;src:url(../fonts/panton.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */button,html,input,select,textarea{color:#222}html{font-size:1em;line-height:1.4}body,html{background:#fff}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,img,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}body,button,input,select,textarea{font-family:"Open Sans",sans-serif;font-size:18px;font-weight:300}.wrapper{max-width:1200px;margin:0 auto;clear:both}.wrapper p:last-child{margin-bottom:0}.wrapper h4{font-size:30px}.wrapper code.console{background:#392813;color:#fff;font-size:16px;padding:3px 7px}.wrapper .note{display:table;color:#666;background:rgba(0,0,0,.02);padding:8px 12px;border-left:3px solid #ffb864;border-radius:8px;font-size:15px;-webkit-margin-before:.5em;margin-block-start:.5em;-webkit-margin-after:.5em;margin-block-end:.5em}.wrapper .note>:first-child{margin-top:6px}.wrapper .note>:last-child{margin-bottom:6px}.wrapper .note code{margin-left:2px;margin-right:2px}.section a{text-decoration:none;color:#ff974a}.section a:focus,.section a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-weight:300;margin:0;padding:0}hr.clearfix{display:block;border:none;background:0 0;margin:0;padding:0;height:0;clear:both}code,kbd,pre,samp{font-family:"JetBrains Mono",monospace;font-size:15px;line-height:1.5}:root{--tbw-cell-vertical-padding:4px;--tbw-cell-horizontal-padding:8px;--tbw-cell-line-height:1.5em}table{margin-bottom:var(--tbw-cell-line-height)}td,th{height:calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));min-width:calc(var(--tbw-cell-horizontal-padding) * 2);padding:var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);border:1px solid #e7eaec}thead{background:#fff}.button{display:inline-block;position:relative;width:250px;border:2px solid transparent;margin:0 auto;padding:23px 30px;color:#fff;font-weight:400;font-size:16px;line-height:1.2;text-decoration:none;border-radius:50px;text-align:center;-webkit-transition:color 150ms,background-color 150ms;-o-transition:color 150ms,background-color 150ms;transition:color 150ms,background-color 150ms}.button-primary{background:#ff974a}.button-secondary{background:#f48d40}.button-ghost{border-color:rgba(255,255,255,.4)}.button:not(:last-child){margin-right:20px}.button:focus,.button:hover{background:#fff;color:#ff974a;outline:0}.header-landing{position:relative;background:#ff974a -webkit-gradient(linear,right top,left bottom,from(#ff974a),to(#ffb864));background:#ff974a -webkit-linear-gradient(top right,#ff974a,#ffb864);background:#ff974a -o-linear-gradient(top right,#ff974a,#ffb864);background:#ff974a linear-gradient(to bottom left,#ff974a,#ffb864);text-align:center;color:#fff;padding-bottom:200px}.header-nav{float:right;width:100%;margin:0;padding:25px 40px 0;font-weight:400}.header-nav li{list-style:none;float:right;margin-right:30px}.header-nav li:first-child{float:left}.header-nav li:nth-child(2){margin-right:0}.header-nav li a{display:block;text-decoration:none;color:#b65207;font-size:16px;padding:10px 0;-webkit-transition:color 150ms;-o-transition:color 150ms;transition:color 150ms}.header-nav li a:hover{color:#fff}.header-nav li a.view-on-github{-webkit-transform:translateY(-11px);-ms-transform:translateY(-11px);-o-transform:translateY(-11px);transform:translateY(-11px)}.header-nav li a.view-on-github svg{width:25px;height:25px;fill:currentColor;margin-right:10px;vertical-align:baseline;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);-o-transform:translateY(5px);transform:translateY(5px)}.header-nav li a.view-on-github .star{font-size:18px}.header-logo-container{margin:0 auto;padding-top:calc(80px + 4%);text-align:center}.header-logo-container .header-logo-h1{position:relative;margin:0 auto;width:1000px;max-width:100%}.header-logo-container .header-logo{margin-right:-3%;width:1000px;max-width:80%}.header-subtitle{font-size:28px;padding:0 20px}.header-description{font-size:18px;line-height:1.6;padding:0 20px;font-weight:300}.header-buttons{margin:50px 0}.header-install{font-size:18px;line-height:1.6;font-weight:300}#demonstration{padding-bottom:0;margin-bottom:80px}#demonstration .trumbowyg-editor,#demonstration .trumbowyg-textarea{padding:25px}#demonstration .trumbowyg:not(.trumbowyg-fullscreen),#trumbowyg-demo:not(.trumbowyg-textarea){margin:-150px auto 0;width:100%;height:340px;max-width:900px;background:#fff;-webkit-box-shadow:0 0 27px rgba(0,0,0,.03);box-shadow:0 0 27px rgba(0,0,0,.03);resize:none}#demonstration .trumbowyg{font-size:16px;line-height:2}#demonstration .trumbowyg p{margin:0 0 32px}#demonstration .trumbowyg button{font-weight:400}#trumbowyg-demo:not(.trumbowyg-textarea){color:transparent;overflow:hidden;border:1px solid #dbdfe0}.demo-switcher{position:absolute;bottom:-20px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);z-index:10;margin:0 auto;width:250px;height:40px;border-radius:50px;border:1px solid #dbdfe0;background:#fff}.demo-switcher .button{display:block;float:left;padding:10px;margin:0;border:none;width:50%;background:0 0;color:#392813;font-weight:300;-webkit-transition:color 150ms,text-indent 150ms;-o-transition:color 150ms,text-indent 150ms;transition:color 150ms,text-indent 150ms}.demo-switcher .button:first-child{text-indent:5px}.demo-switcher .button:last-child{text-indent:-5px}.demo-switcher .button.current{text-indent:0;color:#fff}.demo-switcher::after{content:"";display:block;width:50%;height:100%;border-radius:50px;background:#ff974a;-webkit-transition:margin-left 150ms;-o-transition:margin-left 150ms;transition:margin-left 150ms}.demo-switcher.current-plugins::after{margin-left:50%}.header-logo-animation{position:absolute;overflow:hidden;top:-30px;left:91.5%;width:150px;height:150px}.header-logo-animation svg{position:absolute;top:0;left:0;fill:#fff;height:25px;width:25px}.header-logo-animation .header-logo-animation-strong{-webkit-animation:headerLogoStrong 1s linear infinite;-o-animation:headerLogoStrong 1s linear infinite;animation:headerLogoStrong 1s linear infinite;-webkit-animation-delay:-.85s;-o-animation-delay:-.85s;animation-delay:-.85s}.header-logo-animation .header-logo-animation-p{-webkit-animation:headerLogoP 1s linear infinite;-o-animation:headerLogoP 1s linear infinite;animation:headerLogoP 1s linear infinite;-webkit-animation-delay:-.2s;-o-animation-delay:-.2s;animation-delay:-.2s}.header-logo-animation .header-logo-animation-link{-webkit-animation:headerLogoLink 1s linear infinite;-o-animation:headerLogoLink 1s linear infinite;animation:headerLogoLink 1s linear infinite;-webkit-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}.header-logo-animation .header-logo-animation-blockquote{-webkit-animation:headerLogoBlockquote 1s linear infinite;-o-animation:headerLogoBlockquote 1s linear infinite;animation:headerLogoBlockquote 1s linear infinite;-webkit-animation-delay:-.6s;-o-animation-delay:-.6s;animation-delay:-.6s}.header-logo-animation .header-logo-animation-view-html{-webkit-animation:headerLogoViewHtml 1s linear infinite;-o-animation:headerLogoViewHtml 1s linear infinite;animation:headerLogoViewHtml 1s linear infinite;-webkit-animation-delay:-.3s;-o-animation-delay:-.3s;animation-delay:-.3s}@-webkit-keyframes headerLogoStrong{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(70px);transform:translateX(-30px) translateY(70px)}20%{-webkit-transform:translateX(15px) translateY(80px);transform:translateX(15px) translateY(80px)}30%{-webkit-transform:translateX(35px) translateY(75px);transform:translateX(35px) translateY(75px)}40%{-webkit-transform:translateX(40px) translateY(60px);transform:translateX(40px) translateY(60px)}50%{opacity:1;-webkit-transform:translateX(35px) translateY(40px);transform:translateX(35px) translateY(40px)}100%{opacity:0;-webkit-transform:translateX(10px) translateY(0) scale(.5);transform:translateX(10px) translateY(0) scale(.5)}}@-o-keyframes headerLogoStrong{0%{opacity:1;-o-transform:translateX(-30px) translateY(70px);transform:translateX(-30px) translateY(70px)}20%{-o-transform:translateX(15px) translateY(80px);transform:translateX(15px) translateY(80px)}30%{-o-transform:translateX(35px) translateY(75px);transform:translateX(35px) translateY(75px)}40%{-o-transform:translateX(40px) translateY(60px);transform:translateX(40px) translateY(60px)}50%{opacity:1;-o-transform:translateX(35px) translateY(40px);transform:translateX(35px) translateY(40px)}100%{opacity:0;-o-transform:translateX(10px) translateY(0) scale(.5);transform:translateX(10px) translateY(0) scale(.5)}}@keyframes headerLogoStrong{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(70px);-o-transform:translateX(-30px) translateY(70px);transform:translateX(-30px) translateY(70px)}20%{-webkit-transform:translateX(15px) translateY(80px);-o-transform:translateX(15px) translateY(80px);transform:translateX(15px) translateY(80px)}30%{-webkit-transform:translateX(35px) translateY(75px);-o-transform:translateX(35px) translateY(75px);transform:translateX(35px) translateY(75px)}40%{-webkit-transform:translateX(40px) translateY(60px);-o-transform:translateX(40px) translateY(60px);transform:translateX(40px) translateY(60px)}50%{opacity:1;-webkit-transform:translateX(35px) translateY(40px);-o-transform:translateX(35px) translateY(40px);transform:translateX(35px) translateY(40px)}100%{opacity:0;-webkit-transform:translateX(10px) translateY(0) scale(.5);-o-transform:translateX(10px) translateY(0) scale(.5);transform:translateX(10px) translateY(0) scale(.5)}}@-webkit-keyframes headerLogoP{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(60px);transform:translateX(-30px) translateY(60px)}20%{-webkit-transform:translateX(10px) translateY(60px);transform:translateX(10px) translateY(60px)}30%{-webkit-transform:translateX(20px) translateY(60px);transform:translateX(20px) translateY(60px)}40%{-webkit-transform:translateX(25px) translateY(55px);transform:translateX(25px) translateY(55px)}50%{opacity:1;-webkit-transform:translateX(32px) translateY(40px);transform:translateX(32px) translateY(40px)}100%,90%{opacity:0;-webkit-transform:translateX(35px) translateY(20px) scale(.5);transform:translateX(35px) translateY(20px) scale(.5)}}@-o-keyframes headerLogoP{0%{opacity:1;-o-transform:translateX(-30px) translateY(60px);transform:translateX(-30px) translateY(60px)}20%{-o-transform:translateX(10px) translateY(60px);transform:translateX(10px) translateY(60px)}30%{-o-transform:translateX(20px) translateY(60px);transform:translateX(20px) translateY(60px)}40%{-o-transform:translateX(25px) translateY(55px);transform:translateX(25px) translateY(55px)}50%{opacity:1;-o-transform:translateX(32px) translateY(40px);transform:translateX(32px) translateY(40px)}100%,90%{opacity:0;-o-transform:translateX(35px) translateY(20px) scale(.5);transform:translateX(35px) translateY(20px) scale(.5)}}@keyframes headerLogoP{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(60px);-o-transform:translateX(-30px) translateY(60px);transform:translateX(-30px) translateY(60px)}20%{-webkit-transform:translateX(10px) translateY(60px);-o-transform:translateX(10px) translateY(60px);transform:translateX(10px) translateY(60px)}30%{-webkit-transform:translateX(20px) translateY(60px);-o-transform:translateX(20px) translateY(60px);transform:translateX(20px) translateY(60px)}40%{-webkit-transform:translateX(25px) translateY(55px);-o-transform:translateX(25px) translateY(55px);transform:translateX(25px) translateY(55px)}50%{opacity:1;-webkit-transform:translateX(32px) translateY(40px);-o-transform:translateX(32px) translateY(40px);transform:translateX(32px) translateY(40px)}100%,90%{opacity:0;-webkit-transform:translateX(35px) translateY(20px) scale(.5);-o-transform:translateX(35px) translateY(20px) scale(.5);transform:translateX(35px) translateY(20px) scale(.5)}}@-webkit-keyframes headerLogoLink{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(90px);transform:translateX(-30px) translateY(90px)}20%{-webkit-transform:translateX(15px) translateY(100px);transform:translateX(15px) translateY(100px)}30%{-webkit-transform:translateX(25px) translateY(95px);transform:translateX(25px) translateY(95px)}40%{-webkit-transform:translateX(30px) translateY(80px);transform:translateX(30px) translateY(80px)}50%{opacity:1;-webkit-transform:translateX(30px) translateY(70px);transform:translateX(30px) translateY(70px)}100%,90%{opacity:0;-webkit-transform:translateX(10px) translateY(0) scale(.5);transform:translateX(10px) translateY(0) scale(.5)}}@-o-keyframes headerLogoLink{0%{opacity:1;-o-transform:translateX(-30px) translateY(90px);transform:translateX(-30px) translateY(90px)}20%{-o-transform:translateX(15px) translateY(100px);transform:translateX(15px) translateY(100px)}30%{-o-transform:translateX(25px) translateY(95px);transform:translateX(25px) translateY(95px)}40%{-o-transform:translateX(30px) translateY(80px);transform:translateX(30px) translateY(80px)}50%{opacity:1;-o-transform:translateX(30px) translateY(70px);transform:translateX(30px) translateY(70px)}100%,90%{opacity:0;-o-transform:translateX(10px) translateY(0) scale(.5);transform:translateX(10px) translateY(0) scale(.5)}}@keyframes headerLogoLink{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(90px);-o-transform:translateX(-30px) translateY(90px);transform:translateX(-30px) translateY(90px)}20%{-webkit-transform:translateX(15px) translateY(100px);-o-transform:translateX(15px) translateY(100px);transform:translateX(15px) translateY(100px)}30%{-webkit-transform:translateX(25px) translateY(95px);-o-transform:translateX(25px) translateY(95px);transform:translateX(25px) translateY(95px)}40%{-webkit-transform:translateX(30px) translateY(80px);-o-transform:translateX(30px) translateY(80px);transform:translateX(30px) translateY(80px)}50%{opacity:1;-webkit-transform:translateX(30px) translateY(70px);-o-transform:translateX(30px) translateY(70px);transform:translateX(30px) translateY(70px)}100%,90%{opacity:0;-webkit-transform:translateX(10px) translateY(0) scale(.5);-o-transform:translateX(10px) translateY(0) scale(.5);transform:translateX(10px) translateY(0) scale(.5)}}@-webkit-keyframes headerLogoBlockquote{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(55px);transform:translateX(-30px) translateY(55px)}30%{-webkit-transform:translateX(5px) translateY(50px);transform:translateX(5px) translateY(50px)}40%{-webkit-transform:translateX(10px) translateY(45px);transform:translateX(10px) translateY(45px)}50%{opacity:1;-webkit-transform:translateX(13px) translateY(40px);transform:translateX(13px) translateY(40px)}100%{opacity:0;-webkit-transform:translateX(10px) translateY(10px) scale(.5);transform:translateX(10px) translateY(10px) scale(.5)}}@-o-keyframes headerLogoBlockquote{0%{opacity:1;-o-transform:translateX(-30px) translateY(55px);transform:translateX(-30px) translateY(55px)}30%{-o-transform:translateX(5px) translateY(50px);transform:translateX(5px) translateY(50px)}40%{-o-transform:translateX(10px) translateY(45px);transform:translateX(10px) translateY(45px)}50%{opacity:1;-o-transform:translateX(13px) translateY(40px);transform:translateX(13px) translateY(40px)}100%{opacity:0;-o-transform:translateX(10px) translateY(10px) scale(.5);transform:translateX(10px) translateY(10px) scale(.5)}}@keyframes headerLogoBlockquote{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(55px);-o-transform:translateX(-30px) translateY(55px);transform:translateX(-30px) translateY(55px)}30%{-webkit-transform:translateX(5px) translateY(50px);-o-transform:translateX(5px) translateY(50px);transform:translateX(5px) translateY(50px)}40%{-webkit-transform:translateX(10px) translateY(45px);-o-transform:translateX(10px) translateY(45px);transform:translateX(10px) translateY(45px)}50%{opacity:1;-webkit-transform:translateX(13px) translateY(40px);-o-transform:translateX(13px) translateY(40px);transform:translateX(13px) translateY(40px)}100%{opacity:0;-webkit-transform:translateX(10px) translateY(10px) scale(.5);-o-transform:translateX(10px) translateY(10px) scale(.5);transform:translateX(10px) translateY(10px) scale(.5)}}@-webkit-keyframes headerLogoViewHtml{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(90px);transform:translateX(-30px) translateY(90px)}40%{-webkit-transform:translateX(30px) translateY(105px);transform:translateX(30px) translateY(105px)}50%{-webkit-transform:translateX(40px) translateY(100px);transform:translateX(40px) translateY(100px)}60%{opacity:1;-webkit-transform:translateX(50px) translateY(90px);transform:translateX(50px) translateY(90px)}100%{opacity:0;-webkit-transform:translateX(70px) translateY(70px) scale(.5);transform:translateX(70px) translateY(70px) scale(.5)}}@-o-keyframes headerLogoViewHtml{0%{opacity:1;-o-transform:translateX(-30px) translateY(90px);transform:translateX(-30px) translateY(90px)}40%{-o-transform:translateX(30px) translateY(105px);transform:translateX(30px) translateY(105px)}50%{-o-transform:translateX(40px) translateY(100px);transform:translateX(40px) translateY(100px)}60%{opacity:1;-o-transform:translateX(50px) translateY(90px);transform:translateX(50px) translateY(90px)}100%{opacity:0;-o-transform:translateX(70px) translateY(70px) scale(.5);transform:translateX(70px) translateY(70px) scale(.5)}}@keyframes headerLogoViewHtml{0%{opacity:1;-webkit-transform:translateX(-30px) translateY(90px);-o-transform:translateX(-30px) translateY(90px);transform:translateX(-30px) translateY(90px)}40%{-webkit-transform:translateX(30px) translateY(105px);-o-transform:translateX(30px) translateY(105px);transform:translateX(30px) translateY(105px)}50%{-webkit-transform:translateX(40px) translateY(100px);-o-transform:translateX(40px) translateY(100px);transform:translateX(40px) translateY(100px)}60%{opacity:1;-webkit-transform:translateX(50px) translateY(90px);-o-transform:translateX(50px) translateY(90px);transform:translateX(50px) translateY(90px)}100%{opacity:0;-webkit-transform:translateX(70px) translateY(70px) scale(.5);-o-transform:translateX(70px) translateY(70px) scale(.5);transform:translateX(70px) translateY(70px) scale(.5)}}.section{position:relative;padding-bottom:100px}.section-primary{color:#b65207;background:-webkit-gradient(linear,right top,left bottom,from(#ff974a),to(#ffb864));background:-webkit-linear-gradient(top right,#ff974a,#ffb864);background:-o-linear-gradient(top right,#ff974a,#ffb864);background:linear-gradient(to bottom left,#ff974a,#ffb864)}.section-primary .section-title{color:#fff}.section-primary a{color:#fff}.section-secondary{background:#f4f7fa}.section h4{font-weight:400;color:#392813;font-size:28px;padding-top:80px}.section-title{text-align:center;font-family:Panton,sans-serif;font-size:100px;color:#ff974a;padding-top:100px;padding-bottom:30px}.section-subtitle{margin-top:-22px;font-size:23px;color:#392813;font-weight:400}.section-introduction{margin-top:50px;padding-bottom:70px}.section-introduction .introduction-section{height:300px}.section-introduction .introduction-section-col{position:relative;float:left;width:30%;margin-right:5%}.section-introduction .introduction-section-col:last-child{margin-right:0}.section-introduction .introduction-section-col-title{font-size:28px;font-weight:300;margin-bottom:0;padding-top:50px}.section-introduction .introduction-section-col-title img{height:40px;margin-right:8px;-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);-o-transform:translateY(-3px);transform:translateY(-3px)}.section-introduction .introduction-section-col-title img.illu-lightweight{-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.section-introduction .introduction-section-col-description{font-size:18px;line-height:28px;margin-top:10px}.installation-first-step{height:400px;color:#392813;text-align:center;padding-top:10px;margin:20px 0 50px;border:1px solid rgba(0,0,0,.15);border-radius:8px}.installation-first-step code{display:block}.installation-first-step .installation-download,.installation-first-step .installation-package-managers{width:48%;float:left}.installation-first-step .installation-col-title{font-size:22px;padding:30px 0;color:#392813}.installation-first-step .button{display:block;color:#392813;border-color:rgba(0,0,0,.07);background-color:transparent;-webkit-box-shadow:0 0 50px rgba(0,0,0,.03);box-shadow:0 0 50px rgba(0,0,0,.03);-webkit-transition:background-color 150ms,color 150ms,-webkit-box-shadow 150ms;transition:background-color 150ms,color 150ms,-webkit-box-shadow 150ms;-o-transition:background-color 150ms,box-shadow 150ms,color 150ms;transition:background-color 150ms,box-shadow 150ms,color 150ms;transition:background-color 150ms,box-shadow 150ms,color 150ms,-webkit-box-shadow 150ms}.installation-first-step .button:hover{text-decoration:none;color:#fff;border-color:transparent;background-color:#ff974a;-webkit-box-shadow:0 0 50px rgba(255,151,74,.4);box-shadow:0 0 50px rgba(255,151,74,.4)}.installation-first-step .installation-or{position:relative;font-weight:700;text-transform:uppercase;width:4%;float:left;font-size:18px;margin:140px 0 20px;border-radius:50px;z-index:0}.installation-first-step .installation-or::before{content:"";display:block;position:absolute;top:50%;left:50%;z-index:-1;width:100%;padding-top:100%;min-width:45px;min-height:45px;background:#fff;border-radius:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.installation-first-step .installation-package-managers{font-size:18px}.installation-first-step .installation-package-managers code{padding-top:5px;line-height:1.6}.installation-first-step .installation-package-managers code+code{padding-top:0}.installation-first-step .installation-cdn{clear:both;width:100%}.languages p{text-align:center;margin:0 0 5px;font-size:18px;color:#fff}.languages p a{color:#b65207}.languages .languages-columns{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.languages .col-globe{-webkit-box-flex:1.07;-webkit-flex:1.07;-moz-box-flex:1.07;-ms-flex:1.07;flex:1.07;margin-top:30px}.languages .col-globe .globe{width:90%;-webkit-transform:translateX(-40px);-ms-transform:translateX(-40px);-o-transform:translateX(-40px);transform:translateX(-40px)}.languages .col-list{-webkit-box-flex:.93;-webkit-flex:.93;-moz-box-flex:.93;-ms-flex:.93;flex:.93;padding-top:80px;line-height:1.6;font-weight:400}.languages .col-list .continent-name{color:#fff;font-size:22px;font-weight:400;background:0 0;border:none;padding:0;margin:0}.languages .col-list .continent-name:focus{outline:0}.languages .col-list .continent-name::after{content:"";display:inline-block;height:0;width:0;border:6px solid transparent;border-left-color:#fff;-webkit-transform:translateX(5px) translateY(-1px);-ms-transform:translateX(5px) translateY(-1px);-o-transform:translateX(5px) translateY(-1px);transform:translateX(5px) translateY(-1px)}.languages .col-list li[style] .continent-name::after{border-left-color:transparent;border-top-color:#fff;-webkit-transform:translateX(2px) translateY(2px);-ms-transform:translateX(2px) translateY(2px);-o-transform:translateX(2px) translateY(2px);transform:translateX(2px) translateY(2px)}.languages .col-list .lang-code{display:inline-block;min-width:30px;padding-right:8px;opacity:.6;-webkit-transition:opacity 150ms;-o-transition:opacity 150ms;transition:opacity 150ms}.languages .col-list .lang-name{-webkit-transition:padding-left 150ms;-o-transition:padding-left 150ms;transition:padding-left 150ms}.languages .col-list a{color:#b65207;-webkit-transition:color 150ms;-o-transition:color 150ms;transition:color 150ms}.languages .col-list a:hover{color:#fff;text-decoration:none}.languages .col-list a:hover .lang-code{opacity:1}.languages .col-list a:hover .lang-name{padding-left:8px}.languages .col-list li,.languages .col-list ul{margin:0;padding:0;list-style:none}.languages .col-list>ul{padding-right:50px}.languages .col-list>ul>li{overflow:hidden;-webkit-transition:height 150ms linear;-o-transition:height 150ms linear;transition:height 150ms linear}.languages .col-list>ul>li[data-height]{height:30px}.languages .col-list>ul>li ul{padding:15px 0;-webkit-columns:2;-moz-columns:2;columns:2;line-height:1.8}.plugins-packages .wrapper{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.plugins-packages .col-plugins{-webkit-box-flex:1.07;-webkit-flex:1.07;-moz-box-flex:1.07;-ms-flex:1.07;flex:1.07}.plugins-packages .col-packages{-webkit-box-flex:.93;-webkit-flex:.93;-moz-box-flex:.93;-ms-flex:.93;flex:.93}.plugins-packages .section-title{text-align:left;-webkit-transform:translateX(-5px);-ms-transform:translateX(-5px);-o-transform:translateX(-5px);transform:translateX(-5px)}.plugins-packages p{padding:0 100px 0 0;line-height:1.6}.plugins-packages li,.plugins-packages ul{margin:0;padding:0;list-style:none}.plugins-packages ul{-webkit-columns:2;-moz-columns:2;columns:2;margin:50px 0 0;max-width:500px}.plugins-packages li a{position:relative;display:inline-block;overflow:visible;color:#392813;-webkit-transition:color 150ms,-webkit-transform 150ms;transition:color 150ms,-webkit-transform 150ms;-o-transition:color 150ms,-o-transform 150ms;transition:color 150ms,transform 150ms;transition:color 150ms,transform 150ms,-webkit-transform 150ms,-o-transform 150ms;line-height:1.8}.plugins-packages li a:hover{color:#ff974a;text-decoration:none}.plugins-packages li a img,.plugins-packages li a svg{display:inline-block;color:#ff974a;fill:#ff974a;width:20px;height:20px;margin-right:8px;vertical-align:sub}.donate-container{position:relative;max-width:800px;margin:0 auto}.donate-container .donate-description{width:100%;padding:30px 50px 50px;background:#f4f7fa;border-top-left-radius:6px;border-top-right-radius:6px}.donate-container .donate-footer{text-align:center;padding:50px 0;background:#ff974a -webkit-gradient(linear,right top,left bottom,from(#ff974a),to(#ffb864));background:#ff974a -webkit-linear-gradient(top right,#ff974a,#ffb864);background:#ff974a -o-linear-gradient(top right,#ff974a,#ffb864);background:#ff974a linear-gradient(to bottom left,#ff974a,#ffb864);border-bottom-left-radius:6px;border-bottom-right-radius:6px}.donate-container .donate-beer{position:absolute;left:-190px;bottom:-30px;width:250px}.donate-container .button{color:#fff;text-decoration:none}.donate-container .button:focus,.donate-container .button:hover{text-decoration:none;background:#fff;color:#ff974a}.sponsors-container{margin:150px 0 0;text-align:center}.sponsors-container a{padding:0 20px}.footer{margin-top:40px;text-align:center;color:#fff;background:-webkit-gradient(linear,right top,left bottom,from(#ff974a),to(#ffb864));background:-webkit-linear-gradient(top right,#ff974a,#ffb864);background:-o-linear-gradient(top right,#ff974a,#ffb864);background:linear-gradient(to bottom left,#ff974a,#ffb864);clear:both}.footer .footer-link,.footer .footer-text{display:inline-block;padding:40px}.footer .footer-text{padding-bottom:0}.footer .footer-text .hearts{font-size:18px;color:#b65207}.footer .footer-link{text-decoration:none;color:#fff;-webkit-transition:color .15s;-o-transition:color .15s;transition:color .15s}.footer .footer-link:focus,.footer .footer-link:hover{color:#b65207}/*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/pre code.hljs{display:block;overflow-x:auto;padding:0 1.5em;border-radius:8px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.02);box-shadow:0 4px 16px rgba(0,0,0,.02)}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-comment{font-style:italic}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}.documentation-body{background:#f4f7fa;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.documentation-body .main{padding:0 60px;height:100vh;width:78%;overflow:auto}.documentation-body .main-demos{padding:0;overflow:hidden}.documentation-body .main-demos iframe{width:100%;height:100vh;background:#f4f7fa}.documentation-body .main-demo-inner{width:100%}.documentation-body .section-title{padding:50px 0 0}.documentation-body h3{display:inline-block;font-weight:700;font-size:26px}.documentation-body h4{padding:20px 0 0}.documentation-body dd :not(pre)>code,.documentation-body dd>code,.documentation-body p :not(pre)>code,.documentation-body p>code,.documentation-body ul :not(pre)>code,.documentation-body ul>code{color:#616870;background:#dfe5eb;padding:0 5px;border-radius:4px}.documentation-body dd a code,.documentation-body p a code,.documentation-body ul a code{color:inherit}.documentation-body code.type{padding:0 3px;color:#b65207}.documentation-body code.type::before{content:"<"}.documentation-body code.type::after{content:">"}.documentation-body .button.button-demo{border-color:rgba(244,141,64,.6);color:#f48d40;width:auto;padding:10px 30px}.documentation-body .button.button-demo:focus,.documentation-body .button.button-demo:hover{text-decoration:none;border-color:#f48d40;background:#f48d40;color:#fff}.documentation-body ::-webkit-scrollbar{width:17px}.documentation-body ::-webkit-scrollbar-track{background:#f4f7fa}.documentation-body ::-webkit-scrollbar-thumb{background:#cfd7de;border:2px solid #f4f7fa}.documentation-body ::-webkit-scrollbar-thumb:hover{background:#616870}.header-documentation{margin-top:50px}.header-documentation .documentation-logo-link{display:block;margin:0 auto;width:80%;max-width:350px}.header-documentation .documentation-logo-link .documentation-logo{width:100%}.header-documentation .documentation-title{text-align:center;font-family:Panton,sans-serif;font-weight:100;line-height:1}@media (max-width:1290px){.header-documentation .documentation-title{font-size:2.5vw}}.header-documentation .documentation-menu{text-align:center;margin-top:40px;background:#f48d40}.header-documentation .documentation-menu a{display:inline-block;padding:20px 5px}.header-documentation .documentation-menu a:focus,.header-documentation .documentation-menu a:hover{text-decoration:underline}@media (max-width:1550px){.header-documentation .documentation-menu{padding:5px 7%}.header-documentation .documentation-menu a{width:48%;padding:10px 0}.header-documentation .documentation-menu .documentation-menu-dot{display:none}}.sidebar{position:relative;top:0;left:0;height:100vh;color:#fff;background:#ff974a -webkit-gradient(linear,right top,left bottom,from(#ff974a),to(#ffb864));background:#ff974a -webkit-linear-gradient(top right,#ff974a,#ffb864);background:#ff974a -o-linear-gradient(top right,#ff974a,#ffb864);background:#ff974a linear-gradient(to bottom left,#ff974a,#ffb864);width:22%}.sidebar ::-webkit-scrollbar-track{background:0 0}.sidebar ::-webkit-scrollbar-thumb{background:#ffb864;border:1px solid #ffb864;border-right:none}.sidebar ::-webkit-scrollbar-thumb:hover{background:#fff}.sidebar::after{content:"";display:block;position:absolute;left:0;bottom:70px;width:calc(100% - 17px);height:100px;background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,184,100,0)),to(#ffb864));background:-webkit-linear-gradient(top,rgba(255,184,100,0),#ffb864);background:-o-linear-gradient(top,rgba(255,184,100,0),#ffb864);background:linear-gradient(to bottom,rgba(255,184,100,0),#ffb864);pointer-events:none}.sidebar .sidebar-inner{overflow:auto;overflow-y:scroll;overflow-x:hidden;height:calc(100vh - 70px)}.sidebar li,.sidebar ul{padding:0;margin:0;list-style:none}.sidebar a{text-decoration:none;color:#fff;-webkit-transition:color 150ms,text-indent 150ms;-o-transition:color 150ms,text-indent 150ms;transition:color 150ms,text-indent 150ms}.sidebar .documentation-summary{position:relative;font-size:18px;margin-bottom:100px}.sidebar .documentation-summary>ul{max-width:340px;margin:0 auto;padding:0 30px}.sidebar .documentation-summary>ul .documentation-summary-title,.sidebar .documentation-summary>ul a{display:block;height:30px;line-height:30px;text-overflow:ellipsis;width:100%;white-space:nowrap;overflow:hidden}.sidebar .documentation-summary>ul>li{margin-top:30px}.sidebar .documentation-summary>ul>li:first-child{margin-top:50px}.sidebar .documentation-summary>ul>li .documentation-summary-title,.sidebar .documentation-summary>ul>li>a{font-weight:600;text-transform:uppercase;margin-bottom:5px}.sidebar .documentation-summary>ul>li>a:focus,.sidebar .documentation-summary>ul>li>a:hover{color:#b65207}.sidebar .documentation-summary>ul>li ul li a:focus,.sidebar .documentation-summary>ul>li ul li a:hover{color:#b65207;text-indent:10px}.sidebar .documentation-sidebar-beer{position:fixed;width:22%;bottom:0;left:0;background:#fff;height:70px}.sidebar .documentation-sidebar-beer a{position:relative;display:block;height:70px;width:100%;text-align:left;padding:10px 17px 0 0;background:0 0;border:none;border-top:1px solid #e9eef3;color:#9ca4ac}.sidebar .documentation-sidebar-beer a:focus{outline:0}.sidebar .documentation-sidebar-beer a .beer-icon{display:none}@media (min-width:1700px){.sidebar .documentation-sidebar-beer a .beer-icon{position:absolute;display:block;width:calc((100% - 236px)/ 2);height:50px;margin:0 auto}}.sidebar .documentation-sidebar-beer a .beer-label{position:relative;display:block;max-width:236px;margin:0 auto}@media (max-width:1290px){.sidebar .documentation-sidebar-beer a .beer-label{font-size:14px;margin:0;padding:7px 0 0 15px;width:200px}}.added-feature,.deprecated-feature{display:inline-block;padding:3px 13px;margin:0;color:#fff;font-size:14px;border-radius:50px;-webkit-transform:translateX(10px) translateY(-4px);-ms-transform:translateX(10px) translateY(-4px);-o-transform:translateX(10px) translateY(-4px);transform:translateX(10px) translateY(-4px)}.added-feature{background:#5ecb0e}.deprecated-feature{background:#ff9a4d}.deprecated-info{padding:7px 15px;border-radius:4px;background:#f2dfc1;border:1px solid #ff9a4d}.deprecated-info a{color:#ff9a4d}.version-tag{display:inline-block;padding:2px 6px;background:#5ecb0e;color:#fff;font-size:12px;font-style:normal;border-radius:20px}.note .version-tag{-webkit-transform:translateY(-1px);-ms-transform:translateY(-1px);-o-transform:translateY(-1px);transform:translateY(-1px)}.feature{position:relative;padding-bottom:60px}.feature::after{content:" ";display:block;position:absolute;bottom:0;left:50%;width:40%;height:0;border-bottom:1px solid #ffb864;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.feature h3,.feature h4{display:inline-block;position:relative}.feature h3{padding-top:50px;margin-left:-15px;padding-left:15px}.feature h4{font-size:20px;font-weight:700}.feature h3+a+h4,.feature h3+h4{display:block}.feature .title-link{display:block;position:absolute;left:-45px;height:30px;width:30px;opacity:0;text-align:center;text-decoration:none;background:#ff974a;border-radius:50%;-webkit-transform:translateY(-36px);-ms-transform:translateY(-36px);-o-transform:translateY(-36px);transform:translateY(-36px);-webkit-transition:opacity 150ms,background 150ms,color 150ms;-o-transition:opacity 150ms,background 150ms,color 150ms;transition:opacity 150ms,background 150ms,color 150ms}.feature .title-link:focus,.feature .title-link:hover{background:#fff;text-decoration:none}.feature .title-link:focus svg,.feature .title-link:hover svg{fill:#ff974a}.feature .title-link svg{fill:#fff;width:70%;height:100%}.feature h4+.title-link{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}.feature:hover .title-link{opacity:1}.feature .trumbowyg-box,.feature .trumbowyg-editor{margin:24px auto}.sample-data{background:#fff;padding:25px}.sample-data h4{padding:0}.sample-data input{width:100%;border:none;padding:5px 7px;color:#616870;background:#dfe5eb}.sample-data input:not(:last-child){margin-bottom:10px}dl dt{display:inline-block;color:#1b2126;background:#dfe5eb;padding:0 4px 0 6px;border-radius:4px}dl dd{padding:5px 0 15px;margin-left:15px}dl dd ul{margin:.5em 0}.tree{list-style:none;background:#fff;padding:1em 1.5em;border-radius:8px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.02);box-shadow:0 4px 16px rgba(0,0,0,.02)}.tree ul{position:relative;list-style:none;margin:0;padding-left:8px;overflow:hidden}.tree li{padding-top:8px}.tree>li{padding-top:0}.tree ul li{position:relative;padding-left:16px}.tree ul li::after,.tree ul li::before{content:"";display:block;position:absolute;background:#ff974a}.tree ul li::before{top:20px;left:0;width:12px;height:1px}.tree ul li::after{left:0;bottom:calc(100% - 20px);width:1px;height:500px}
================================================
FILE: docs/demos/core/dark-theme.html
================================================
<!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>
================================================
FILE: docs/demos/core/default.html
================================================
<!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>
================================================
FILE: docs/demos/core/simple.html
================================================
<!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="https://colllect.io/?ref=trumbowyg">https://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>
================================================
FILE: docs/demos/index.html
================================================
<!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">
</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/speechrecognition.html">Speech recognition</a></li>
<li><a href="./plugins/table.html">Table</a></li>
<li><a href="./plugins/template.html">Template</a></li>
<li><a href="./plugins/tenor.html">Tenor</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: docs/demos/js/highlight.js
================================================
!function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(/</gm,"<").replace(/>/gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.className:"")).split(/\s+/);return n=n.map(function(e){return e.replace(/^lang(uage)?-/,"")}),n.filter(function(e){return N(e)||/no(-?)highlight/.test(e)})[0]}function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[r]=n[r];return t}function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o=o.nextSibling)3==o.nodeType?a+=o.nodeValue.length:1==o.nodeType&&(n.push({event:"start",offset:a,node:o}),a=r(o,a),t(o).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:o}));return a}(e,0),n}function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset<r[0].offset?e:r:"start"==r[0].event?e:r:e.length?e:r}function i(e){function r(e){return" "+e.nodeName+'="'+n(e.value)+'"'}l+="<"+t(e)+Array.prototype.map.call(e.attributes,r).join("")+">"}function c(e){l+="</"+t(e)+">"}function u(e){("start"==e.event?i:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=o();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=o();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(i)}else"start"==g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function u(e){function n(e){return e&&e.source||e}function t(t,r){return RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var c={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");c[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):Object.keys(a.k).forEach(function(e){u(e,a.k[e])}),a.k=c}a.lR=t(a.l||/\b[A-Za-z0-9_]+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function s(e,t,a,o){function i(e,n){for(var t=0;t<n.c.length;t++)if(r(n.c[t].bR,e))return n.c[t]}function c(e,n){return r(e.eR,n)?e:e.eW?c(e.parent,n):void 0}function f(e,n){return!a&&r(n.iR,e)}function g(e,n){var t=x.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function p(e,n,t,r){var a=r?"":E.classPrefix,o='<span class="'+a,i=t?"":"</span>";return o+=e+'">',o+n+i}function d(){if(!w.k)return n(y);var e="",t=0;w.lR.lastIndex=0;for(var r=w.lR.exec(y);r;){e+=n(y.substr(t,r.index-t));var a=g(w,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=w.lR.lastIndex,r=w.lR.exec(y)}return e+n(y.substr(t))}function h(){if(w.sL&&!R[w.sL])return n(y);var e=w.sL?s(w.sL,y,!0,L[w.sL]):l(y);return w.r>0&&(B+=e.r),"continuous"==w.subLanguageMode&&(L[w.sL]=e.top),p(e.language,e.value,!1,!0)}function v(){return void 0!==w.sL?h():d()}function b(e,t){var r=e.cN?p(e.cN,"",!0):"";e.rB?(M+=r,y=""):e.eB?(M+=n(t)+r,y=""):(M+=r,y=t),w=Object.create(e,{parent:{value:w}})}function m(e,t){if(y+=e,void 0===t)return M+=v(),0;var r=i(t,w);if(r)return M+=v(),b(r,t),r.rB?0:t.length;var a=c(w,t);if(a){var o=w;o.rE||o.eE||(y+=t),M+=v();do w.cN&&(M+="</span>"),B+=w.r,w=w.parent;while(w!=a.parent);return o.eE&&(M+=n(t)),y="",a.starts&&b(a.starts,""),o.rE?0:t.length}if(f(t,w))throw new Error('Illegal lexeme "'+t+'" for mode "'+(w.cN||"<unnamed>")+'"');return y+=t,t.length||1}var x=N(e);if(!x)throw new Error('Unknown language: "'+e+'"');u(x);for(var w=o||x,L={},M="",k=w;k!=x;k=k.parent)k.cN&&(M=p(k.cN,"",!0)+M);var y="",B=0;try{for(var C,j,I=0;;){if(w.t.lastIndex=I,C=w.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}m(t.substr(I));for(var k=w;k.parent;k=k.parent)k.cN&&(M+="</span>");return{r:B,value:M,language:e,top:w}}catch(A){if(-1!=A.message.indexOf("Illegal"))return{r:0,value:n(t)};throw A}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(N(n)){var t=s(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"<br>")),e}function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs(\s|$)/)||a.push("hljs"),r&&a.push(r),a.join(" ").trim()}function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):t=e;var r=t.textContent,o=n?s(n,r,!0):l(r),u=i(t);if(u.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(u,i(p),r)}o.value=f(o.value),e.innerHTML=o.value,e.className=g(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener("load",h,!1)}function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function m(){return Object.keys(R)}function N(e){return R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=s,e.highlightAuto=l,e.fixMarkup=f,e.highlightBlock=p,e.configure=d,e.initHighlighting=h,e.initHighlightingOnLoad=v,e.registerLanguage=b,e.listLanguages=m,e.getLanguage=N,e.inherit=o,e.IR="[a-zA-Z][a-zA-Z0-9_]*",e.UIR="[a-zA-Z_][a-zA-Z0-9_]*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/},e.CLCM={cN:"comment",b:"//",e:"$",c:[e.PWM]},e.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[e.PWM]},e.HCM={cN:"comment",b:"#",e:"$",c:[e.PWM]},e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("xml",function(){var t="[A-Za-z0-9\\._:-]+",e={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"},c={eW:!0,i:/</,r:0,c:[e,{cN:"attribute",b:t,r:0},{b:"=",r:0,c:[{cN:"value",c:[e],v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{title:"style"},c:[c],starts:{e:"</style>",rE:!0,sL:"css"}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{title:"script"},c:[c],starts:{e:"</script>",rE:!0,sL:"javascript"}},e,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},c]}]}});hljs.registerLanguage("javascript",function(r){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document"},c:[{cN:"pi",r:10,v:[{b:/^\s*('|")use strict('|")/},{b:/^\s*('|")use asm('|")/}]},r.ASM,r.QSM,r.CLCM,r.CBCM,r.CNM,{b:"("+r.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[r.CLCM,r.CBCM,r.RM,{b:/</,e:/>;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[r.inherit(r.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[r.CLCM,r.CBCM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+r.IR,r:0}]}});
hljs.initHighlightingOnLoad();
================================================
FILE: docs/demos/js/loader.js
================================================
var isOnline = window.location.hostname.indexOf('github.io') !== -1;
var baseURL = isOnline ? '//rawcdn.githack.com/Alex-D/Trumbowyg/v2.31.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';
if (!isOnline) {
scriptPath = scriptPath.replace('.min', '');
}
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);
================================================
FILE: docs/demos/js/runExampleCode.js
================================================
(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);
================================================
FILE: docs/demos/plugins/allowtagsfrompaste.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/base64.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/cleanpaste.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/colors.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/emoji.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/fontfamily.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/fontsize.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/giphy.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/highlight.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/history.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/indent.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/insertaudio.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/lineheight.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/mathml.html
================================================
<!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: [
'viewHTML',
'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>
================================================
FILE: docs/demos/plugins/mention.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/noembed.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/pasteembed.html
================================================
<!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.com</a> API to support X, YouTube, SoundCloud and more. Find all supported websites at <a href="https://noembed.com">noembed.com</a>.
</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>
================================================
FILE: docs/demos/plugins/pasteimage.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/preformatted.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/resizimg.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/ruby.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/specialchars.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/speechrecognition.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Speech recognition 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">Speech recognition plugin</h2>
<div class="feature">
<h3>Basic usage</h3>
<p>
This plugins allow you to enter text via speech recognition in Trumbowyg. Suddenly it does not work with Firefox which has not implemented the Web Speech API yet.
</p>
<a href="../../documentation/plugins/#plugin-speechrecognition" class="button button-demo">Read speech recognition plugin documentation</a>
<div id="editor"></div>
<h4>The code</h4>
<pre><code class="js-code-to-eval javascript">
$('#editor')
.trumbowyg({
btns: [
['speechrecognition']
]
});
</code></pre>
</div>
<div class="feature">
<h3>Language setting</h3>
<div id="editor-settings-lang"></div>
<h4>The code</h4>
<pre><code class="js-code-to-eval javascript">
$('#editor-settings-lang')
.trumbowyg({
btns: [
['speechrecognition']
],
plugins: {
speechrecognition: {
lang: 'de-DE'
}
}
});
</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/speechrecognition/trumbowyg.speechrecognition.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>
================================================
FILE: docs/demos/plugins/table.html
================================================
<!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">
<h4>Add a table to the editor</h4>
<p>
Below is an example of a simple table with a header row.
</p>
<table>
<thead>
<tr>
<th scope="col">Project & Pitch</th>
<th scope="col">Status</th>
<th scope="col">Technologies</th>
<th scope="col">Stars</th>
<th scope="col">Downloads</th>
<th scope="col">URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Trumbowyg</strong> <br> Lightweight WYSIWYG Editor</td>
<td>Active</td>
<td>JavaScript</td>
<td>~4 000 ★</td>
<td>70 000 / month</td>
<td>
<a href="https://alex-d.github.io/Trumbowyg/">Landing</a> <br>
<a href="https://github.com/Alex-D/Trumbowyg/">GitHub</a>
</td>
</tr>
<tr>
<td><strong>Monitoror</strong> <br> Unified monitoring wallboard</td>
<td>Maintenance</td>
<td>Go <br> Vue</td>
<td>~4 000 ★</td>
<td>100 000 +</td>
<td>
<a href="https://monitoror.com">Landing</a> <br>
<a href="https://github.com/monitoror/monitoror/">GitHub</a>
</td>
</tr>
<tr>
<td><strong>Cookies EU Banner</strong> <br> 1kb vanilla JS for cookie banner</td>
<td>Maintenance</td>
<td>JavaScript</td>
<td>~420 ★</td>
<td>4 000 / month</td>
<td>
<a href="https://alex-d.github.io/Cookies-EU-banner/">Landing</a> <br>
<a href="https://github.com/Alex-D/Cookies-EU-banner">GitHub</a>
</td>
</tr>
<tr>
<td><strong>Colllect</strong> <br> Bookmark Manager for Creatives</td>
<td>Paused</td>
<td>Symfony <br> Vue</td>
<td>~340 ★</td>
<td></td>
<td>
<a href="https://colllect.io">Landing</a> <br>
<a href="https://github.com/Colllect/Colllect">GitHub</a>
</td>
</tr>
<tr>
<td><strong>Check Disk Space</strong> <br> Multi-platform disk space checker for Node.js</td>
<td>Maintenance</td>
<td>TypeScript</td>
<td>~78 ★</td>
<td>2 000 000 / month</td>
<td>
<a href="https://github.com/Alex-D/check-disk-space">GitHub</a>
</td>
</tr>
<tr>
<td><strong>Column View</strong> <br> Multi-columns page viewer</td>
<td>Maintenance</td>
<td>TypeScript <br> Snabbdom</td>
<td>~7 ★</td>
<td></td>
<td>
<a href="https://column-view.com">Landing</a> <br>
<a href="https://github.com/Alex-D/Column-View/">GitHub</a>
</td>
</tr>
</tbody>
</table>
<hr>
<h4>Tables with merged cells</h4>
<p>
Example of a pricing table.
</p>
<table>
<thead>
<tr>
<th scope="col">Feature</th>
<th scope="col">Free</th>
<th scope="col">Premium</th>
<th scope="col">Business</th>
<th scope="col">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Price</td>
<td>Free</td>
<td>5,99€ / user</td>
<td>12,99€ / user</td>
<td>22,99€ / user</td>
</tr>
<tr>
<td>Users</td>
<td>1</td>
<td rowspan="3" colspan="2" style="text-align: center;">Unlimited</td>
<td>20 users minimum</td>
</tr>
<tr>
<td>Items</td>
<td>100</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Bandwidth</td>
<td>5 Mbps</td>
<td>On your charge</td>
</tr>
</tbody>
</table>
</div>
<div id="editor2">
<p>
Another tab with different merged cells:
</p>
<table>
<tbody>
<tr>
<td>Those plugins allow you to merge cells</td>
<td>And also unmerge</td>
<td colspan="2">Two cells merged</td>
</tr>
<tr>
<td>You can see some examples on this page</td>
<td colspan="2">Two horizontally merged too</td>
<td>Simple cell</td>
</tr>
<tr>
<td>Upload image</td>
<td>Pick, upload, and inserts an image</td>
<td>Next is empty</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<h3>The code</h3>
<pre><code class="js-code-to-eval javascript">
$('#editor, #editor2')
.trumbowyg({
btns: [['table'], ['tableCellBackgroundColor', 'tableBorderColor']]
});
</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>
================================================
FILE: docs/demos/plugins/template.html
================================================
<!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>
================================================
FILE: docs/demos/plugins/tenor.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tenor 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">Tenor plugin</h2>
<div class="feature">
<h3>Basic usage</h3>
<p>
User can insert some GIFs from Tenor in Trumbowyg.
</p>
<a href="../../documentation/plugins/#plugin-tenor" class="button button-demo">Read Tenor 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: [
['tenor']
],
plugins: {
tenor: {
apiKey: 'AIzaSyDSkXpGdEiI0OrQO9xZKbvTAvekZhmXW3c'
}
}
});
</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/tenor/ui/trumbowyg.tenor.min.css', 'Import Tenor plugin specific stylesheet');
loadScript('dist/trumbowyg.min.js', 'Import Trumbowyg');
loadScript('dist/plugins/tenor/trumbowyg.tenor.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>
================================================
FILE: docs/demos/plugins/upload.html
================================================
<!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 imgur 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 imgur 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>
================================================
FILE: docs/documentation/core/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Core | Trumbowyg: A lightweight WYSIWYG editor | Alex-D / Alexandre Demode</title>
<meta name="description" content="Trumbowyg is a jQuery plugin for create WYSIWYG editor">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="../../favicon.png">
<link rel="stylesheet" href="../../css/main.css">
</head>
<body class="documentation-body">
<svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;visibility: hidden;height: 0;width: 0;">
<symbol id="trumbowyg-link" viewBox="0 0 72 72">
<path d="M30.9 49.1l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9l-5.2-5.2c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L10.8 42c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7C38 50.5 38.6 46.3 37 43l-6.1 6.1zM38.5 22.7l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2-6.5 6.5c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1z"></path>
<path d="M44.1 30.7c.2-.2.4-.6.4-.9 0-.3-.1-.6-.4-.9l-2.3-2.3c-.2-.2-.6-.4-.9-.4-.3 0-.6.1-.9.4L25.8 40.8c-.2.2-.4.6-.4.9 0 .3.1.6.4.9l2.3 2.3c.2.2.6.4.9.4.3 0 .6-.1.9-.4l14.2-14.2z"></path>
</symbol>
</svg>
<div class="sidebar">
<div class="sidebar-inner">
<header class="header-documentation">
<a href="../../" class="documentation-logo-link">
<img src="../../img/logo-doc.svg" alt="" class="documentation-logo">
</a>
<h1 class="documentation-title">
Core
</h1>
<nav class="documentation-menu">
<a href="../">Docs</a><span class="documentation-menu-dot"> •</span>
<a href="../plugins/">Plugins</a><span class="documentation-menu-dot"> •</span>
<a href="./">Core</a><span class="documentation-menu-dot"> •</span>
<a href="../../demos/">Demos</a>
</nav>
</header>
<aside class="documentation-summary">
<ul>
<li>
<a href="#core">Core</a>
<ul>
<li><a href="#modal-box">Modal box</a></li>
<li><a href="#range">Range</a></li>
<li><a href="#manage-content">Manage content</a></li>
<li><a href="#empty">Empty</a></li>
<li><a href="#enable-disable-edition">Enable/disable edition</a></li>
<li><a href="#toggle">Toggle HTML/WYSIWYG</a></li>
</ul>
</li>
</ul>
</aside>
<div class="documentation-sidebar-beer">
<a href="../../#donate">
<img src="../../img/beer.svg" alt="" class="beer-icon">
<span class="beer-label">
Do you enjoy Trumbowyg? <br>
Buy me some beers :)
</span>
</a>
</div>
</div>
</div>
<main class="main">
<section id="core" class="wrapper section">
<h2 class="section-title">Core</h2>
<div class="feature">
<h3 id="modal-box">Modal box</h3>
<p>
When you want create your custom extension for Trumbowyg, you can open and close a modal box with custom
inner HTML code, listen events and more.
</p>
<h4>Open and close</h4>
<p>
For that use the right method: <code>openModal</code> or <code>closeModal</code> like that:
</p>
<pre><code class="javascript">
// Open a modal box
var $modal = trumbowyg.openModal({
title: 'A title for modal box',
content: '<p>Content in HTML which you want include in created modal box</p>'
});
// Close current modal box
trumbowyg.closeModal();
</code></pre>
<p>
An <code>openModal</code> call returns a jQuery object which contains the modal box. You need this
object if you want to use listen events (see below).
</p>
<p class="note">
Only one modal box can open at any given moment. So, <code>openModal</code> return false if a modal is
currently opened.
</p>
<h4>Events on modal box</h4>
<p>
Modal boxes in Trumbowy come with two buttons: "Confirm" and "Cancel". An event is associated to each
one:
</p>
<ul>
<li><code>tbwsubmit</code>: triggered when form is submit</li>
<li><code>tbwreset</code>: triggered when user cancels operation</li>
</ul>
<pre><code class="javascript">
// Open a modal box
var $modal = trumbowyg.openModal({
title: 'A title for modal box',
content: '<p>Content in HTML which you want include in created modal box</p>'
});
// Listen clicks on modal box buttons
$modal.on('tbwconfirm', function(e){
// Do what you want
trumbowyg.closeModal();
});
$modal.on('tbwcancel', function(e){
trumbowyg.closeModal();
});
</code></pre>
<h4>Only build inputs in modal</h4>
<p>
If you want to only add inputs in the modal box, this function is more simple. Indeed, you do not manage
confirm and close buttons, and get all input value on confirm.
</p>
<pre><code class="javascript">
var img = $('img#an-img');
$modal = trumbowyg.openModalInsert({
title: 'A title for modal box',
fields: {
url: {
value: img.attr('src')
},
alt: {
label: 'Alt',
name: 'alt',
value: img.attr('alt'),
type: 'text',
attributes: {}
},
// Build your own input by setting type as a function and returning the html
referrerpolicy: {
label: 'Referrer Policy',
name: 'referrerpolicy',
type: function(field, fieldId, prefix, lg) {
var html += '<div class="' + prefix + 'input-row">' +
'<div class="' + prefix + 'input-infos">' +
'<label for="' + fieldId + '">' +
'<span>' + (lg[field.label] ? lg[field.label] : field.label) + '</span>' +
'</label>' +
'</div>' +
'<div class="' + prefix + 'input-html">' +
'<select id="' + fieldId + '" name="' + field.name + '">' +
'<option' + (field.value === 'no-referrer' ? ' selected="selected"' : '') + '>no-referrer</option>' +
'<option' + (field.value === 'no-referrer-when-downgrade' ? ' selected="selected"' : '') + '>no-referrer-when-downgrade</option>' +
'<option' + (field.value === 'origin' ? ' selected="selected"' : '') + '>origin</option>' +
'<option' + (field.value === 'origin-when-cross-origin' ? ' selected="selected"' : '') + '>origin-when-cross-origin</option>' +
'<option' + (field.value === 'unsafe-url' ? ' selected="selected"' : '') + '>unsafe-url</option>' +
'</select>' +
'</div>' +
'</div>';
return html;
}
},
example: {
// Missing label is replaced by the key of this object (here 'example')
// Missing name is the key
// When value is missing, value = ''
// When type is missing, 'text' is assumed. You can use all the input field types,
// plus checkbox and radio (select and textarea are not supported)
// When attributes is missing, {} is used. Attributes are added as attributes to
// the input element.
// For radio and checkbox fields, you will need to use attributes if you want it
// to be checked by default.
}
},
// Callback is called when user confirms
callback: function(values){
img.attr('src', values['url']);
img.attr('alt', values['alt']);
return true; // Return true if you have finished with this modal box
// If you do not return anything, you must manage the closing of the modal box yourself
}
});
// You can also listen for modal confirm/cancel events to do some custom things
// Note: the openModalInsert callback is called on tbwconfirm
$modal.on('tbwconfirm', function(e){
// Do what you want
});
$modal.on('tbwcancel', function(e){
trumbowyg.closeModal();
});
</code></pre>
</div>
<div class="feature">
<h3 id="range">Range</h3>
<p>
Managing correctly text range, is not so trivial. Trumbowyg has a system to save and restore
selection range which does not involve typical getter/setter.
</p>
<h4>Save and get current range</h4>
<pre><code class="javascript">
// Save current range
trumbowyg.saveRange();
// Restore last saved range
trumbowyg.restoreRange();
</code></pre>
<h4>Get selection range</h4>
<pre><code class="javascript">
// range contains a JavaScript range
var range = trumbowyg.getRange();
</code></pre>
<h4>Get last saved range text (aka selected text)</h4>
<pre><code class="javascript">
var text = trumbowyg.getRangeText();
</code></pre>
</div>
<div class="feature">
<h3 id="manage-content">Manage content</h3>
<p>
You can set and get current HTML content of the editor with a getter/setter:
</p>
<pre><code class="javascript">
// Get HTML content
trumbowyg.html();
// Set HTML content
trumbowyg.html('<p>Your content here</p>');
</code></pre>
</div>
<div class="feature">
<h3 id="empty">Empty</h3>
<p>
You can empty the content of the editor.
</p>
<pre><code class="javascript">
trumbowyg.empty();
</code></pre>
</div>
<div class="feature">
<h3 id="enable-disable-edition">Enable/disable edition</h3>
<p class="added-feature">Added in 2.1.0</p>
<p>
As you can disable editor by using <a href="../#disabled">disabled</a> option, you can also switch between
enabled and disabled states by using API.
</p>
<pre><code class="javascript">
trumbowyg.setDisabled(true);
trumbowyg.setDisabled(false);
</code></pre>
</div>
<div class="feature">
<h3 id="toggle">Toggle between HTML & WYSIWYG modes</h3>
<p>
You can switch between HTML view and WYSIWYG view via toggle method.
</p>
<pre><code class="javascript">
trumbowyg.toggle();
</code></pre>
</div>
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="../../js/vendor/highlight.js"></script>
<script src="../../js/main.js"></script>
</body>
</html>
================================================
FILE: docs/documentation/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Documentation | 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">
</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
gitextract_ml_8nko7/
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE.md
│ └── workflows/
│ ├── lint.yml
│ └── website.yml
├── .gitignore
├── .jshintrc
├── .npmignore
├── BACKERS.md
├── CONTRIBUTORS.md
├── LICENSE
├── README.md
├── bower.json
├── docs/
│ ├── .gitignore
│ ├── .jshintrc
│ ├── css/
│ │ └── main.css
│ ├── demos/
│ │ ├── core/
│ │ │ ├── dark-theme.html
│ │ │ ├── default.html
│ │ │ └── simple.html
│ │ ├── index.html
│ │ ├── js/
│ │ │ ├── highlight.js
│ │ │ ├── loader.js
│ │ │ └── runExampleCode.js
│ │ └── plugins/
│ │ ├── allowtagsfrompaste.html
│ │ ├── base64.html
│ │ ├── cleanpaste.html
│ │ ├── colors.html
│ │ ├── emoji.html
│ │ ├── fontfamily.html
│ │ ├── fontsize.html
│ │ ├── giphy.html
│ │ ├── highlight.html
│ │ ├── history.html
│ │ ├── indent.html
│ │ ├── insertaudio.html
│ │ ├── lineheight.html
│ │ ├── mathml.html
│ │ ├── mention.html
│ │ ├── noembed.html
│ │ ├── pasteembed.html
│ │ ├── pasteimage.html
│ │ ├── preformatted.html
│ │ ├── resizimg.html
│ │ ├── ruby.html
│ │ ├── specialchars.html
│ │ ├── speechrecognition.html
│ │ ├── table.html
│ │ ├── template.html
│ │ ├── tenor.html
│ │ └── upload.html
│ ├── documentation/
│ │ ├── core/
│ │ │ └── index.html
│ │ ├── index.html
│ │ └── plugins/
│ │ └── index.html
│ ├── gulpfile.mjs
│ ├── humans.txt
│ ├── index.html
│ ├── js/
│ │ ├── main.js
│ │ └── vendor/
│ │ └── highlight.js
│ ├── package.json
│ ├── robots.txt
│ └── scss/
│ ├── _base.scss
│ ├── _buttons.scss
│ ├── _documentation.scss
│ ├── _donate.scss
│ ├── _font.scss
│ ├── _footer.scss
│ ├── _get-started.scss
│ ├── _header.scss
│ ├── _highlightjs-github.scss
│ ├── _introduction.scss
│ ├── _languages.scss
│ ├── _normalize.scss
│ ├── _plugins-packages.scss
│ ├── _section.scss
│ ├── _variables.scss
│ └── main.scss
├── gulpfile.mjs
├── index.html
├── package.json
├── plugins/
│ ├── allowtagsfrompaste/
│ │ └── trumbowyg.allowtagsfrompaste.js
│ ├── base64/
│ │ └── trumbowyg.base64.js
│ ├── cleanpaste/
│ │ └── trumbowyg.cleanpaste.js
│ ├── colors/
│ │ ├── trumbowyg.colors.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.colors.scss
│ ├── emoji/
│ │ ├── trumbowyg.emoji.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.emoji.scss
│ ├── fontfamily/
│ │ └── trumbowyg.fontfamily.js
│ ├── fontsize/
│ │ └── trumbowyg.fontsize.js
│ ├── giphy/
│ │ ├── trumbowyg.giphy.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.giphy.scss
│ ├── highlight/
│ │ ├── trumbowyg.highlight.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.highlight.scss
│ ├── history/
│ │ └── trumbowyg.history.js
│ ├── indent/
│ │ └── trumbowyg.indent.js
│ ├── insertaudio/
│ │ └── trumbowyg.insertaudio.js
│ ├── lineheight/
│ │ └── trumbowyg.lineheight.js
│ ├── mathml/
│ │ ├── trumbowyg.mathml.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.mathml.scss
│ ├── mention/
│ │ ├── trumbowyg.mention.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.mention.scss
│ ├── noembed/
│ │ └── trumbowyg.noembed.js
│ ├── pasteembed/
│ │ └── trumbowyg.pasteembed.js
│ ├── pasteimage/
│ │ └── trumbowyg.pasteimage.js
│ ├── preformatted/
│ │ └── trumbowyg.preformatted.js
│ ├── resizimg/
│ │ └── trumbowyg.resizimg.js
│ ├── ruby/
│ │ └── trumbowyg.ruby.js
│ ├── specialchars/
│ │ ├── trumbowyg.specialchars.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.specialchars.scss
│ ├── speechrecognition/
│ │ └── trumbowyg.speechrecognition.js
│ ├── table/
│ │ ├── trumbowyg.table.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.table.scss
│ ├── template/
│ │ └── trumbowyg.template.js
│ ├── tenor/
│ │ ├── trumbowyg.tenor.js
│ │ └── ui/
│ │ └── sass/
│ │ └── trumbowyg.tenor.scss
│ └── upload/
│ └── trumbowyg.upload.js
└── src/
├── langs/
│ ├── ar.js
│ ├── az.js
│ ├── bg.js
│ ├── bn.js
│ ├── by.js
│ ├── ca.js
│ ├── cs.js
│ ├── da.js
│ ├── de.js
│ ├── el.js
│ ├── en.js
│ ├── es.js
│ ├── es_ar.js
│ ├── et.js
│ ├── fa.js
│ ├── fi.js
│ ├── fr.js
│ ├── he.js
│ ├── hr.js
│ ├── hu.js
│ ├── id.js
│ ├── it.js
│ ├── ja.js
│ ├── ko.js
│ ├── lt.js
│ ├── mn.js
│ ├── my.js
│ ├── nb.js
│ ├── nl.js
│ ├── ph.js
│ ├── pl.js
│ ├── pt.js
│ ├── pt_br.js
│ ├── ro.js
│ ├── rs.js
│ ├── rs_latin.js
│ ├── ru.js
│ ├── sk.js
│ ├── sl.js
│ ├── sq.js
│ ├── sv.js
│ ├── th.js
│ ├── tr.js
│ ├── ua.js
│ ├── vi.js
│ ├── zh_cn.js
│ └── zh_tw.js
├── trumbowyg.js
└── ui/
└── sass/
└── trumbowyg.scss
SYMBOL INDEX (132 symbols across 21 files)
FILE: docs/demos/js/highlight.js
function n (line 1) | function n(e){return e.replace(/&/gm,"&").replace(/</gm,"<").repl...
function t (line 1) | function t(e){return e.nodeName.toLowerCase()}
function r (line 1) | function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}
function a (line 1) | function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.classNam...
function o (line 1) | function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[...
function i (line 1) | function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o...
function c (line 1) | function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[...
function u (line 1) | function u(e){function n(e){return e&&e.source||e}function t(t,r){return...
function s (line 1) | function s(e,t,a,o){function i(e,n){for(var t=0;t<n.c.length;t++)if(r(n....
function l (line 1) | function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},...
function f (line 1) | function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,fun...
function g (line 1) | function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs...
function p (line 1) | function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t...
function d (line 1) | function d(e){E=o(E,e)}
function h (line 1) | function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("...
function v (line 1) | function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener(...
function b (line 1) | function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e)...
function m (line 1) | function m(){return Object.keys(R)}
function N (line 1) | function N(e){return R[e]||R[x[e]]}
FILE: docs/demos/js/loader.js
function loadTag (line 6) | function loadTag(tagToInsert, container, comment, tagForDocumentation) {
function loadStyle (line 24) | function loadStyle(stylePath, comment) {
function loadScript (line 35) | function loadScript(scriptPath, comment) {
FILE: docs/js/main.js
function escapeHTML (line 20) | function escapeHTML(value) {
function tag (line 60) | function tag(node) {
function nodeStream (line 67) | function nodeStream(node) {
function mergeStreams (line 103) | function mergeStreams(original, highlighted, value) {
function setStarsCount (line 276) | function setStarsCount(stars) {
FILE: docs/js/vendor/highlight.js
function t (line 6) | function t(e){
class n (line 12) | class n{constructor(e){
method constructor (line 12) | constructor(e){
method ignoreMatch (line 14) | ignoreMatch(){this.isMatchIgnored=!0}
function i (line 14) | function i(e){
function r (line 16) | function r(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t]
class o (line 18) | class o{constructor(e,t){
method constructor (line 18) | constructor(e,t){
method addText (line 19) | addText(e){
method openNode (line 20) | openNode(e){if(!s(e))return;let t=""
method closeNode (line 25) | closeNode(e){s(e)&&(this.buffer+="</span>")}
method value (line 25) | value(){return this.buffer}
method span (line 25) | span(e){
class c (line 27) | class c{constructor(){
method constructor (line 27) | constructor(){
method top (line 28) | get top(){
method root (line 29) | get root(){return this.rootNode}
method add (line 29) | add(e){
method openNode (line 30) | openNode(e){const t=a({scope:e})
method closeNode (line 31) | closeNode(){
method closeAllNodes (line 32) | closeAllNodes(){
method toJSON (line 33) | toJSON(){return JSON.stringify(this.rootNode,null,4)}
method walk (line 34) | walk(e){return this.constructor._walk(e,this.rootNode)}
method _walk (line 34) | static _walk(e,t){
method _collapse (line 36) | static _collapse(e){
class l (line 38) | class l extends c{constructor(e){super(),this.options=e}
method constructor (line 38) | constructor(e){super(),this.options=e}
method addKeyword (line 39) | addKeyword(e,t){""!==e&&(this.openNode(t),this.addText(e),this.closeNo...
method addText (line 40) | addText(e){""!==e&&this.add(e)}
method addSublanguage (line 40) | addSublanguage(e,t){const n=e.root
method toHTML (line 41) | toHTML(){
method finalize (line 42) | finalize(){return!0}
function g (line 42) | function g(e){
function d (line 43) | function d(e){return p("(?=",e,")")}
function u (line 44) | function u(e){return p("(?:",e,")*")}
function h (line 44) | function h(e){return p("(?:",e,")?")}
function p (line 45) | function p(...e){return e.map((e=>g(e))).join("")}
function f (line 45) | function f(...e){const t=(e=>{
function b (line 49) | function b(e){return RegExp(e.toString()+"|").exec("").length-1}
function E (line 51) | function E(e,{joinWith:t}){let n=0;return e.map((e=>{n+=1;const t=n
function I (line 83) | function I(e,t){
function T (line 84) | function T(e,t){
function L (line 85) | function L(e,t){
function B (line 88) | function B(e,t){
function D (line 89) | function D(e,t){
function H (line 92) | function H(e,t){
function $ (line 100) | function $(e,t,n="keyword"){const i=Object.create(null)
function U (line 104) | function U(e,t){
function Z (line 108) | function Z(e,t,{key:n}){let i=0;const r=e[n],s={},o={}
function F (line 110) | function F(e){(e=>{
function V (line 123) | function V(e){
function q (line 170) | function q(e){
class J (line 171) | class J extends Error{
method constructor (line 172) | constructor(e,t){super(e),this.name="HTMLInjectionError",this.html=t}
function b (line 179) | function b(e){
function m (line 180) | function m(e,t,n){let i="",r=""
function E (line 186) | function E(e,t,r,s){
function x (line 249) | function x(e,t){t=t||g.languages||Object.keys(i);const n=(e=>{
function w (line 256) | function w(e){let t=null;const n=(e=>{
function _ (line 273) | function _(){
function O (line 275) | function O(e){return e=(e||"").toLowerCase(),i[e]||i[r[e]]}
function v (line 276) | function v(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
function N (line 277) | function N(e){const t=O(e)
function k (line 278) | function k(e,t){const n=e;s.forEach((e=>{
function o (line 417) | function o(o){const l=o.regex,d=e,b={begin:/<[A-Za-z0-9\\._:-]+/,
method constructor (line 18) | constructor(e,t){
method addText (line 19) | addText(e){
method openNode (line 20) | openNode(e){if(!s(e))return;let t=""
method closeNode (line 25) | closeNode(e){s(e)&&(this.buffer+="</span>")}
method value (line 25) | value(){return this.buffer}
method span (line 25) | span(e){
FILE: plugins/cleanpaste/trumbowyg.cleanpaste.js
function checkValidTags (line 16) | function checkValidTags(snippet) {
function cleanIt (line 41) | function cleanIt(html) {
FILE: plugins/colors/trumbowyg.colors.js
function hex (line 133) | function hex(x) {
function colorToHex (line 137) | function colorToHex(rgb) {
function colorTagHandler (line 151) | function colorTagHandler(element, trumbowyg) {
function buildDropdown (line 227) | function buildDropdown(fn, trumbowyg) {
FILE: plugins/emoji/trumbowyg.emoji.js
function buildDropdown (line 1449) | function buildDropdown(trumbowyg) {
FILE: plugins/fontfamily/trumbowyg.fontfamily.js
function buildDropdown (line 100) | function buildDropdown(trumbowyg) {
FILE: plugins/fontsize/trumbowyg.fontsize.js
function setFontSize (line 323) | function setFontSize(trumbowyg, size) {
function buildDropdown (line 353) | function buildDropdown(trumbowyg) {
FILE: plugins/giphy/trumbowyg.giphy.js
function trumbowygThrottle (line 47) | function trumbowygThrottle(callback, delay) {
function renderGifs (line 70) | function renderGifs(response, $giphyModal, trumbowyg, mustEmpty) {
FILE: plugins/highlight/trumbowyg.highlight.js
function highlightIt (line 183) | function highlightIt(text, language, lineHighlight) {
function escapeHtml (line 191) | function escapeHtml(html) {
function buildHighlightOptions (line 195) | function buildHighlightOptions(trumbowyg) {
function buildLineHighlightFieldIfEnabled (line 218) | function buildLineHighlightFieldIfEnabled(trumbowyg) {
function buildButtonDef (line 230) | function buildButtonDef(trumbowyg) {
FILE: plugins/lineheight/trumbowyg.lineheight.js
function buildDropdown (line 183) | function buildDropdown(trumbowyg) {
function getSelectionParentElement (line 209) | function getSelectionParentElement() {
FILE: plugins/mention/trumbowyg.mention.js
function buildDropdown (line 91) | function buildDropdown(items, trumbowyg) {
function formatDropdownItem (line 120) | function formatDropdownItem(item) {
function formatResult (line 131) | function formatResult(item) {
FILE: plugins/preformatted/trumbowyg.preformatted.js
function getSelectionParentElement (line 102) | function getSelectionParentElement() {
function strip (line 125) | function strip(html) {
function unwrapCode (line 136) | function unwrapCode() {
FILE: plugins/resizimg/trumbowyg.resizimg.js
function preventDefault (line 9) | function preventDefault(e) {
function initResizable (line 251) | function initResizable() {
FILE: plugins/specialchars/trumbowyg.specialchars.js
function buildDropdown (line 76) | function buildDropdown(trumbowyg) {
FILE: plugins/speechrecognition/trumbowyg.speechrecognition.js
function buildButtonDef (line 20) | function buildButtonDef(trumbowyg) {
function isSupported (line 91) | function isSupported() {
FILE: plugins/table/trumbowyg.table.js
function trumbowygThrottle (line 16) | function trumbowygThrottle(callback, delay) {
function ucFirst (line 95) | function ucFirst(value) {
function hex (line 99) | function hex(x) {
function colorToHex (line 103) | function colorToHex(rgb) {
FILE: plugins/template/trumbowyg.template.js
function templateSelector (line 79) | function templateSelector(trumbowyg) {
FILE: plugins/tenor/trumbowyg.tenor.js
function trumbowygThrottle (line 49) | function trumbowygThrottle(callback, delay) {
function registerGifClickEventInModal (line 71) | function registerGifClickEventInModal(trumbowyg, $tenorModal) {
function renderGifs (line 91) | function renderGifs(response, $tenorModal, trumbowyg, mustEmpty) {
FILE: plugins/upload/trumbowyg.upload.js
function getDeep (line 30) | function getDeep(object, propertyParts) {
function runXhrRequest (line 46) | function runXhrRequest(url, data, options) {
Condensed preview — 166 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,034K chars).
[
{
"path": ".bowerrc",
"chars": 41,
"preview": "{\n \"directory\": \"bower_components/\"\n}\n"
},
{
"path": ".editorconfig",
"chars": 643,
"preview": "# EditorConfig: https://EditorConfig.org\n# Notepad++ Plugin: https://github.com/editorconfig/editorconfig-notepad-plus-p"
},
{
"path": ".gitattributes",
"chars": 150,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# SCSS and JS files must always use LF for tools to w"
},
{
"path": ".github/FUNDING.yml",
"chars": 82,
"preview": "github: Alex-D\npatreon: AlexandreDemode\ncustom: https://paypal.me/demodealexandre\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 391,
"preview": "<!--- Provide a general summary of the issue in the Title above -->\n\n\n### Description\n<!--\nProvide relevant details acco"
},
{
"path": ".github/workflows/lint.yml",
"chars": 430,
"preview": "name: Lint\n\non:\n push:\n\njobs:\n lint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - "
},
{
"path": ".github/workflows/website.yml",
"chars": 927,
"preview": "name: Deploy Website\n\non:\n push:\n branches:\n - main\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n "
},
{
"path": ".gitignore",
"chars": 288,
"preview": "# Others\n~$*\n/.sass-cache\n/uploaded-files\n/node_modules\n/bower_components\n/dist\n/src/ui/sass/_sprite*\n/plugins/**/ui/sas"
},
{
"path": ".jshintrc",
"chars": 552,
"preview": "{\n \"bitwise\": true,\n \"camelcase\": true,\n \"esnext\": true,\n \"curly\": true,\n \"eqeqeq\": true,\n \"forin\": tr"
},
{
"path": ".npmignore",
"chars": 155,
"preview": "Gulpfile.js\nbanner.jpg\nbower.json\nsrc\ndocs\nbower_components\n.gitattributes\n.gitignore\n.jshintrc\n.github\n.idea\n.bowerrc\ns"
},
{
"path": "BACKERS.md",
"chars": 1453,
"preview": "<h1 align=\"center\">Sponsors & Backers</h1>\n\nTrumbowyg is an MIT-licensed open source project and completely free to "
},
{
"path": "CONTRIBUTORS.md",
"chars": 2469,
"preview": "# Contributors\n\nTrumbowyg is the result of many people who made translations or the code better.\n\nSpecial thanks to [Adr"
},
{
"path": "LICENSE",
"chars": 1097,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2012-2016 Alexandre Demode (Alex-D)\n\nPermission is hereby granted, free of charge, "
},
{
"path": "README.md",
"chars": 3570,
"preview": "<p align=\"center\">\n <a href=\"http://alex-d.github.io/Trumbowyg/\"><img src=\"banner.jpg\" alt=\"\" /></a>\n</p>\n\n<p align=\"ce"
},
{
"path": "bower.json",
"chars": 736,
"preview": "{\n \"name\": \"trumbowyg\",\n \"version\": \"2.28.0\",\n \"homepage\": \"https://github.com/Alex-D/Trumbowyg\",\n \"authors\": [\n "
},
{
"path": "docs/.gitignore",
"chars": 69,
"preview": "/node_modules/\n/bower_components\n/dist\n/src\n/plugins\nuploaded-files/\n"
},
{
"path": "docs/.jshintrc",
"chars": 593,
"preview": "{\n \"bitwise\": true,\n \"camelcase\": true,\n \"esnext\": true,\n \"curly\": true,\n \"eqeqeq\": true,\n \"forin\": tr"
},
{
"path": "docs/css/main.css",
"chars": 41218,
"preview": "/*! normalize.css v1.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup"
},
{
"path": "docs/demos/core/dark-theme.html",
"chars": 3439,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Trumbowyg by Alex-D</title>\n <link href"
},
{
"path": "docs/demos/core/default.html",
"chars": 2764,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Trumbowyg by Alex-D</title>\n <link href"
},
{
"path": "docs/demos/core/simple.html",
"chars": 2468,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Trumbowyg by Alex-D</title>\n <link href"
},
{
"path": "docs/demos/index.html",
"chars": 5947,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "docs/demos/js/highlight.js",
"chars": 9350,
"preview": "!function(e){\"undefined\"!=typeof exports?e(exports):(window.hljs=e({}),\"function\"==typeof define&&define.amd&&define([],"
},
{
"path": "docs/demos/js/loader.js",
"chars": 1502,
"preview": "var isOnline = window.location.hostname.indexOf('github.io') !== -1;\nvar baseURL = isOnline ? '//rawcdn.githack.com/Alex"
},
{
"path": "docs/demos/js/runExampleCode.js",
"chars": 364,
"preview": "(function ($) {\n 'use strict';\n\n $('.js-code-to-eval').each(function () {\n eval($(this).text()); // jshint "
},
{
"path": "docs/demos/plugins/allowtagsfrompaste.html",
"chars": 3378,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Allow tags from paste plugin | Trumbowyg<"
},
{
"path": "docs/demos/plugins/base64.html",
"chars": 4801,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Base64 plugin | Trumbowyg</title>\n <lin"
},
{
"path": "docs/demos/plugins/cleanpaste.html",
"chars": 2497,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Clean paste plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/colors.html",
"chars": 6501,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Colors plugin | Trumbowyg</title>\n <lin"
},
{
"path": "docs/demos/plugins/emoji.html",
"chars": 2632,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Emoji plugin | Trumbowyg</title>\n <link"
},
{
"path": "docs/demos/plugins/fontfamily.html",
"chars": 3524,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Font family plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/fontsize.html",
"chars": 3374,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Font size plugin | Trumbowyg</title>\n <"
},
{
"path": "docs/demos/plugins/giphy.html",
"chars": 2743,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Giphy plugin | Trumbowyg</title>\n <link"
},
{
"path": "docs/demos/plugins/highlight.html",
"chars": 3465,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Highlight plugin | Trumbowyg</title>\n <"
},
{
"path": "docs/demos/plugins/history.html",
"chars": 3123,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>History plugin | Trumbowyg by Alex-D</titl"
},
{
"path": "docs/demos/plugins/indent.html",
"chars": 3105,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Indent plugin | Trumbowyg</title>\n <lin"
},
{
"path": "docs/demos/plugins/insertaudio.html",
"chars": 3140,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Insert audio plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/lineheight.html",
"chars": 3360,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Line height plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/mathml.html",
"chars": 3401,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>MathML plugin | Trumbowyg</title>\n <lin"
},
{
"path": "docs/demos/plugins/mention.html",
"chars": 3548,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Mention plugin | Trumbowyg</title>\n <li"
},
{
"path": "docs/demos/plugins/noembed.html",
"chars": 5093,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Noembed plugin | Trumbowyg</title>\n <sc"
},
{
"path": "docs/demos/plugins/pasteembed.html",
"chars": 2966,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Paste embed plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/pasteimage.html",
"chars": 2546,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Paste image plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/preformatted.html",
"chars": 2701,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Preformatted plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/resizimg.html",
"chars": 3327,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Resizimg plugin | Trumbowyg</title>\n <l"
},
{
"path": "docs/demos/plugins/ruby.html",
"chars": 3015,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Ruby plugin | Trumbowyg</title>\n <link "
},
{
"path": "docs/demos/plugins/specialchars.html",
"chars": 3665,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Special chars plugin | Trumbowyg</title>\n "
},
{
"path": "docs/demos/plugins/speechrecognition.html",
"chars": 2876,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Speech recognition plugin | Trumbowyg</tit"
},
{
"path": "docs/demos/plugins/table.html",
"chars": 8990,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Table plugin | Trumbowyg</title>\n <link"
},
{
"path": "docs/demos/plugins/template.html",
"chars": 3386,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Template plugin | Trumbowyg by Alex-D</tit"
},
{
"path": "docs/demos/plugins/tenor.html",
"chars": 2750,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Tenor plugin | Trumbowyg</title>\n <link"
},
{
"path": "docs/demos/plugins/upload.html",
"chars": 5460,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Upload plugin | Trumbowyg by Alex-D</title"
},
{
"path": "docs/documentation/core/index.html",
"chars": 11896,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "docs/documentation/index.html",
"chars": 52838,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "docs/documentation/plugins/index.html",
"chars": 79438,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "docs/gulpfile.mjs",
"chars": 1180,
"preview": "// jshint node:true\n'use strict';\n\nimport gulp from 'gulp';\nimport gulpAutoprefixer from 'gulp-autoprefixer';\nimport gul"
},
{
"path": "docs/humans.txt",
"chars": 185,
"preview": "# humanstxt.org/\n# The humans responsible & technology colophon\n\n# TEAM\n\n Alex-D -- Main developer -- @AlexandreDemod"
},
{
"path": "docs/index.html",
"chars": 55323,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "docs/js/main.js",
"chars": 11138,
"preview": "'use strict';\n\nif (window.location.href.indexOf('index.html') > 0) {\n window.location = window.location.href.replace("
},
{
"path": "docs/js/vendor/highlight.js",
"chars": 64874,
"preview": "/*!\n Highlight.js v11.7.0 (git: 82688fad18)\n (c) 2006-2022 undefined and other contributors\n License: BSD-3-Clause\n *"
},
{
"path": "docs/package.json",
"chars": 334,
"preview": "{\n \"name\": \"trumbowyg-github-page\",\n \"private\": true,\n \"author\": {\n \"name\": \"Alexandre Demode (Alex-D)\",\n \"emai"
},
{
"path": "docs/robots.txt",
"chars": 32,
"preview": "# robotstxt.org/\n\nUser-agent: *\n"
},
{
"path": "docs/scss/_base.scss",
"chars": 2719,
"preview": "@use \"variables\";\n\n/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */\n\nhtml,\nbutton,\ninput,\nselect,\ntextar"
},
{
"path": "docs/scss/_buttons.scss",
"chars": 823,
"preview": "@use \"variables\";\n\n.button {\n display: inline-block;\n position: relative;\n width: 250px;\n border: 2px solid "
},
{
"path": "docs/scss/_documentation.scss",
"chars": 11034,
"preview": "@use \"variables\";\n\n$added-color: #5ecb0e;\n$deprecated-color: #ff9a4d;\n\n$sidebar-width: 22%;\n$beer-height: 70px;\n\n.docume"
},
{
"path": "docs/scss/_donate.scss",
"chars": 1146,
"preview": "@use \"variables\";\n\n.donate-container {\n position: relative;\n max-width: 800px;\n margin: 0 auto;\n\n .donate-de"
},
{
"path": "docs/scss/_font.scss",
"chars": 957,
"preview": "// Panton Light\n@font-face {\n font-family: 'Panton';\n src: url('../fonts/panton.woff2') format('woff2');\n font-"
},
{
"path": "docs/scss/_footer.scss",
"chars": 708,
"preview": "@use \"variables\";\n\n.footer {\n margin-top: 40px;\n text-align: center;\n color: variables.$white;\n background: "
},
{
"path": "docs/scss/_get-started.scss",
"chars": 2042,
"preview": "@use \"variables\";\n\n.installation-first-step {\n height: 400px;\n color: variables.$text-color;\n text-align: cente"
},
{
"path": "docs/scss/_header.scss",
"chars": 7441,
"preview": "@use \"variables\";\n\n.header-landing {\n position: relative;\n background: variables.$primary-color linear-gradient(to"
},
{
"path": "docs/scss/_highlightjs-github.scss",
"chars": 1689,
"preview": "/*!\n Theme: GitHub\n Description: Light theme as seen on github.com\n Author: github.com\n Maintainer: @Hirse\n "
},
{
"path": "docs/scss/_introduction.scss",
"chars": 841,
"preview": "@use \"variables\";\n\n.section-introduction {\n margin-top: 50px;\n padding-bottom: 70px;\n\n .introduction-section {\n"
},
{
"path": "docs/scss/_languages.scss",
"chars": 2774,
"preview": "@use \"variables\";\n\n.languages {\n p {\n text-align: center;\n margin: 0 0 5px;\n font-size: 18px;\n "
},
{
"path": "docs/scss/_normalize.scss",
"chars": 9558,
"preview": "/*! normalize.css v1.1.3 | MIT License | git.io/normalize */\n\n/* ======================================================="
},
{
"path": "docs/scss/_plugins-packages.scss",
"chars": 1271,
"preview": "@use \"variables\";\n\n.plugins-packages {\n .wrapper {\n display: flex;\n }\n\n .col-plugins {\n flex: 1.0"
},
{
"path": "docs/scss/_section.scss",
"chars": 902,
"preview": "@use \"variables\";\n\n.section {\n position: relative;\n padding-bottom: 100px;\n\n &-primary {\n color: variabl"
},
{
"path": "docs/scss/_variables.scss",
"chars": 274,
"preview": "$primary-color: #ff974a;\n$primary-color-light: #ffb864;\n$primary-color-dark: #b65207;\n$secondary-color: #f48d40;\n$text-c"
},
{
"path": "docs/scss/main.scss",
"chars": 273,
"preview": "@use \"normalize\";\n@use \"variables\";\n@use \"font\";\n@use \"base\";\n@use \"buttons\";\n@use \"header\";\n@use \"section\";\n@use \"intro"
},
{
"path": "gulpfile.mjs",
"chars": 6580,
"preview": "// jshint node:true\n'use strict';\n\nimport fs from 'fs';\n\nimport gulp from 'gulp';\nimport gulpAutoprefixer from 'gulp-aut"
},
{
"path": "index.html",
"chars": 17432,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Trumbowyg by Alex-D</title>\n <base href"
},
{
"path": "package.json",
"chars": 1521,
"preview": "{\n \"name\": \"trumbowyg\",\n \"title\": \"Trumbowyg\",\n \"description\": \"A lightweight WYSIWYG editor\",\n \"version\": \"2.31.0\","
},
{
"path": "plugins/allowtagsfrompaste/trumbowyg.allowtagsfrompaste.js",
"chars": 4464,
"preview": "/* ===========================================================\n * trumbowyg.allowTagsFromPaste.js v1.0.2\n * It cleans ta"
},
{
"path": "plugins/base64/trumbowyg.base64.js",
"chars": 7709,
"preview": "/* ===========================================================\n * trumbowyg.base64.js v1.0\n * Base64 plugin for Trumbowy"
},
{
"path": "plugins/cleanpaste/trumbowyg.cleanpaste.js",
"chars": 5821,
"preview": "/* ===========================================================\n * trumbowyg.cleanpaste.js v1.0\n * Font Clean paste plugi"
},
{
"path": "plugins/colors/trumbowyg.colors.js",
"chars": 11041,
"preview": "/* ===========================================================\n * trumbowyg.colors.js v1.2\n * Colors picker plugin for T"
},
{
"path": "plugins/colors/ui/sass/trumbowyg.colors.scss",
"chars": 1455,
"preview": ".trumbowyg-dropdown-foreColor:not(.trumbowyg-dropdown--color-list),\n.trumbowyg-dropdown-backColor:not(.trumbowyg-dropdow"
},
{
"path": "plugins/emoji/trumbowyg.emoji.js",
"chars": 36352,
"preview": "/* ===========================================================\n * trumbowyg.emoji.js v0.1\n * Emoji picker plugin for Tru"
},
{
"path": "plugins/emoji/ui/sass/trumbowyg.emoji.scss",
"chars": 800,
"preview": ".trumbowyg-dropdown-emoji {\n width: 265px;\n padding: 7px 0 7px 5px;\n}\n\n.trumbowyg-dropdown-emoji svg {\n display"
},
{
"path": "plugins/fontfamily/trumbowyg.fontfamily.js",
"chars": 3660,
"preview": "(function ($) {\n 'use strict';\n\n $.extend(true, $.trumbowyg, {\n langs: {\n // jshint camelcase:fa"
},
{
"path": "plugins/fontsize/trumbowyg.fontsize.js",
"chars": 13460,
"preview": "(function ($) {\n 'use strict';\n\n $.extend(true, $.trumbowyg, {\n langs: {\n // jshint camelcase:fa"
},
{
"path": "plugins/giphy/trumbowyg.giphy.js",
"chars": 14116,
"preview": "/* global AbortController: true */\n(function ($) {\n 'use strict';\n\n $.extend(true, $.trumbowyg, {\n langs: {"
},
{
"path": "plugins/giphy/ui/sass/trumbowyg.giphy.scss",
"chars": 1766,
"preview": ".trumbowyg-giphy-button svg {\n transform: scale(1.22);\n}\n\n.trumbowyg-giphy-search {\n display: block;\n width: 80"
},
{
"path": "plugins/highlight/trumbowyg.highlight.js",
"chars": 11889,
"preview": "/* globals Prism */\n(function ($, Prism) {\n 'use strict';\n\n // My plugin default options\n var defaultOptions = "
},
{
"path": "plugins/highlight/ui/sass/trumbowyg.highlight.scss",
"chars": 264,
"preview": ".trumbowyg-highlight-form-group {\n margin: 15px 10px;\n\n .trumbowyg-highlight-form-control {\n width: 100%;\n "
},
{
"path": "plugins/history/trumbowyg.history.js",
"chars": 7971,
"preview": "/*/* ===========================================================\n * trumbowyg.history.js v1.0\n * history plugin for Trum"
},
{
"path": "plugins/indent/trumbowyg.indent.js",
"chars": 2750,
"preview": "/* ===========================================================\n * trumbowyg.indent.js v1.0\n * Indent or Outdent plugin f"
},
{
"path": "plugins/insertaudio/trumbowyg.insertaudio.js",
"chars": 3801,
"preview": "/*/* ===========================================================\n * trumbowyg.insertaudio.js v1.0\n * InsertAudio plugin"
},
{
"path": "plugins/lineheight/trumbowyg.lineheight.js",
"chars": 6875,
"preview": "(function ($) {\n 'use strict';\n\n $.extend(true, $.trumbowyg, {\n langs: {\n // jshint camelcase:fa"
},
{
"path": "plugins/mathml/trumbowyg.mathml.js",
"chars": 6119,
"preview": "/* ===========================================================\n * trumbowyg.mathMl.js v1.0\n * MathML plugin for Trumbowy"
},
{
"path": "plugins/mathml/ui/sass/trumbowyg.mathml.scss",
"chars": 575,
"preview": "[formulas] {\n position: relative;\n display: inline-block;\n pointer-events: none;\n\n &[inline=\"false\"] {\n "
},
{
"path": "plugins/mention/trumbowyg.mention.js",
"chars": 3317,
"preview": "/* ===========================================================\n * trumbowyg.mention.js v0.1\n * Mention plugin for Trumbo"
},
{
"path": "plugins/mention/ui/sass/trumbowyg.mention.scss",
"chars": 466,
"preview": ".trumbowyg-dropdown-mention {\n button {\n position: relative;\n white-space: nowrap;\n\n &:after {\n "
},
{
"path": "plugins/noembed/trumbowyg.noembed.js",
"chars": 5754,
"preview": "/* ===========================================================\n * trumbowyg.noembed.js v1.0\n * noEmbed plugin for Trumbo"
},
{
"path": "plugins/pasteembed/trumbowyg.pasteembed.js",
"chars": 3222,
"preview": "/* ===========================================================\n * trumbowyg.pasteembed.js v1.0\n * Url paste to iframe wi"
},
{
"path": "plugins/pasteimage/trumbowyg.pasteimage.js",
"chars": 1926,
"preview": "/* ===========================================================\n * trumbowyg.pasteimage.js v1.0\n * Basic base64 paste plu"
},
{
"path": "plugins/preformatted/trumbowyg.preformatted.js",
"chars": 4904,
"preview": "/* ===========================================================\n * trumbowyg.preformatted.js v1.0\n * Preformatted plugin "
},
{
"path": "plugins/resizimg/trumbowyg.resizimg.js",
"chars": 11752,
"preview": "; (function ($) {\n 'use strict';\n\n var defaultOptions = {\n minSize: 32,\n step: 4\n };\n\n functio"
},
{
"path": "plugins/ruby/trumbowyg.ruby.js",
"chars": 4423,
"preview": "/* ===========================================================\n * trumbowyg.ruby.js v1.0\n * Ruby text plugin for Trumbow"
},
{
"path": "plugins/specialchars/trumbowyg.specialchars.js",
"chars": 3231,
"preview": "/* ===========================================================\n * trumbowyg.specialchars.js v0.99\n * Unicode characters "
},
{
"path": "plugins/specialchars/ui/sass/trumbowyg.specialchars.scss",
"chars": 901,
"preview": ".trumbowyg-symbol-\\ -dropdown-button {\n display: none !important;\n}\n.trumbowyg-symbol-\\ -dropdown-button + bu"
},
{
"path": "plugins/speechrecognition/trumbowyg.speechrecognition.js",
"chars": 6300,
"preview": "/* ===========================================================\n * trumbowyg.speechrecognition.js v1.0\n * Speech recognit"
},
{
"path": "plugins/table/trumbowyg.table.js",
"chars": 80615,
"preview": "/* ===========================================================\n * trumbowyg.table.js v3.0\n * Table plugin for Trumbowyg\n"
},
{
"path": "plugins/table/ui/sass/trumbowyg.table.scss",
"chars": 3549,
"preview": ".trumbowyg-dropdown-table {\n max-height: unset;\n\n table {\n all: unset;\n display: inline-block;\n "
},
{
"path": "plugins/template/trumbowyg.template.js",
"chars": 2482,
"preview": "(function ($) {\n 'use strict';\n\n // Adds the language variables\n $.extend(true, $.trumbowyg, {\n langs: {"
},
{
"path": "plugins/tenor/trumbowyg.tenor.js",
"chars": 15972,
"preview": "// adapted from giphy plugin\n/* global AbortController: true */\n(function ($) {\n 'use strict';\n\n $.extend(true, $."
},
{
"path": "plugins/tenor/ui/sass/trumbowyg.tenor.scss",
"chars": 1960,
"preview": "// Adapted from giphy plugin\n\n.trumbowyg-tenor-button svg {\n transform: scale(1.22);\n}\n\n.trumbowyg-tenor-search {\n "
},
{
"path": "plugins/upload/trumbowyg.upload.js",
"chars": 13364,
"preview": "/* ===========================================================\n * trumbowyg.upload.js v1.2\n * Upload plugin for Trumbowy"
},
{
"path": "src/langs/ar.js",
"chars": 1414,
"preview": "/* ===========================================================\n * ar.js\n * Arabic translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/az.js",
"chars": 1390,
"preview": "/* ===========================================================\n * az.js\n * Azerbaijani translation for Trumbowyg\n * http"
},
{
"path": "src/langs/bg.js",
"chars": 1232,
"preview": "/* ===========================================================\n * bg.js\n * Bulgarian translation for Trumbowyg\n * http:/"
},
{
"path": "src/langs/bn.js",
"chars": 1370,
"preview": "/* ===========================================================\n * bn.js\n * Bangla translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/by.js",
"chars": 1378,
"preview": "/* ===========================================================\n * by.js\n * Belarusian translation for Trumbowyg\n * http:"
},
{
"path": "src/langs/ca.js",
"chars": 1663,
"preview": "/* ===========================================================\n * ca.js\n * Catalan translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/cs.js",
"chars": 1406,
"preview": "/* ===========================================================\n * cs.js\n * Czech translation for Trumbowyg\n * http://ale"
},
{
"path": "src/langs/da.js",
"chars": 1409,
"preview": "/* ===========================================================\n * da.js\n * Danish translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/de.js",
"chars": 1555,
"preview": "/* ===========================================================\n * de.js\n * German translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/el.js",
"chars": 1506,
"preview": "/* ===========================================================\n * el.js\n * Greek translation for Trumbowyg\n * http://ale"
},
{
"path": "src/langs/en.js",
"chars": 422,
"preview": "/* ===========================================================\n * en.js\n * English translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/es.js",
"chars": 1420,
"preview": "/* ===========================================================\n * es.js\n * Spanish translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/es_ar.js",
"chars": 1315,
"preview": "/* ===========================================================\n * es_ar.js\n * Spanish (Argentina) translation for Trumbo"
},
{
"path": "src/langs/et.js",
"chars": 1445,
"preview": "/* ===========================================================\n * et.js\n * Estonian translation for Trumbowyg\n * http://"
},
{
"path": "src/langs/fa.js",
"chars": 1257,
"preview": "/* ===========================================================\n * fa.js\n * Persian translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/fi.js",
"chars": 1286,
"preview": "/* ===========================================================\n * fi.js\n * Finnish translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/fr.js",
"chars": 1608,
"preview": "/* ===========================================================\n * fr.js\n * French translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/he.js",
"chars": 1178,
"preview": "/* ===========================================================\n * he.js\n * Hebrew translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/hr.js",
"chars": 1277,
"preview": "/* ===========================================================\n * hr.js\n * Croatian translation for Trumbowyg\n * https:/"
},
{
"path": "src/langs/hu.js",
"chars": 1354,
"preview": "/* ===========================================================\n * hu.js\n * Hungarian translation for Trumbowyg\n * http:/"
},
{
"path": "src/langs/id.js",
"chars": 1339,
"preview": "/* ===========================================================\n * id.js\n * Indonesian translation for Trumbowyg\n * http:"
},
{
"path": "src/langs/it.js",
"chars": 1400,
"preview": "/* ===========================================================\n * it.js\n * Italian translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/ja.js",
"chars": 1199,
"preview": "/* ===========================================================\n * ja.js\n * Japanese translation for Trumbowyg\n * http://"
},
{
"path": "src/langs/ko.js",
"chars": 1300,
"preview": "/* ===========================================================\n * ko.js\n * Korean translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/lt.js",
"chars": 1349,
"preview": "/* ===========================================================\n * lt.js\n * Lithuanian translation for Trumbowyg\n * http:"
},
{
"path": "src/langs/mn.js",
"chars": 1364,
"preview": "/* ===========================================================\n * mn.js\n * Mongolian translation for Trumbowyg\n * http:/"
},
{
"path": "src/langs/my.js",
"chars": 1240,
"preview": "/* ===========================================================\n * my.js\n * Malaysian translation for Trumbowyg\n * http:/"
},
{
"path": "src/langs/nb.js",
"chars": 1599,
"preview": "/* ===========================================================\n * nb.js\n * Norwegian Bokmål translation for Trumbowyg\n *"
},
{
"path": "src/langs/nl.js",
"chars": 1381,
"preview": "/* ===========================================================\n * nl.js\n * Dutch translation for Trumbowyg\n * http://ale"
},
{
"path": "src/langs/ph.js",
"chars": 1251,
"preview": "/* ===========================================================\n * ph.js\n * Filipino translation for Trumbowyg\n * http://"
},
{
"path": "src/langs/pl.js",
"chars": 1254,
"preview": "/* ===========================================================\n * pl.js\n * Polish translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/pt.js",
"chars": 1516,
"preview": "/* ===========================================================\n * pt.js\n * Portuguese translation for Trumbowyg\n * http:"
},
{
"path": "src/langs/pt_br.js",
"chars": 1512,
"preview": "/* ===========================================================\n * pt_br.js\n * Portuguese Brazilian translation for Trumb"
},
{
"path": "src/langs/ro.js",
"chars": 1392,
"preview": "/* ===========================================================\n * ro.js\n * Romanian translation for Trumbowyg\n * http://"
},
{
"path": "src/langs/rs.js",
"chars": 1252,
"preview": "/* ===========================================================\n * rs.js\n * Serbian (Cyrlic) translation for Trumbowyg\n *"
},
{
"path": "src/langs/rs_latin.js",
"chars": 1297,
"preview": "/* ===========================================================\n * rs_latin.js\n * Serbian (Latin) translation for Trumbow"
},
{
"path": "src/langs/ru.js",
"chars": 1385,
"preview": "/* ===========================================================\n * ru.js\n * Russian translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/sk.js",
"chars": 1241,
"preview": "/* ===========================================================\n * sk.js\n * Slovak translation for Trumbowyg\n * http://al"
},
{
"path": "src/langs/sl.js",
"chars": 1416,
"preview": "/* ===========================================================\n * sl.js\n * Slovenian translation for Trumbowyg\n * http:/"
},
{
"path": "src/langs/sq.js",
"chars": 1396,
"preview": "/* ===========================================================\n * sq.js\n * Albanian translation for Trumbowyg\n * http://"
},
{
"path": "src/langs/sv.js",
"chars": 1320,
"preview": "/* ===========================================================\n * sv.js\n * Swedish translation for Trumbowyg\n * http://w"
},
{
"path": "src/langs/th.js",
"chars": 1156,
"preview": "/* ===========================================================\n * th.js\n * Thai translation for Trumbowyg\n * https://git"
},
{
"path": "src/langs/tr.js",
"chars": 1403,
"preview": "/* ===========================================================\n * tr.js\n * Turkish translation for Trumbowyg\n * http://a"
},
{
"path": "src/langs/ua.js",
"chars": 1241,
"preview": "/* ===========================================================\n * ua.js\n * Ukrainian translation for Trumbowyg\n * http:/"
},
{
"path": "src/langs/vi.js",
"chars": 1269,
"preview": "/* ===========================================================\n * vi.js\n * Vietnamese translation for Trumbowyg\n * http:"
},
{
"path": "src/langs/zh_cn.js",
"chars": 1092,
"preview": "/* ===========================================================\n * zh_cn.js\n * Simplified Chinese translation for Trumbow"
},
{
"path": "src/langs/zh_tw.js",
"chars": 1268,
"preview": "/* ===========================================================\n * zh_tw.js\n * Traditional Chinese translation for Trumbo"
},
{
"path": "src/trumbowyg.js",
"chars": 71630,
"preview": "jQuery.trumbowyg = {\n langs: {\n en: {\n viewHTML: 'View HTML',\n\n undo: 'Undo',\n "
},
{
"path": "src/ui/sass/trumbowyg.scss",
"chars": 21238,
"preview": "@use \"sass:color\";\n\n$button-size: 35px;\n$icon-size: 17px;\n$pane-spacing: 5px;\n\n$light-color: #ecf0f1;\n$light-background-"
}
]
About this extraction
This page contains the full source code of the Alex-D/Trumbowyg GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 166 files (964.7 KB), approximately 250.8k tokens, and a symbol index with 132 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.