szilagyig
/
citywebshop_cms


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185
							<!DOCTYPE html>
<html>
<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">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body class="documentation-body">
<svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;visibility: hidden;height: 0;width: 0;">
    <symbol id="trumbowyg-link" viewBox="0 0 72 72">
        <path d="M30.9 49.1l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9l-5.2-5.2c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L10.8 42c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7C38 50.5 38.6 46.3 37 43l-6.1 6.1zM38.5 22.7l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2-6.5 6.5c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1z"/>
        <path 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"/>
    </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">
                Documentation
            </h1>
            <nav class="documentation-menu">
                <a href="./">Docs</a> &bull;
                <a href="./plugins/">Plugins</a> &bull;
                <a href="./core/">Core</a> &bull;
                <a href="../demos/">Demos</a>
            </nav>
        </header>

        <aside class="documentation-summary">
            <ul>
                <li>
                    <a href="#get-started">Get started</a>
                    <ul>
                        <li><a href="#installation">Installation</a></li>
                        <li><a href="#basics">Basics</a></li>
                        <li><a href="#common-issues">Common issues</a></li>
                        <li><a href="#use-plugins">Use plugins</a></li>
                        <li><a href="./plugins/#create-your-own">Create a plugin</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#general">General</a>
                    <ul>
                        <li><a href="#prefix">Prefix</a></li>
                        <li><a href="#localization">Localization</a></li>
                        <li><a href="#custom-skin">Custom skin</a></li>
                        <li><a href="#svg-icons">SVG icons</a></li>
                        <li><a href="#placeholder">Placeholder</a></li>
                        <li><a href="#disabled">Disabled</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#basic-options">Basic Options</a>
                    <ul>
                        <li><a href="#button-pane">Button pane</a></li>
                        <li><a href="#hide-button-texts">Hide button texts</a></li>
                        <li><a href="#semantic">Semantic</a></li>
                        <li><a href="#reset-css">Reset CSS</a></li>
                        <li><a href="#remove-format-pasted">Remove format pasted</a></li>
                        <li><a href="#tags-to-remove">Tags to remove</a></li>
                        <li><a href="#tags-to-keep">Tags to keep</a></li>
                        <li><a href="#auto-grow">Auto grow</a></li>
                        <li><a href="#auto-grow-on-enter">Auto grow on enter</a></li>
                        <li><a href="#image-width-modal-edit">Image width modal edit</a></li>
                        <li><a href="#url-protocol">URL protocol</a></li>
                        <li><a href="#minimal-links">Minimal links</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#advanced-options">Advanced Options</a>
                    <ul>
                        <li><a href="#add-localization">Add a localization</a></li>
                        <li><a href="#custom-buttons">Custom buttons</a></li>
                        <li><a href="#custom-dropdowns">Custom dropdowns</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#api">API</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>
                        <li><a href="#destroy-editor">Destroy editor</a></li>
                        <li><a href="#events">Events</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="get-started" class="wrapper section">
        <h2 class="section-title">Get started</h2>

        <div class="feature">
            <h3 id="installation">Installation</h3>

            <div class="installation-first-step">
                <div class="installation-package-managers">
                    <div class="installation-col-title">
                        Via a package manager
                    </div>
                    <code>npm install trumbowyg</code>
                    <code>bower install trumbowyg</code>
                </div>
                <div class="installation-or">
                    or
                </div>
                <div class="installation-download">
                    <div class="installation-col-title">
                        Download the package
                    </div>
                    <a href="https://github.com/Alex-D/Trumbowyg/archive/master.zip" class="button button-primary">Download</a>
                </div>
            </div>

            <p>
                If you don't already do it, load jQuery at bottom of <code>&lt;body&gt;</code> like so:
            </p>
            <pre><code class="html">
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.2.1.min.js">&lt;\/script>')&lt;/script>
            </code></pre>
            <p class="note">
                Trumbowyg requires jQuery >= 1.8
            </p>

            <p>
                After these lines, you have to load Trumbowyg.
            </p>
            <pre><code class="html">
&lt;script src="node_modules/trumbowyg/dist/trumbowyg.min.js">&lt;/script>
            </code></pre>

            <p>
                Don't forget to load Trumbowyg CSS in the <code>&lt;head&gt;</code>, or load your own style for the
                editor.
            </p>
            <pre><code class="html">
&lt;link rel="stylesheet" href="node_modules/trumbowyg/dist/ui/trumbowyg.min.css">
            </code></pre>
        </div>


        <div class="feature">
            <h3 id="basics">Basics</h3>

            <p>
                This the minimal code to transform a simple div into the amazing WYSIWYG editor which is Trumbowyg.
            </p>
            <pre><code class="javascript">
$('#trumbowyg-demo').trumbowyg();
            </code></pre>
            <p>
                If you want to set options to Trumbowyg, add an object which contains your options as parameters.
            </p>
            <pre><code class="javascript">
$('#trumbowyg-demo').trumbowyg({
    btns: [['strong', 'em',], ['insertImage']],
    autogrow: true
});
            </code></pre>
        </div>

        <div class="feature">
            <h3 id="common-issues">Common issues</h3>

            <h4>SVG icons does not load</h4>

            <ul>
                <li>check if you are in HTTP(S) protocol;</li>
                <li>check if you do not have cross domain error (XHR request is used).</li>
            </ul>
            <p>
                If your problem is not solved by these tips, check the
                <a href="#svg-icons">SVG icons section</a>.
            </p>
        </div>

        <div class="feature">
            <h3 id="use-plugins">Use plugins</h3>

            <h4>Add a plugin to your page</h4>

            <p>
                Basically you need to add the plugin JS to your page, at the bottom of your <code>&lt;body></code>,
                <strong>after</strong> jQuery and Trumbowyg imports (in this order), but before your custom JS which
                initialize Trumbowyg:
            </p>
            <pre><code class="html">
&lt;-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.2.1.min.js">&lt;\/script>')&lt;/script>

&lt;-- Import Trumbowyg -->
&lt;script src="node_modules/trumbowyg/dist/trumbowyg.min.js">&lt;/script>

&lt;-- Import Trumbowyg plugins... -->
&lt;script src="node_modules/trumbowyg/dist/plugins/upload/trumbowyg.cleanpaste.min.js">&lt;/script>
&lt;script src="node_modules/trumbowyg/dist/plugins/upload/trumbowyg.pasteimage.min.js">&lt;/script>

&lt;-- Init Trumbowyg -->
&lt;script>
    // Doing this in a loaded JS file is better, I put this here for simplicity
    $('#my-editor').trumbowyg();
&lt;/script>
            </code></pre>

            <p>
                In the previous case, plugins are "auto registering" themself into Trumbowyg and be activated in
                <strong>all</strong> future Trumbowyg instances.
            </p>
            <p>
                But most popular plugins are button-based, like
                <a href="./plugins/#plugin-upload">upload</a> or
                <a href="./plugins/#plugin-colors">colors</a> ones.
                If you want to use these plugins, load them like explained before, then add the plugin button to your editor
                by <a href="#button-pane">checking the button pane doc section</a>.
            </p>
            <p>
                For more informations on plugins, check <a href="./plugins/">the plugins documentation page.</a>
            </p>
        </div>
    </section>


    <section id="general" class="wrapper section">
        <h2 class="section-title">General</h2>

        <div class="feature" data-added="1.0.0">
            <h3 id="prefix">Prefix</h3>
            <p>
                You can change prefix of all class added on elements of Trumbowyg using this option:
            </p>
            <pre><code class="javascript">
$('textarea').trumbowyg({
    prefix: 'custom-prefix'
});
            </code></pre>
            <p>
                For example, the bold button class is now <code class="javascript">custom-prefix-bold-button</code>
            </p>
            <p class="note">
                Default value is <code>trumbowyg</code>
            </p>
        </div>


        <div class="feature" data-added="1.0.0">
            <h3 id="localization">Localization</h3>
            <p>
                Your users don't speak english? No problem, Trumbowyg has a language parameter. You have to load the
                appropriate lang file. Search in <code>/dist/langs</code> folder to see if a language file already
                exists, if not create it and share it :). See <a href="#add-localization">add a localization</a> for
                more details on language file.
            </p>
            <p>
                Don't forget include the lang file in your pages:
            </p>
            <pre><code class="html">
&lt;script type="text/javascript" src="js/dist/langs/fr.min.js"&gt;&lt;/script&gt;
            </code></pre>
            <p class="note">
                Warning, include lang file after Trumbowyg and before instantiating the editor!
            </p>
            <p>
                Usage of language parameter:
            </p>
            <pre><code class="javascript">
$('textarea').trumbowyg({
    lang: 'fr'
});
            </code></pre>
            <p class="note">
                If the lang was not found, english values are used by default.
            </p>
        </div>


        <div class="feature" data-added="1.0.0">
            <h3 id="custom-skin">Custom skin</h3>
            <p>
                Trumbowyg is flexible and simple. You want a different look?
            </p>

            <h4>Replace existing CSS file</h4>
            <p>
                Copy <code>/src/ui/</code> folder somewhere and customize style. Finally, link your new CSS file and
                remove link to Trumbowyg default style.
            </p>
            <p class="note">
                It is not recommended to directly edit the CSS file in the trumbowyg folder. When you update the plugin,
                your modifications will be erased.
            </p>

            <br>

            <h4>Multiple skins for multiple Trumbowyg</h4>
            <p>
                This is useful when you do not want same design for all instances of Trumbowyg.
            </p>
            <p>
                Use the prefix option:
            </p>
            <pre><code class="javascript">
$('.editor-modern-ui').trumbowyg({
    prefix: 'modern-ui'
});
            </code></pre>
            <p>
                In your CSS, you can now stylize <code>.modern-ui-link-button</code> for example, whitout conflicts with
                the default skin. It's necessary to redefine style for all elements. If you want to start from the
                default skin, copy <code>/src/ui/</code> folder, replace all <code>trumbowyg-</code> by your prefix and
                work from here.
            </p>
        </div>


        <div class="feature" data-added="2.1.0">
            <h3 id="svg-icons">SVG icons</h3>
            <p class="added-feature">Added in 2.1.0</p>
            <p>
                A pack of SVG icons is available and enabled by default. This file is loaded via XHR request
                in JavaScript so it is possible the path is not matching with your assets file paths.
                You can change the path of the SVG or disable this feature.
            </p>

            <h4>Change SVG path globally</h4>
            <p>
                To change SVG path, you need to set the path in global Trumbowyg configuration object:
            </p>
            <pre><code class="javascript">
$.trumbowyg.svgPath = '/assets/my-custom-path/icons.svg';
            </code></pre>
            <p class="note">
                This global way needs to be done before initialize any Trumbowyg instance.
            </p>

            <h4>Disable SVG icons globally</h4>
            <p>
                If you do not want SVG icons, you can set this option to false. Then, you can add your custom
                icons by CSS or what you want.
            </p>
            <pre><code class="javascript">
$.trumbowyg.svgPath = false:
            </code></pre>
            <p>
                Check <a href="#hide-button-texts">hide button texts</a> option if you did not want button content at all
                and customize it by yourself.
            </p>
            <p class="note">
                This global way needs to be done before initialize any Trumbowyg instance.
            </p>

            <h4>Change SVG path or disable SVG icons locally</h4>
            <p>
                You can also apply <code>svgPath</code> option for an isolated editor only.
            </p>
            <pre><code class="javascript">
$('.editor').trumbowyg({
    svgPath: false // or a path like '/assets/my-custom-path/icons.svg'
});
            </code></pre>

            <h4>Use SVG icons without XHR or via an another protocol than HTTP(S)</h4>
            <p class="note">
                If you want to be IE9-complient you should use this option.
            </p>
            <p>
                If you do not want use HTTP(S) protocol or use XHR to load icons, you can load icons in your HTML
                by your own. You just need to include the
                <a href="https://raw.githubusercontent.com/Alex-D/Trumbowyg/master/dist/ui/icons.svg">icons.svg file</a>
                inline in your <code>&lt;body></code>:
            </p>
            <pre><code class="html">
&lt;div id="trumbowyg-icons">
    &lt;svg xmlns="http://www.w3.org/2000/svg">
        &lt;symbol id="trumbowyg-blockquote" viewBox="0 0 72 72">&lt;path d="...">&lt;/path>&lt;/symbol>
        &lt;symbol id="trumbowyg-bold" viewBox="0 0 72 72">&lt;path d="...">&lt;/path>&lt;/symbol>
        &lt;symbol id="trumbowyg-close" viewBox="0 0 72 72">&lt;path d="...">&lt;/path>&lt;/symbol>
        &lt;!-- ... all other icons here -->
    &lt;/svg>
&lt;/div>
            </code></pre>
            <p class="note">
                You need to use this id: <code>&lt;prefix&gt;-icons</code>.
            </p>
            <p>
                Trumbowyg check if a <code>#&lt;prefix&gt;-icons</code> exists. If not, it loads SVG icons file via
                XHR and put it in a div with this id. Next editor on the page do not load icons again. By adding
                this div in the page, you "hack" this mecanism to load it by your own.
            </p>
        </div>


        <div class="feature" data-added="1.1.3">
            <h3 id="placeholder">Placeholder</h3>
            <p>
                Like the HTML5 attribute on input and textarea, you can add a placeholder with Trumbowyg.
            </p>
            <pre><code class="html">
&lt;div class="my-editor" placeholder="Your text as placeholder">&lt;/div>
            </code></pre>
            <p class="note">
                Placeholder is visible only if the element is empty (no HTML/text).
            </p>
            <div class="note">
                <p>
                    Placeholder is both managed in JS and CSS with the default style. If you create your own style, you
                    need to apply the following style (replace <code>trumbowyg</code> by your prefix):
                </p>
                <pre><code class="css">
.trumbowyg-editor[contenteditable=true]:empty::before{
    content: attr(placeholder);
    color: #999;
}
                </code></pre>
            </div>
        </div>


        <div class="feature" data-added="2.1.0">
            <h3 id="disabled">Disabled</h3>
            <p class="added-feature">Added in 2.1.0</p>
            <p>
                Trumbowyg supports <code>disabled</code> attribute on a textarea and an option.
            </p>
            <pre><code class="html">
&lt;textarea class="my-editor" disabled>&lt;/textarea>
            </code></pre>
            <pre><code class="javascript">
$('.a-disabled-editor').trumbowyg({
    disabled: true
});
            </code></pre>
            <p class="note">
                You can switch between disabled and enabled states by <a href="#enable-disable-edition">using API</a>
            </p>
        </div>
    </section>


    <section id="basic-options" class="wrapper section">
        <h2 class="section-title">Basic Options</h2>


        <div class="feature" data-added="1.0.0">
            <h3 id="button-pane">Button pane</h3>
            <p>
                It's probably the most interesting option, it allows you to choose the buttons that appears in the
                button pane. This option is an array containing string values representing the buttons or vertical
                separators (using the pipe character). To create your own custom button pane, define an array and pass
                it to the <code>btns</code> option.
            </p>
            <pre><code class="javascript">
$('.simple-editor').trumbowyg({
    btns: [['bold', 'italic'], ['link']]
});
            </code></pre>
            <div class="note">
                <p>
                    By default, <code>btns</code> option value is:
                </p>
                <pre><code class="javascript">
$('.simple-editor').trumbowyg({
    btns: [
        ['viewHTML'],
        ['undo', 'redo'], // Only supported in Blink browsers
        ['formatting'],
        ['strong', 'em', 'del'],
        ['superscript', 'subscript'],
        ['link'],
        ['insertImage'],
        ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
        ['unorderedList', 'orderedList'],
        ['horizontalRule'],
        ['removeformat'],
        ['fullscreen']
    ]
});
                </code></pre>
            </div>
        </div>


        <div class="feature" data-added="2.5.0">
            <h3 id="hide-button-texts">Hide button texts</h3>
            <p class="added-feature">Added in 2.5.0</p>
            <p>
                You can hide button texts showed when you put <a href="#svg-icons">svgPath to false</a>.
            </p>
            <pre><code class="javascript">
// Globally
$.trumbowyg.hideButtonTexts = true

// Or locally
$('.trumbowyg').trumbowyg({
    hideButtonTexts: true
});
            </code></pre>
            <p class="note">
                If you disable SVG icons and button texts, you should design them by yourself.
            </p>
        </div>


        <div class="feature" data-added="1.0.0">
            <h3 id="semantic">Semantic</h3>
            <p>
                Generates a better, more semantic oriented HTML (i.e. <code>&lt;em&gt;</code> instead of <code>
                &lt;i&gt;</code>, <code>&lt;strong&gt;</code> intsead of <code>&lt;b&gt;</code>, etc.). It's just a
                boolean:
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    semantic: false
});
            </code></pre>
            <p>
                This option deactivates the <em>underline</em> button by default because they do not convey any real
                semantic. If you want to reactivate them, you have to do it explicitly, see <a href="#button-pane">Button
                pane</a>
            </p>
            <p class="note">
                This option is set to <code>true</code> by default
            </p>
        </div>


        <div class="feature" data-added="1.0.0">
            <h3 id="reset-css">Reset CSS</h3>
            <p>
                If you don't want the page style to impact on the look of the text in the editor, you will need to apply
                a reset-css on the editor. You can activate this with the <code>resetCss</code> option:
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    resetCss: true
});
            </code></pre>
            <p class="note">
                This option is set to <code>false</code> by default. The reset only applies to the editor, not to the
                generated HTML code.
            </p>
        </div>


        <div class="feature" data-added="2.0.0">
            <h3 id="remove-format-pasted">Remove format pasted</h3>
            <p>
                If you don't want styles pasted from clipboard (from Word or other webpage for example), pass the <code>removeformatPasted</code>
                option to <code>true</code>
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    removeformatPasted: true
});
            </code></pre>
            <p class="note">
                In order to use this option, you need to define a font size in your CSS or use a reset like normalize.
            </p>
            <p class="note">
                Remove format pasted is not active by default (set to <code>false</code>).
            </p>
        </div>


        <div class="feature" data-added="2.0.0">
            <h3 id="tags-to-remove">Tags to remove</h3>
            <p>
                Allow to sanitize the code by removing all tags you want. The <code>tagsToRemove</code>
                option is an array.
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    tagsToRemove: ['script', 'link']
});
            </code></pre>
            <p class="note">
                You must do the sanitize server-side too to avoid some security issues like XSS.
            </p>
            <p class="note">
                Tags to remove is an empty array by default (set to <code>[]</code>).
            </p>
        </div>


        <div class="feature" data-added="2.12.0">
            <h3 id="tags-to-keep">Tags to keep</h3>
            <p class="added-feature">Added in 2.12.0</p>
            <p>
                Sometimes you want to keep some empty <code>i</code> tags for <em>Font Awesome</em> or anything else. You can define this list via the <code>tagsToKeep</code>
                option.
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    tagsToKeep: ['i', 'script[src]']
});
            </code></pre>
            <p class="note">
                Default tags to keep are <code>['hr', 'img', 'embed', 'iframe', 'input']</code>.
            </p>
        </div>


        <div class="feature" data-added="1.0.0">
            <h3 id="auto-grow">Auto grow</h3>
            <p>
                The text editing zone can extend itself when writing a long text. To activate this feature, use the
                autogrow option:
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    autogrow: true
});
            </code></pre>
            <p class="note">
                Autogrow is not active by default (set to <code>false</code>).
            </p>
        </div>


        <div class="feature" data-added="2.7.0">
            <h3 id="auto-grow-on-enter">Auto grow on enter</h3>
            <p class="added-feature">Added in 2.7.0</p>
            <p>
                The text editing zone can extend itself when editor get focus and reduce on blur.
                To activate this feature, use the following option:
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    autogrowOnEnter: true
});
            </code></pre>
            <p class="note">
                Autogrow on enter is not active by default (set to <code>false</code>).
            </p>
        </div>


        <div class="feature" data-added="2.9.0">
            <h3 id="image-width-modal-edit">Image width modal edit</h3>
            <p class="added-feature">Added in 2.9.0</p>
            <p>
                Add a field in image insert/edit modal which allow users to set the image width.
                To activate this feature, use the following option:
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    imageWidthModalEdit: true
});
            </code></pre>
            <p class="note">
                Image width modal edit is not active by default (set to <code>false</code>).
            </p>
        </div>


        <div class="feature" data-added="2.9.4">
            <h3 id="url-protocol">URL protocol</h3>
            <p class="added-feature">Added in 2.9.4</p>
            <p>
                An option to auto-prefix URLs with a protocol.
            </p>
            <p>
                When this option
                is set to <code>true</code>, URLs missing a protocol will be
                prefixed with <code>https://</code>. Alternatively, a string can
                be provided for a custom prefix.
            </p>
            <p>
              For example, a value of <code>true</code> would convert
              <code>example.com</code> to
              <code>https://example.com</code>, while a value of
              <code>ftp</code> converts to
              <code>ftp://example.com</code>.
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    urlProtocol: true
});
            </code></pre>
            <p class="note">
              Anchors, email addresses and relative links are left unchanged.
            </p>
            <p class="note">
                URL protocol is not active by default (set to <code>false</code>).
            </p>
        </div>


        <div class="feature" data-added="2.9.4">
            <h3 id="minimal-links">Minimal links</h3>
            <p class="added-feature">Added in 2.9.4</p>
            <p>
                Reduce the link overlay to use only <code>url</code> and
                <code>text</code> fields, omitting <code>title</code> and
                <code>target</code>.
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    minimalLinks: true
});
            </code></pre>
            <p class="note">
                The minimal links option is not active by default (set to
                <code>false</code>).
            </p>
        </div>
    </section>


    <section id="advanced-options" class="wrapper section">
        <h2 class="section-title">Advanced Options</h2>

        <div class="feature" data-added="1.0.0">
            <h3 id="add-localization">Add a localization</h3>
            <p>
                The structure of a language file is simple, it is a JavaScript Object which associate a translation to
                any key. For example:
            </p>
            <pre><code class="javascript">
jQuery.trumbowyg.langs.fr = {
    _dir: "ltr", // Changes the editor dir

    bold: "Gras",
    close: "Fermer"
};
            </code></pre>
            <p>
                Some localizations are added each day, you can find them in
                <a href="https://github.com/Alex-D/Trumbowyg/tree/master/dist/langs">the langs folder on GitHub</a>
            </p>
            <p>
                You can submit a new localization file by creating a new pull request on the Github repository.
            </p>
            <p class="note">
                English is the default localization, you don't need to include any file to get Trumbowyg in English.
            </p>
        </div>

        <div class="feature" data-added="1.0.0">
            <h3 id="custom-buttons">Custom buttons</h3>
            <p>
                If Trumbowyg does not fit your needs, maybe you can create your very own custom button to solve this.
                The following code (which does not works as is) show you all available button parameters.
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    btnsDef: {
        buttonName: {
            fn: 'functionName',
            tag: 'tagName',
            title: 'Button tooltip',
            text: 'Displayed button name',
            isSupported: function () { return true; },
            key: 'K',
            param: '' ,
            forceCSS: false,
            class: '',
            hasIcon: true
        }
    }
});
            </code></pre>
            <p>
                The key (here <code>buttonName</code>) is the button name used in <code>btns</code> and in <code>dropdown</code>.
                It is used as many default in options below.
            </p>
            <h4>Parameters</h4>
            <dl>
                <dt><strong><code>fn</code></strong> <code class="type">string</code>|<code class="type">function</code></dt>
                <dd>
                    The name of a Trumbowyg internal method OR a callable function OR browser native execCommand name.
                    In any case, the function is called when the user click on the button or use the associated shortcut.
                    <br>
                    <strong>Default</strong>: button name
                </dd>
                <dt><strong><code>tag</code></strong> <code class="type">string</code></dt>
                <dd>
                    The HTML tag name which highlight the button if cursor is in a tag which this tag name.
                    <br>
                    <strong>Default</strong>: button name
                </dd>
                <dt><strong><code>title</code></strong> <code class="type">string</code></dt>
                <dd>
                    The text displayed in a tooltip on mouse over a button.
                    <br>
                    <strong>Default</strong>: <code>text</code> parameter OR translated button name OR raw button name
                </dd>
                <dt><strong><code>text</code></strong> <code class="type">string</code></dt>
                <dd>
                    The text of the button used when <a href="#svg-icons">svgPath is set to false</a>.
                    This text can be hidden via <code><a href="#hide-button-texts">hideButtonTexts</a></code> option.
                    <br>
                    <strong>Default</strong>: <code>title</code> parameter OR translated button name OR raw button name
                </dd>
                <dt><strong><code>isSupported</code></strong> <code class="type">function</code></dt>
                <dd>
                    A function which returns a Boolean to know if the custom button is supported (browser compatibility
                    check, context check, ...)
                    <br>
                    <strong>Default</strong>: <code>null</code> (no check)
                </dd>
                <dt><strong><code>key</code></strong> <code class="type">string</code></dt>
                <dd>
                    Shortcut key which triggers the button function (<code>fn</code>)
                    <br>
                    <strong>Default</strong>: <code>null</code> (no shortcut defined)
                </dd>
                <dt><strong><code>param</code></strong> <code class="type">string</code></dt>
                <dd>
                    In case of using browser native execCommand, give this as parameter.
                    <br>
                    <strong>Default</strong>: button name
                </dd>
                <dt><strong><code>forceCSS</code></strong> <code class="type">string</code></dt>
                <dd>
                    In case of using browser native execCommand, force usage of inline CSS insteed of a tag.
                    <br>
                    <strong>Default</strong>: <code>false</code>
                </dd>
                <dt><strong><code>class</code></strong> <code class="type">string</code></dt>
                <dd>
                    A string which is added to the button class attribute.
                    <br>
                    <strong>Default</strong>: Trumbowyg adds a <code>prefix + '-' + buttonName</code> class
                </dd>
                <dt><strong><code>hasIcon</code></strong> <code class="type">boolean</code></dt>
                <dd>
                    Allow us to force the display of the text for a specific button.
                    <br>
                    <strong>Default</strong>: <code>true</code>
                </dd>
            </dl>
            <p>
                Working example:
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    btnsDef: {
        alert: {
            fn: function() {
                alert('some text')
            },
            ico: 'blockquote'
        }
    },
    btns: [
        ['alert']
    ]
});
            </code></pre>
        </div>

        <div class="feature" data-added="1.0.0">
            <h3 id="custom-dropdowns">Custom dropdowns</h3>
            <p>
                You can also create your own dropdown, like buttons. The following code (which does not works as is)
                show use all options which can be used to make our own customized dropdown.
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    btnsDef: {
        dropdownButtonName: {
            dropdown: ['btnA', 'btnB'],
            title: 'Displayed dropdown button name',
            ico: 'iconName',
            hasIcon: true
        }
    }
});
            </code></pre>
            <h4>Parameters</h4>
            <dl>
                <dt><strong><code>dropdown</code></strong> <code class="type">array&lt;string></code></dt>
                <dd>
                    A list of button names to list in the dropdown.
                    <br>
                    <strong>Default</strong>: <code>[]</code>
                </dd>
                <dt><strong><code>title</code></strong> <code class="type">string</code></dt>
                <dd>
                    The text displayed in a tooltip on mouse over the dropdown button.
                    <br>
                    <strong>Default</strong>: translated dropdown button name OR raw dropdown button name
                </dd>
                <dt><strong><code>ico</code></strong> <code class="type">string</code></dt>
                <dd>
                    The icon name for the dropdown. You can reuse <a href="https://github.com/Alex-D/Trumbowyg/tree/develop/src/ui/icons">some existing icons from Trumbowyg</a>.
                    <br>
                    <strong>Default</strong>: icon with button name in snake case
                </dd>
                <dt><strong><code>hasIcon</code></strong> <code class="type">boolean</code></dt>
                <dd>
                    Allow us to force the display of the text for a specific button.
                    <br>
                    <strong>Default</strong>: <code>true</code>
                </dd>
            </dl>
            <p>
                Working example which groups all justify buttons in one dropdown:
            </p>
            <pre><code class="javascript">
$('.trumbowyg').trumbowyg({
    btnsDef: {
        align: {
            dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            ico: 'justifyLeft'
        }
    },
    btns: [
        ['align']
    ]
});
            </code></pre>
        </div>
    </section>


    <section id="api" class="wrapper section">
        <h2 class="section-title">API</h2>

        <div class="feature" data-added="1.0.0">
            <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 <code class="javascript">.trumbowyg()</code> method and give parameters <code>'openModal'</code>
                or <code>'closeModal'</code> like that:
            </p>
            <pre><code class="javascript">
// Open a modal box
var $modal = $('#editor').trumbowyg('openModal', {
    title: 'A title for modal box',
    content: '&lt;p&gt;Content in HTML which you want include in created modal box&lt;/p&gt;'
});

// Close current modal box
$('#editor').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
                curently 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>: trigged when form is submit</li>
                <li><code>tbwreset</code>: trigged when user cancel operation</li>
            </ul>
            <pre><code class="javascript">
// Open a modal box
var $modal = $('#editor').trumbowyg('openModal', {
    title: 'A title for modal box',
    content: '&lt;p&gt;Content in HTML which you want include in created modal box&lt;/p&gt;'
});

// Listen clicks on modal box buttons
$modal.on('tbwconfirm', function(e){
    // Save datas
    $("#editor").trumbowyg('closeModal');
});
$modal.on('tbwcancel', function(e){
    $('#editor').trumbowyg('closeModal');
});
            </code></pre>

            <h4>Only build inputs in modal</h4>
            <p>
                If you want 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');
$("#editor").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: {}
        },
        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: 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" data-added="2.0.0">
            <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 involves typical getter/setter.
            </p>

            <h4>Save and get current range</h4>
            <pre><code class="javascript">
// Save current range
$('#editor').trumbowyg('saveRange');

// Restore last saved range
$('#editor').trumbowyg('restoreRange');
            </code></pre>

            <h4>Get selection range</h4>
            <pre><code class="javascript">
// range contains a JavaScript range
var range = $('#editor').trumbowyg('getRange');
            </code></pre>

            <h4>Get last saved range text</h4>
            <pre><code class="javascript">
var text = $('#editor').trumbowyg('getRangeText');
            </code></pre>
        </div>


        <div class="feature" data-added="1.0.0">
            <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
$('#editor').trumbowyg('html');

// Set HTML content
$('#editor').trumbowyg('html', "&lt;p&gt;Your content here&lt;/p&gt;");
            </code></pre>
        </div>


        <div class="feature" data-added="1.0.0">
            <h3 id="empty">Empty</h3>
            <p>
                You can empty the content of the editor.
            </p>
            <pre><code class="javascript">
$('#editor').trumbowyg('empty');
            </code></pre>
        </div>


        <div class="feature" data-added="2.1.0">
            <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">
$('#editor').trumbowyg('disable');
$('#editor').trumbowyg('enable');
            </code></pre>
        </div>


        <div class="feature" data-added="2.9.0">
            <h3 id="toggle">Toggle between HTML & WYSIWYG modes</h3>
            <p class="added-feature">Added in 2.9.0</p>
            <p>
                You can switch between HTML view and WYSIWYG view via toggle method.
            </p>
            <pre><code class="javascript">
$('#editor').trumbowyg('toggle');
            </code></pre>
        </div>


        <div class="feature" data-added="1.0.0">
            <h3 id="destroy-editor">Destroy editor</h3>
            <p>
                When you wish, you can restore the previous state of the element was used to create the editor.
            </p>
            <pre><code class="javascript">
$('#editor').trumbowyg('destroy');
            </code></pre>
        </div>


        <div class="feature" data-added="1.1.0">
            <h3 id="events">Events</h3>
            <p>
                Some events are fired on the jQuery element which is used to build the editor.
            </p>
            <ul>
                <li>Focus on editor: <code>tbwfocus</code></li>
                <li>Blur on editor: <code>tbwblur</code></li>
                <li>Editor is initialized: <code>tbwinit</code> <span class="version-tag">2.0.0</span></li>
                <li>Change in editor: <code>tbwchange</code> <span class="version-tag">2.0.0</span></li>
                <li>Resize the editor on autogrow: <code>tbwresize</code> <span class="version-tag">2.0.0</span></li>
                <li>Paste something in the editor: <code>tbwpaste</code> <span class="version-tag">2.0.0</span></li>
                <li>Switch to fullscreen mode: <code>tbwopenfullscreen</code> <span class="version-tag">2.0.0</span>
                </li>
                <li>Leave editor's fullscreen mode: <code>tbwclosefullscreen</code> <span
                        class="version-tag">2.0.0</span></li>
                <li>Close the editor: <code>tbwclose</code> <span class="version-tag">2.0.0</span></li>
            </ul>
            <pre><code class="javascript">
$('#editor')
.trumbowyg() // Build Trumbowyg on the #editor element
.on('tbwfocus', function(){ console.log('Focus!'); }); // Listen for `tbwfocus` event
.on('tbwblur', function(){ console.log('Blur!'); }); // Listen for `tbwblur` event
            </code></pre>
        </div>
    </section>
</main>


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/vendor/jquery-1.11.1.min.js"><\/script>')</script>

<script src="../js/vendor/highlight.js"></script>
<script src="../js/main.js"></script>
</body>
</html>