Plugins | Trumbowyg: A lightweight WYSIWYG editor

Existing plugins

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

Allow tags from paste

Allow tags from paste plugin allows you to filter tags allowed when an user paste some code into the editor.

Try allow tags from paste live demo! View allow tags from paste plugin code on GitHub

How to use it?


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

Then you can configure your custom tag whitelist. Any tag pasted which is not in allowedTags list will be unwrap, only the text will be kept.


$('#my-editor').trumbowyg({
    plugins: {
        allowTagsFromPaste: {
            allowedTags: ['h4', 'p', 'br']
        }
    }
});

Enabling this plugin will force disable the removeformatPasted core option (set it to false).

Base 64

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

Try base64 live demo! View base64 plugin code on GitHub

How to use it?


<!-- Import Trumbowyg plugins... -->
<script src="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

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

Try cleanpaste live demo! View cleanpaste plugin code on GitHub

How to use it?


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

Clean paste works now on every new Trumbowyg instance.

Colors

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

Try colors live demo! View colors plugin code on GitHub

How to use it?


<!-- Import Trumbowyg colors style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.min.css">


<!-- Import Trumbowyg colors JS at the end of <body>... -->
<script src="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']
    ]
});

Options

colorList array<string>: List of colors available for both foreColor and backColor dropdowns.
Default: check the code or the demo
foreColorList array<string>: List of colors available used in the foreColor dropdown instead of colorList's one.
Default: fallbacks on colorList
allowCustomForeColor boolean: Allow user to pick a color outside the list.
Default: true
backColorList array<string>: List of colors available used in the backColor dropdown instead of colorList's one.
Default: fallbacks on colorList
allowCustomBackColor boolean: Allow user to pick a color outside the list.
Default: true
displayAsList boolean: Switch from square to labelled list view. Default view is the square's one.
Default: false

Example with colorList parameter:


$('#my-editor').trumbowyg({
    btns: [
        ['foreColor', 'backColor']
    ],
    plugins: {
        colors: {
            colorList: [
                '000', '111', '222', 'ffea00'
            ]
        }
    }
});

Example with both foreColorList and backColorList, displayed as list:


$('#my-editor').trumbowyg({
    btns: [
        ['foreColor', 'backColor']
    ],
    plugins: {
        colors: {
            foreColorList: [
                'ff0000', '00ff00', '0000ff'
            ],
            backColorList: [
                '000', '333', '555'
            ],
            displayAsList: true
        }
    }
});

If both foreColorList and backColorList are set, colorList will be not used at all.

Emoji

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

Try emoji live demo! View emoji plugin code on GitHub

How to use it?


<!-- Import Trumbowyg emoji style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/emoji/ui/trumbowyg.emoji.min.css">


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

Then you can use the new button definition emoji


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

Font family

This plugin allows user to custom font family.

Try font family live demo! View font family plugin code on GitHub

How to use it?


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

Then you can use the new button definition fontfamily


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

You can also choose custom font list:


$('#my-editor').trumbowyg({
    btns: [
        ['fontfamily']
    ],
    plugins: {
        fontfamily: {
            fontList: [
                {name: 'Arial', family: 'Arial, Helvetica, sans-serif'},
                {name: 'Open Sans', family: '\'Open Sans\', sans-serif'}
            ]
        }
    }
});

Giphy

User can search and pick gif to insert from Giphy

Try Giphy plugin live demo! View Giphy plugin code on GitHub

How to use it?


<!-- Import Trumbowyg Giphy style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/giphy/ui/trumbowyg.giphy.min.css">


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

Then, you need to create a Giphy App to get an API Key.

Use the new button definition giphy and your newly created Giphy API Key:


$('#my-editor').trumbowyg({
    btns: [
        ['giphy']
    ],
    plugins: {
        giphy: {
            apiKey: 'yourVeryOwnApiKey'
        }
    }
});

Options

apiKey string (required): Giphy API Key of your application. Create a Giphy App to get an API Key.
rating string: Giphy image rating filter. See Giphy documentation for allowed rating value details.
Default: g
throttleDelay number (in milliseconds): It's the delay between each Giphy API requests while user is typing his query.
Default: 300
noResultGifUrl string: The image URL shown when there is no result.
Default: https://media.giphy.com/media/2Faz9FbRzmwxY0pZS/giphy.gif

Example with options:


$('#my-editor').trumbowyg({
    btns: [
        ['giphy']
    ],
    plugins: {
        giphy: {
            apiKey: 'yourVeryOwnApiKey',
            rating: 'pg',
            throttleDelay: 500,
            noResultGifUrl: 'http://example.com/yourimage.gif'
        }
    }
});

Code Highlight

This plugin allows user to add code highlight parts.

Try highlight plugin live demo! View highlight plugin code on GitHub

How to use it?

This plugin require Prism which can be installed with: npm install prismjs


<!-- Import prismjs style in <head>... -->
<link rel="stylesheet" href="node_modules/prismjs/themes/prism.css">
<!-- Import highlight plugin style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/highlight/ui/trumbowyg.highlight.min.css">
<!-- Import prismjs and Trumbowyg highlight at the end of <body>... -->
<script src="node_modules/prismjs/prism.js"></script>
<script src="trumbowyg/dist/plugins/highlight/trumbowyg.highlight.min.js"></script>

You also can add another prism language syntaxes for example:


<!-- Import prismjs and Trumbowyg highlight at the end of <body>... -->
<script src="node_modules/prismjs/prism.js"></script>
<script src="node_modules/prismjs/components/prism-csharp.js"></script>
<script src="node_modules/prismjs/components/prism-go.js"></script>
<script src="node_modules/prismjs/components/prism-markdown.js"></script>
<script src="trumbowyg/dist/plugins/highlight/trumbowyg.highlight.min.js"></script>

Also on your website you must connect prismjs styles to lighting code worked. For example connect prism.css in head:


<!-- Import prismjs style in <head>... on your site -->
<link rel="stylesheet" href="node_modules/prismjs/themes/prism.css">

Options

enableLineHighlight boolean: Add a field to highlight some lines if enabled.
You need to import the Prism Line Highlight plugin JS + CSS.
Default: true
languageNames Object<string, string>: Pairs with language code as key and language name as value.
Default: List of all languages available in Prism

History

History plugin is an enhanced implementation of the undo and redo functionality. It tracks changes of the editor and will add each change to a history stack. If a word is typed in or text was pasted, it counts as a single stack entry.

Try history plugin live demo! View history plugin code on GitHub

How to use it?


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

Then you can use the new button definitions historyUndo and historyRedo


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

Indent

This plugin allows you to indent or outdent your text.

Try indent live demo! View indent plugin code on GitHub

How to use it?


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

Then you can use the news buttons definition indent or outdent


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

Insert audio

Do the same as insert image, but for audio.

Try insert audio live demo! View insertAudio plugin code on GitHub

How to use it?


<!-- Import Trumbowyg insertAudio at the end of <body>... -->
<script src="trumbowyg/dist/plugins/insertaudio/trumbowyg.insertaudio.min.js"></script>

Then you can use the new button definition insertAudio


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

Line height

This plugin allows user to custom line height.

Try line height live demo! View line height plugin code on GitHub

How to use it?


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

Then you can use the new button definition lineheight


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

You can also choose custom size list:


$('#my-editor').trumbowyg({
    btns: [
        ['lineheight']
    ],
    plugins: {
        fontsize: {
            sizeList: [
                '12px',
                '14px',
                '16px'
            ]
        }
    }
});

MathML

This plugin allows user to use MathML.

Try MathML live demo! View MathML plugin code on GitHub

How to use it?


<!-- Import Trumbowyg MathML style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/mathml/ui/trumbowyg.mathml.min.css">


<!-- Import Trumbowyg MathJax at the end of <body>... -->
<script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<!-- Import Trumbowyg MathML plugin at the end of <body>... -->
<script src="trumbowyg/dist/plugins/mathml/trumbowyg.mathml.min.js"></script>

Then you can use the new button definition mathml


// MathJax inline configuration
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [
            ['$', '$'],
            ['\\(', '\\)']
        ]
    }
});

// Trumbowyg initialization with MathML button
$('#editor')
.trumbowyg({
    btns: [
        'mathml'
    ]
});

Mention

This plugin allows to mention an user from a source list.

Try mention live demo! View mention plugin code on GitHub

How to use it?


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

Then you can use the new button definition mention


$('#my-editor').trumbowyg({
    btns: [
        ['mention']
    ],
    plugins: {
        mention: {
            source: [
                {login: 'lucy'},
                {login: 'jdoe'},
                {login: 'mlisa'},
                {login: 'jcesar'},
            ]
        }
    }
});

Options

source array<object>: List of mentionable users. Must contains login key if you do not override two other options.
Default: []
formatDropdownItem function: Custom format items in mention dropdown: function (item) {}. Must return a string.
Default output: item.login
formatResult function: The string which will be inserted in editor: function (item) {}. Must return a string.
Default output: '@' + item.login + ' '

Example with options:


$('#my-editor').trumbowyg({
    btns: [
        ['mention']
    ],
    plugins: {
        mention: {
            source: [
                {login: 'lucy', name: 'Lucy'},
                {login: 'jdoe', name: 'John Doe'},
                {login: 'mlisa', name: 'Mona Lisa'},
                {login: 'jcesar', name: 'Julius Cesarius'},
            ],
            formatDropdownItem: function (item) {
                return item.name + ' (' + item.login + ')';
            },
            formatResult: function (item) {
                return '@"' + item.name + '" ';
            }
        }
    }
});

Noembed

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

Try noembed live demo! View noembed plugin code on GitHub

How to use it?


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

Then you can use the new button definition noembed


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

Paste embed

Paste embed plugin handles paste events. It looks for paste event, checks if it's a url and uses noembed and MAXmade APIs to retrieve an iframe from that url. If it can't retrieve an iframe, it will put an anchor tag around the url. It doesn't do anything on text or HTML paste.

Try paste embed live demo! View pasteembed plugin code on GitHub

How to use it?


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

Paste embed now works on every new Trumbowyg instance.

Paste image

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.

Try paste image live demo! View paste image plugin code on GitHub

How to use it?


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

Paste image works now on every new Trumbowyg instance.

Preformatted

Wraps your code with <pre> tags.

Try preformatted live demo! View preformatted plugin code on GitHub

How to use it?


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

Then you can use the new button definition preformatted


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

Resizimg

Allows you to resize images (preserving aspect ratio) by dragging their bottom-right corner.

Try resizimg live demo! View resizimg plugin code on GitHub

Dependencies

This plugin depends on the jquery-resizable plugin, which must be loaded beforehand.

If in your project use the JQuery UI library with resizable interaction you need to include this script to avoid issue before load jquery-resizable.

How to use it?


<!-- 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>
<!-- Import Trumbowyg plugins... -->
<script src="trumbowyg/dist/plugins/resizimg/trumbowyg.resizimg.min.js"></script>

Options

minSize number: Minimal size of image and also of draggable right-bottom corner.
Default: 32
step number: Increment when increasing / decreasing image height.
Default: 4

Example with options:


$('#editor').trumbowyg({
    plugins: {
        resizimg: {
            minSize: 64,
            step: 16,
        }
    }
});

The resulting image size is currently absolute: CSS height in pixels (style attribute).

Ruby

Allows you to support ruby markup.

Try ruby live demo! View ruby plugin code on GitHub

How to use it?


<!-- Import Trumbowyg ruby style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/ruby/ui/trumbowyg.ruby.min.css">


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

Then you can use the new button definition ruby


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

Special Chars

Special Chars plugin allows you to insert some special characters in your editor.

Try special chars live demo! View specialChars plugin code on GitHub

How to use it?


<!-- Import Trumbowyg specialchars style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/specialchars/ui/trumbowyg.specialchars.min.css">


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

Then you can use the new button definition specialchars


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

Options

symbolList array<string>: List of special chars displayed in the dropdown.
To force next char to be on a new line in dropdown, add a null entry.
Default: check in the code.

Example with options:


$('#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'
            ]
        }
    }
});

Table

Table plugin allows users to create and manage tables.

Try table live demo! View table plugin code on GitHub

How to use it?
Options
Buttons

How to use it?


<!-- Import Trumbowyg Table style in <head>... -->
<link rel="stylesheet" href="trumbowyg/dist/plugins/table/ui/trumbowyg.table.min.css">


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

Then you can use the new button definition table


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

To get a good UX, you need to have some CSS defined on your tables. A good start can be something to guarantee that cell width and height will not collapse, and allow to click inside. Also, ensure you have some borders to distinguish cells. Here is a minimal example using CSS custom properties:


: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);
}

th,
td {
    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;
}

Options

rows number

The count of rows which should be used for table building in the table grid dropdown.
Default: 8

columns number

The count of columns which should be used for table building in the table grid dropdown.
Default: 8

allowHorizontalResize boolean

Enable handles to adjust columns width.
Default: true

colorList array<string>

List of colors available for both tableCellBackgroundColor and tableBorderColor dropdowns.
Default: check the code or the demo

backgroundColorList array<string>

List of colors available used in the tableCellBackgroundColor dropdown instead of colorList's one.
Default: fallbacks on colorList

allowCustomBackgroundColor boolean

Allow user to pick a color outside the list for tableCellBackgroundColor.
Default: true

displayBackgroundColorsAsList boolean

Switch from square to labelled list view for tableCellBackgroundColor. Default view is the square's one.
Default: false

borderColorList array<string>

List of colors available used in the tableBorderColor dropdown instead of colorList's one.
Default: fallbacks on colorList

allowCustomBorderColor boolean

Allow user to pick a color outside the list for tableBorderColor.
Default: true

displayBorderColorsAsList boolean

Switch from square to labelled list view for tableBorderColor. Default view is the square's one.
Default: false

dropdown object

Define the 'table' dropdown buttons when selection is inside a table.

title: the dropdown section title translation key.
buttons: button list

You can rearrange them and remove those you do not want.
Default:


[
    {
        title: 'tableRows',
        buttons: [
            'tableAddHeaderRow',
            'tableAddRowAbove',
            'tableAddRow',
            'tableDeleteRow',
        ],
    },
    {
        title: 'tableColumns',
        buttons: [
            'tableAddColumnLeft',
            'tableAddColumn',
            'tableDeleteColumn',
        ],
    },
    {
        title: 'tableVerticalAlign',
        buttons: [
            'tableVerticalAlignTop',
            'tableVerticalAlignMiddle',
            'tableVerticalAlignBottom',
       ],
    },
    {
        title: 'tableOthers',
        buttons: [
            // Cell merge/split
            'tableMergeCells',
            'tableUnmergeCells',
            'tableDestroy',
        ]
    }
]

styler string Removed in 2.27.0

The class which should be assigned to each table by default
Default: 'table'

From version 2.27, use core's tagClasses feature:


$('.trumbowyg').trumbowyg({
-    plugins: {
-        table: {
-            styler: 'table',
-        },
-    },
+    tagClasses: {
+        table: 'table',
+    },
});

Buttons

Table plugin comes with a lot of buttons.
You can use most of them anywhere: in the table dropdown, in the button pane or in your custom dropdown.
Exceptions are: table, tableCellBackgroundColor and tableBorderColor which can only be used directly in the button pane.

table

The table button comes with two different dropdowns depending on current selection:

If the current cursor is inside a table, the dropdown shows table actions;
Otherwise, renders a table grid where you can build the table.

See the dropdown option details above to see all default dropdown buttons.

tableAddHeaderRow

Add a <thead> to the table if there is no one already.
Can be deleted using tableRemoveRow.

tableAddRowAbove

Add a row above the selected row.

tableAddRow

Add a row under the selected row.

tableDeleteRow

Remove selected rows.

tableAddColumnLeft

Add a column to the left of the selected cell.

tableAddColumn

Add a column to the right of the selected cell.

tableDeleteColumn

Remove the selected cells columns.

tableVerticalAlignTop

Vertically align cell text to top.

tableVerticalAlignMiddle

Vertically align cell text to middle.

tableVerticalAlignBottom

Vertically align cell text to bottom.

tableMergeCells

Merge selected cells, if possible.

tableUnmergeCells

Unmerge selected cells.

tableDestroy

Delete the selected table.

tableCellBackgroundColor

Allow to choose selected cells background color.

tableBorderColor

Allow to choose table border color.

Template

Manage a set of HTML templates to insert fast.

Try template live demo! View template plugin code on GitHub

How to use it?


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

Then you can use the new button definition template and can add your template code.


$('#my-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>'
            }
        ]
    }
});

Upload

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! View upload plugin code on GitHub

How to use it?
Options
Server side

How to use it?


<!-- Import Trumbowyg plugins... -->
<script src="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
        }
    }
});

Options

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
imageWidthModalEdit boolean: Add a field allowing user to set image width
Default: false

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
    file: 'https://example.com/myimage.jpg'
}

Create your own

Introduction

A plugin can be a button, a paste handler or whatever you want. If you want add a plugin myplugin to the 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 other than a button, icons and scss are optional 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 your trumbowyg.myplugin.js with this code:


(function ($) {
    'use strict';

    // Plugin default options
    var defaultOptions = {
    };

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

    // If the plugin is a button
    function buildButtonIcon() {
        if ($("#trumbowyg-myplugin").length > 0) {
            return;
        }

        /*
        When your button is created, an SVG will be inserted with an xref to a
        symbol living at the fragment "#trumbowyg-myplugin". For Trumbowyg's
        own plugins, this will come from a sprite sheet which is injected into
        the document, built from the icon SVG in "ui/icons" in your plugin's
        source tree. This is how you should organise things if you are
        proposing your plugin to be included in the Trumbowyg main
        distribution, or if you are rolling your own custom build of Trumbowyg
        for your site.

        But, nothing says it *has* to come from Trumbowyg's injected sprite
        sheet; it only requires that this symbol exists in your document. To
        allow stand-alone distribution of your plugin, we're going to insert a
        custom SVG symbol into the document with the correct ID.
        */
        const iconWrap = $(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
        iconWrap.addClass("trumbowyg-icons");

        // For demonstration purposes, we've taken the "File" icon from
        // Remix Icon - https://remixicon.com/
        iconWrap.html(`
            <symbol id="trumbowyg-myplugin" viewBox="0 0 24 24">
                <path d="M21 8v12.993A1 1 0 0 1 20.007 22H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8zm-2 1h-5V4H5v16h14V9zM8 7h3v2H8V7zm0 4h8v2H8v-2zm0 4h8v2H8v-2z"/>
            </symbol>
        `).appendTo(document.body);
    }


    $.extend(true, $.trumbowyg, {
        // Add some translations
        langs: {
            en: {
                myplugin: 'My plugin'
            }
        },
        // Register plugin in Trumbowyg
        plugins: {
            myplugin: {
                // Code called by Trumbowyg core to register the plugin
                init: function (trumbowyg) {
                    // Fill current Trumbowyg instance with the plugin default options
                    trumbowyg.o.plugins.myplugin = $.extend(true, {},
                        defaultOptions,
                        trumbowyg.o.plugins.myplugin || {}
                    );

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

                    // If the plugin is a button
                    buildButtonIcon();
                    trumbowyg.addBtnDef('myplugin', buildButtonDef(trumbowyg));
                },
                // Return a list of button names which are active on current element
                tagHandler: function (element, trumbowyg) {
                    return [];
                },
                destroy: function (trumbowyg) {
                }
            }
        }
    })
})(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

Existing plugins

Allow tags from paste

How to use it?

Base 64

How to use it?

Clean paste

How to use it?

Colors

How to use it?

Options

Emoji

How to use it?

Font family

How to use it?

Font size

How to use it?

Giphy

How to use it?

Options

Code Highlight

How to use it?

Options

History

How to use it?

Indent

How to use it?

Insert audio

How to use it?

Line height

How to use it?

MathML

How to use it?

Mention

How to use it?

Options

Noembed

How to use it?

Paste embed

How to use it?

Paste image

How to use it?

Preformatted

How to use it?

Resizimg

Dependencies

How to use it?

Options

Ruby

How to use it?

Special Chars

How to use it?

Options

Table

How to use it?

Options

Buttons

Template

How to use it?

Upload

How to use it?

Options

Server side

Create your own

Introduction

Skeleton

Interact with content