Existing plugins

If you want to add a plugin, be sure to read the use plugins section of documentation before continue.

Base 64

Stable

Base 64 plugin allows you to insert images inline as base64.

Try base64 live demo!

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/base64/trumbowyg.base64.min.js"></script>
            

Then you can use the new button definition base64


$('#my-editor').trumbowyg({
    btns: [
        ['base64']
    ]
});
            

Clean paste

Stable

Need demo

Clean paste plugin handle paste events, clean the HTML code before insert content into the editor.

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/cleanpaste/trumbowyg.cleanpaste.min.js"></script>
            

Clean paste works now on every new Trumbowyg instance.

Colors

Stable

Colors plugin allows you to change foreground and background color of your text.

Try colors live demo!

How to use it?


<-- Import Trumbowyg colors style in <head>... -->
<script src="node_modules/trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.css"></script>
            

<-- Import Trumbowyg colors JS at the end of <body>... -->
<script src="node_modules/trumbowyg/dist/plugins/colors/trumbowyg.colors.min.js"></script>
            

Then you can use the new button definitions foreColor and backColor


$('#my-editor').trumbowyg({
    btns: [
        ['foreColor', 'backColor']
    ]
});
            

Some doc to write about color options...
You can contribute to this documentation by submitting a Pull Request :)

Emoji

Stable

Emoji plugin allows you to insert some emojis in your editor.

Try emoji live demo!

How to use it?

This plugin require emojify.js which can be installed with: npm install emojify.js


<-- Import emojify.js and Trumbowyg emoji at the end of <body>... -->
<script src="node_modules/emojify.js/dist/js/emojify.min.js"></script>
<script src="node_modules/trumbowyg/dist/plugins/emoji/trumbowyg.emoji.min.js"></script>
            

You should setup emojify.js, then you can use the new button definition emoji


// Setup emojify.js
emojify.setConfig({
    img_dir : '//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/',
});

$('#my-editor').trumbowyg({
    btns: [
        ['emoji']
    ]
});
emojify.run();

// Will transform an :emoji: to img tag at each input
$('.trumbowyg-editor').on('input propertychange', function() {
    emojify.run();
});
            

Insert audio

Stable

Do the same as insert image, but for audio.

Try insert audio live demo!

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/insertaudio/trumbowyg.insertaudio.min.js"></script>
            

Then you can use the new button definition insertaudio


$('#my-editor').trumbowyg({
    btns: [
        ['insertaudio']
    ]
});
            

Noembed

Stable

Allows you to embed any content from a link using noembed.com API.

Try noembed live demo!

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/noembed/trumbowyg.noembed.min.js"></script>
            

Then you can use the new button definition noembed


$('#my-editor').trumbowyg({
    btns: [
        ['noembed']
    ]
});
            

Paste image

Stable

Need demo

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.

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/pasteimage/trumbowyg.pasteimage.min.js"></script>
            

Paste image works now on every new Trumbowyg instance.

Preformatted

Stable

Need demo

Wrap your code with <pre> tags.

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/preformatted/trumbowyg.preformatted.min.js"></script>
            

Then you can use the new button definition preformatted


$('#my-editor').trumbowyg({
    btns: [
        ['preformatted']
    ]
});
            

Table

Not stable

Need documentation

Need demo

Check bugs on GitHub

Some doc to write...
You can contribute to this documentation by submitting a Pull Request :)

Template

Stable

Need documentation

Manage a set of HTML templates to insert fast.

Try template live demo!

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/template/trumbowyg.template.min.js"></script>
            

Then you can use the new button definition template


$('#my-editor').trumbowyg({
    btns: [
        ['template']
    ]
});
            

Some doc to write about template options/definition...
You can contribute to this documentation by submitting a Pull Request :)

Upload

Stable

Need documentation

Add an upload front-end allowing users to select an image, upload it with progress bar and then insert the uploaded image in the editor.

Try upload live demo!

How to use it?


<-- Import Trumbowyg plugins... -->
<script src="node_modules/trumbowyg/dist/plugins/upload/trumbowyg.upload.min.js"></script>
            

Then you can use the new button definition upload


$('#my-editor').trumbowyg({
    btns: [
        ['upload']
    ],
    plugins: {
        upload: {
            // Some upload plugin options, see details below
        }
    }
});
            

Parameters

serverPath string
The URL to the server which catch the upload request
Default: ''
fileFieldName string
The POST property key associated to the upload file
Default: 'fileToUpload'
data array<Object>
Additional data for ajax. jQuery.ajax data option Example: [{name: 'myKey1', value: 'myValue1'}, {name: 'username', value: 'myUsername'}]
Default: []
headers Object
Additional headers. Check jQuery.ajax headers option Example: {headerKey: 'headerValue', Authorization: 'Client-ID xxxxxxxxx'}
Default: {}
xhrFields Object
Additional xhrFields. Check jQuery.ajax xhrFields option
Default: {}
urlPropertyName string
How to get image URL in the JSON response. Example: 'url' for {url: 'https://example.com/myimage.jpg', success: true}
Default: 'file'
statusPropertyName string
How to get status from the json response. Example: 'success' for {success: true, url: 'https://example.com/myimage.jpg'}
Default: 'success'
success function
Success callback: function (data, trumbowyg, $modal, values) {}
Default: null
error function
Error callback: function () {}
Default: null

Server side

Server side receives a POST request with the image in the fileFieldName field and alt which contains image description:


alt: 'Image description'
fileToUpload: // The image file
            

It must save this image, then return a JSON response like that:


{
    success: true, // Must be false if upload fails
    url: 'https://example.com/myimage.jpg'
}
            

Create your own

Introduction

A plugin can be a button, a paste handler or what you want. If you want add a plugin myplugin to official Trumbowyg list, your should follow this tree:


plugins
 └── myplugin
     ├── ui
     │   ├── icons
     │   │   └── myplugin.svg
     │   └── sass
     │       └── trumbowyg.myplugin.scss
     └── trumbowyg.myplugin.js
            

As plugin can be something else than a button, icons and scss are optionnal depending on your feature.

In a plugin, you get access to all Trumbowyg core and you can extends all things as you wish.

Skeleton

To create a new plugin, you should start you trumbowyg.myplugin.js with this code:


(function ($) {
    'use strict';

    // My plugin default options
    var defaultOptions = {
    };

    // If my plugin is a button
    function buildButtonDef(trumbowyg) {
        return {
            fn: function() {
                // My plugin button logic
            }
        }
    }

    $.extend(true, $.trumbowyg, {
        // Add some translations
        langs: {
            en: {
                myplugin: 'My plugin'
            }
        },
        // Add our plugin to Trumbowyg registred plugins
        plugins: {
            myplugin: {
                init: function(trumbowyg) {
                    // Fill current Trumbowyg instance with my plugin default options
                    trumbowyg.o.plugins.myplugin = $.extend(true, {},
                        defaultOptions,
                        trumbowyg.o.plugins.myplugin || {}
                    );

                    // If my plugin is a paste handler, register it
                    trumbowyg.pasteHandlers.push(function(pasteEvent) {
                        // My plugin paste logic
                    });

                    // If my plugin is a button
                    trumbowyg.addBtnDef('myplugin', buildButtonDef(trumbowyg));
                },
                tagHandler: function(element, trumbowyg) {
                    return [];
                },
                destroy: function() {
                }
            }
        }
    })
})(jQuery);
            

Interact with content

To interact with editor and its content, you should use Trumbowyg core API. You can also check existing plugins source code to see how it works!

Go to the core API documentation