Ace code editor
/editors/ace/
Overview
Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. Main features:
- Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
- Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
- Automatic indent and outdent
- An optional command line
- Handles huge documents (four million lines seems to be the limit!)
- Fully customizable key bindings including vim and Emacs modes
- Search and replace with regular expressions
- Highlight matching parentheses
- Toggle between soft tabs and real tabs
- Displays hidden characters
- Drag and drop text using the mouse
- Line wrapping
- Code folding
- Multiple cursors and selections
- Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
- Cut, copy, and paste functionality
Usage
Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one of src* subdirectories somewhere into your project), or use requireJS to load contents of lib/ace as ace. By default the editor only supports plain text mode; many other languages are available as separate modules.
Basic markup is:
<!-- Basic markup-->
<div id="html_editor">
<!-- Default card -->
<div class="card">
<div class="card-header d-md-flex">
<h5 class="mb-0">
Card title
<span class="fw-semibold">Default</span>
<small>Full featured toolbar</small>
</h5>
</div>
<div class="card-body">
Card body
</div>
</div>
<!-- /default card -->
</div>
Initialize via JavaScript:
// HTML editor
var html_editor = ace.edit("html_editor");
html_editor.setTheme("ace/theme/monokai");
html_editor.getSession().setMode("ace/mode/html");
html_editor.setShowPrintMargin(false);
Plugin info
| Property | Description |
|---|---|
| File name | ace.js, [modes, extensions, themes] |
| Location | global_assets/js/plugins/editors/ace/ |
| Links | Github project page |
CKEditor
/vendor/editors/ckeditor/
Overview
The rich text editor for every use case. CKEditor 5 allows users to create any type of content in your application, be it documents, reports, emails, notes or chat messages.
CKEditor 5 provides every type of WYSIWYG editing solution imaginable. From editors similar to Google Docs and Medium, to Slack or Twitter-like applications, all is possible within a single editing framework.
The editor comes with a well-designed UI and perfect UX, so users can easily manage media and tables as well as use advanced features, such as auto-formatting, mentions, Paste from Word or Markdown support.Core features are:
- Track Changes
- Comments
- Revision History
- Real-time Collaboration
- Export to PDF and Word
- Spell and grammar check
- Pagination
- Math equations
Usage
Load JavaScript file locally or from CDN:
<!-- CDN -->
<script src="https://cdn.ckeditor.com/ckeditor5/35.1.0/classic/ckeditor.js"></script>
<!-- Load locally -->
<script src="assets/js/vendor/editors/ckeditor/ckeditor_classic.js"></script>
Create textarea or div element:
<!-- Target element -->
<textarea class="form-control" id="ckeditor_classic_prefilled">...</textarea>
Finally, run this script after the DOM is ready:
// Editor with prefilled text
ClassicEditor.create(document.querySelector('#ckeditor_classic_prefilled'), {
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
]
}
}).catch(error => {
console.error(error);
});
Documentation
CKEditor library has a very extensive documentation with lots of different examples, API reference, configuration parameters, migration guide and other services. Please refer to official CKEditor documentation for more information.
Plugin info
| Property | Description |
|---|---|
| File name | summernote.min.js |
| Location | assets/js/vendor/editors/ckeditor/ |
| Links | Github project page |
Quill editor
quill.min.js
Overview
Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need. There are many solutions to choose from, but Quill brings a few modern ideas to consider:
- API Driven Design
- Custom Content and Formatting
- Cross Platform
- Easy to Use
Usage
Load JavaScript file locally or from CDN:
<!-- CDN -->
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Load plugin -->
<script src="assets/js/vendor/editors/quill/quill.min.js"></script>
Then initialize via JavaScript:
// Initialize
const quillFull = new Quill('.quill-full', {
modules: {
toolbar: [
[{ 'font': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
[ 'formula', 'image', 'video' ],
['clean']
]
},
bounds: '.content-inner',
placeholder: 'Please add your text here...',
theme: 'snow'
});
Configuration
Quill allows several ways to customize it to suit your needs. This section is dedicated to tweaking existing functionality
Container
Quill requires a container where the editor will be appended. You can pass in either a CSS selector or a DOM object.
// Option 1
var editor = new Quill('.editor'); // First matching element will be used
// Option 2
var container = document.getElementById('editor');
var editor = new Quill(container);
// Option 3
var container = $('.editor').get(0);
var editor = new Quill(container);
Options
To configure Quill, pass in an options object:
var options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
var editor = new Quill('#editor', options);
bounds
Default: document.body
debug
Default: yarn
formats
Default: All formats
Whitelist of formats to allow in the editormodules
Default: null
Collection of modules to include and respective optionsplaceholder
Default: none
readOnly
Default: false
scrollingContainer
Default: null
overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling.
theme
Default: snow
API
Content
deleteText
Deletes text from the editor, returning a Delta representing the change. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Methods
deleteText(index: Number, length: Number, source: String = 'api'): Delta
// Example
quill.deleteText(6, 4);
getContents
Retrieves contents of the editor, with formatting data, represented by a Delta object
// Methods
getContents(index: Number = 0, length: Number = remaining): Delta
// Example
var delta = quill.getContents();
getLength
Retrieves the length of the editor contents. Note even when Quill is empty, there is still a blank line represented by ‘\n’, so
getLength will return 1.
// Methods
getLength(): Number
// Example
var length = quill.getLength();
getText
Retrieves the string contents of the editor. Non-string content are omitted, so the returned string’s length may be shorter than the editor’s as returned by
getLength. Note even when Quill is empty, there is still a blank line in the editor, so in these cases getText will return ‘\n’. The length parameter defaults to the length of the remaining document.
// Methods
getText(index: Number = 0, length: Number = remaining): String
// Example
var text = quill.getText(0, 10);
insertEmbed
Insert embedded content into the editor, returning a Delta representing the change. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Methods
insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta
// Example
quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');
insertText
Inserts text into the editor, optionally with a specified format or multiple formats. Returns a Delta representing the change. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Methods
insertText(index: Number, text: String, source: String = 'api'): Delta
insertText(index: Number, text: String, format: String, value: any,
source: String = 'api'): Delta
insertText(index: Number, text: String, formats: { [String]: any },
source: String = 'api'): Delta
// Examples
quill.insertText(0, 'Hello', 'bold', true);
quill.insertText(5, 'Quill', {
'color': '#ffff00',
'italic': true
});
setContents
Overwrites editor with given contents. Contents should end with a newline. Returns a Delta representing the change. This will be the same as the Delta passed in, if given Delta had no invalid operations. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Method
setContents(delta: Delta, source: String = 'api'): Delta
// Example
quill.setContents([
{ insert: 'Hello ' },
{ insert: 'World!', attributes: { bold: true } },
{ insert: '\n' }
]);
setText
Sets contents of editor with given text, returing a Delta representing the change. Note Quill documents must end with a newline so one will be added for you if omitted. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Method
setText(text: String, source: String = 'api'): Delta
// Example
quill.setText('Hello\n');
updateContents
Applies Delta to editor contents, returing a Delta representing the change. These Deltas will be the same if the Delta passed in had no invalid operations. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Method
updateContents(delta: Delta, source: String = 'api'): Delta
// Example
// Assuming editor currently contains [{ insert: 'Hello World!' }]
quill.updateContents(new Delta()
.retain(6) // Keep 'Hello '
.delete(5) // 'World' is deleted
.insert('Quill')
.retain(1, { bold: true }) // Apply bold to exclamation mark
);
// Editor should now be [
// { insert: 'Hello Quill' },
// { insert: '!', attributes: { bold: true} }
// ]
Formatting
format
Format text at user’s current selection, returning a Delta representing the change. If the user’s selection length is 0, i.e. it is a cursor, the format will be set active, so the next character the user types will have that formatting. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Method
format(name: String, value: any, source: String = 'api'): Delta
// Examples
quill.format('color', 'red');
quill.format('align', 'right');
formatLine
Formats all lines in given range, returning a Delta representing the change. See formats for a list of available formats. Has no effect when called with inline formats. To remove formatting, pass
false for the value argument. The user’s selection may not be preserved. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Methods
formatLine(index: Number, length: Number, source: String = 'api'): Delta
formatLine(index: Number, length: Number, format: String, value: any,
source: String = 'api'): Delta
formatLine(index: Number, length: Number, formats: { [String]: any },
source: String = 'api'): Delta
// Examples
quill.setText('Hello\nWorld!\n');
quill.formatLine(1, 2, 'align', 'right'); // right aligns the first line
quill.formatLine(4, 4, 'align', 'center'); // center aligns both lines
formatText
Formats text in the editor, returning a Delta representing the change. For line level formats, such as text alignment, target the newline character or use the
formatLine helper. See formats for a list of available formats. To remove formatting, pass false for the value argument. The user’s selection may not be preserved. Source may be "user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Method
formatText(index: Number, length: Number, source: String = 'api'): Delta
formatText(index: Number, length: Number, format: String, value: any,
source: String = 'api'): Delta
formatText(index: Number, length: Number, formats: { [String]: any },
source: String = 'api'): Delta
// Examples
quill.setText('Hello\nWorld!\n');
quill.formatText(0, 5, 'bold', true); // bolds 'hello'
quill.formatText(0, 5, { // unbolds 'hello' and set its color to blue
'bold': false,
'color': 'rgb(0, 0, 255)'
});
quill.formatText(5, 1, 'align', 'right'); // right aligns the 'hello' line
getFormat
Retrieves common formatting of the text in the given range. For a format to be reported, all text within the range must have a truthy value. If there are different truthy values, an array with all truthy values will be reported. If no range is supplied, the user’s current selection range is used. May be used to show which formats have been set on the cursor. If called with no arguments, the user’s current selection range will be used.
// Method
getFormat(range: Range = current): { [String]: any }
getFormat(index: Number, length: Number = 0): { [String]: any }
// Examples
quill.setText('Hello World!');
quill.formatText(0, 2, 'bold', true);
quill.formatText(1, 2, 'italic', true);
quill.getFormat(0, 2); // { bold: true }
quill.getFormat(1, 1); // { bold: true, italic: true }
quill.formatText(0, 2, 'color', 'red');
quill.formatText(2, 1, 'color', 'blue');
quill.getFormat(0, 3); // { color: ['red', 'blue'] }
quill.setSelection(3);
quill.getFormat(); // { italic: true, color: 'blue' }
quill.format('strike', true);
quill.getFormat(); // { italic: true, color: 'blue', strike: true }
quill.formatLine(0, 1, 'align', 'right');
quill.getFormat(); // { italic: true, color: 'blue', strike: true, align: 'right' }
removeFormat
Removes all formatting and embeds within given range, returning a Delta representing the change. Line formatting will be removed if any part of the line is included in the range. The user’s selection may not be preserved. Source may be
"user", "api", or "silent". Calls where the source is "user" when the editor is disabled are ignored.
// Method
removeFormat(index: Number, length: Number, source: String = 'api'): Delta
// Examples
quill.setContents([
{ insert: 'Hello', { bold: true } },
{ insert: '\n', { align: 'center' } },
{ insert: { formula: 'x^2' } },
{ insert: '\n', { align: 'center' } },
{ insert: 'World', { italic: true }},
{ insert: '\n', { align: 'center' } }
]);
quill.removeFormat(3, 7);
// Editor contents are now
// [
// { insert: 'Hel', { bold: true } },
// { insert: 'lo\n\nWo' },
// { insert: 'rld', { italic: true }},
// { insert: '\n', { align: 'center' } }
// ]
Selection
getBounds
Retrieves the pixel position (relative to the editor container) and dimensions of a selection at a given location. The user’s current selection need not be at that index. Useful for calculating where to place tooltips.
// Method
getBounds(index: Number, length: Number = 0): { left: Number, top: Number, height: Number, width: Number }
// Examples
quill.setText('Hello\nWorld\n');
quill.getBounds(7); // Returns { height: 15, width: 0, left: 27, top: 31 }
getSelection
Retrieves the user’s selection range, optionally to focus the editor first. Otherwise
null may be returned if editor does not have focus.
// Method
getSelection(focus = false): { index: Number, length: Number }
// Examples
var range = quill.getSelection();
if (range) {
if (range.length == 0) {
console.log('User cursor is at index', range.index);
} else {
var text = quill.getText(range.index, range.length);
console.log('User has highlighted: ', text);
}
} else {
console.log('User cursor is not in editor');
}
setSelection
Sets user selection to given range, which will also focus the editor. Providing
null as the selection range will blur the editor. Source may be "user", "api", or "silent".
// Method
setSelection(index: Number, length: Number = 0, source: String = 'api')
setSelection(range: { index: Number, length: Number }, source: String = 'api')
// Examples
quill.setSelection(0, 5);
Editor
blur
Removes focus from the editor.
// Method
blur()
// Examples
quill.blur();
enable
Set ability for user to edit, via input devices like the mouse or keyboard. Does not affect capabilities of API calls, when the
source is "api" or “silent”.
// Method
enable(enabled: boolean = true)
// Examples
quill.enable();
quill.enable(false); // Disables user input
focus
Focuses the editor and restores its last range.
// Method
focus()
// Examples
quill.focus();
hasFocus
Checks if editor has focus. Note focus on toolbar, tooltips, does not count as the editor.
// Method
hasFocus(): Boolean
// Examples
quill.hasFocus();
update
Synchronously check editor for user updates and fires events, if changes have occurred. Useful for collaborative use cases during conflict resolution requiring the latest up to date state. Source may be
"user", "api", or "silent".
// Method
update(source: String = 'user')
// Examples
quill.update();
Extension
debug
Static method enabling logging messages at a given level:
'error', 'warn', 'log', or 'info'. Passing true is equivalent to passing 'log'. Passing false disables all messages.
// Method
Quill.debug(level: String | Boolean)
// Examples
Quill.debug('info');
import
Static method returning Quill library, format, module, or theme. In general the path should map exactly to Quill source code directory structure. Unless stated otherwise, modification of returned entities may break required Quill functionality and is strongly discouraged.
// Method
Quill.import(path): any
// Examples
var Parchment = Quill.import('parchment');
var Delta = Quill.import('delta');
var Toolbar = Quill.import('modules/toolbar');
var Link = Quill.import('formats/link');
register
Registers a module, theme, or format(s), making them available to be added to an editor. Can later be retrieved with
Quill.import. Use the path prefix of 'formats/', 'modules/', or 'themes/' for registering formats, modules or themes, respectively. For formats specifically there is a shorthand to just pass in the format directly and the path will be autogenerated. Will overwrite existing definitions with the same path.
// Method
Quill.register(format: Attributor | BlotDefinintion, supressWarning: Boolean = false)
Quill.register(path: String, def: any, supressWarning: Boolean = false)
Quill.register(defs: { [String]: any }, supressWarning: Boolean = false)
// Examples
Quill.register({
'formats/custom-format': CustomFormat,
'modules/custom-module-a': CustomModuleA,
'modules/custom-module-b': CustomModuleB,
});
Quill.register(CustomFormat);
addContainer
Adds and returns a container element inside the Quill container, sibling to the editor itself. By convention, Quill modules should have a class name prefixed with
ql-. Optionally include a refNode where container should be inserted before.
// Method
addContainer(className: String, refNode?: Node): Element
addContainer(domNode: Node, refNode?: Node): Element
// Examples
var container = quill.addContainer('ql-custom');
getModule
Retrieves a module that has been added to the editor.
// Method
getModule(name: String): any
// Examples
var toolbar = quill.getModule('toolbar');
Events
text-change
Emitted when the contents of Quill have changed. Details of the change, representation of the editor contents before the change, along with the source of the change are provided. The source will be "user" if it originates from the users. For example:
- User types into the editor
- User formats text using the toolbar
- User uses a hotkey to undo
- User uses OS spelling correction
Changes may occur through an API but as long as they originate from the user, the provided source should still be "user". For example, when a user clicks on the toolbar, technically the toolbar module calls a Quill API to effect the change. But source is still "user" since the origin of the change was the user’s click.
APIs causing text to change may also be called with a "silent" source, in which case text-change will not be emitted. This is not recommended as it will likely break the undo stack and other functions that rely on a full record of text changes.
text-change handler, the selection is not yet updated, and native browser behavior may place it in an inconsistent state. Use selection-change or editor-change for reliable selection updates.
// Callback signature
handler(delta: Delta, oldContents: Delta, source: String)
// Examples
quill.on('text-change', function(delta, oldDelta, source) {
if (source == 'api') {
console.log("An API call triggered this change.");
} else if (source == 'user') {
console.log("A user action triggered this change.");
}
});
selection-change
Emitted when a user or API causes the selection to change, with a range representing the selection boundaries. A null range indicates selection loss (usually caused by loss of focus from the editor). You can also use this event as a focus change event by just checking if the emitted range is null or not.
APIs causing the selection to change may also be called with a"silent" source, in which case selection-change will not be emitted. This is useful if selection-change is a side effect. For example, typing causes the selection to change but would be very noisy to also emit a selection-change event on every character.
// Callback signature
handler(range: { index: Number, length: Number }, oldRange: { index: Number, length: Number }, source: String)
// Examples
quill.on('selection-change', function(range, oldRange, source) {
if (range) {
if (range.length == 0) {
console.log('User cursor is on', range.index);
} else {
var text = quill.getText(range.index, range.length);
console.log('User has highlighted', text);
}
} else {
console.log('Cursor not in the editor');
}
});
editor-change
Emitted when either
text-change or selection-change would be emitted, even when the source is "silent". The first parameter is the event name, either text-change or selection-change, followed by the arguments normally passed to those respective handlers.
// Callback signature
handler(name: String, ...args)
// Examples
quill.on('editor-change', function(eventName, ...args) {
if (eventName === 'text-change') {
// args[0] will be delta
} else if (eventName === 'selection-change') {
// args[0] will be old range
}
});
on
Adds event handler. See text-change or
selection-change for more details on the events themselves.
// Callback signature
on(name: String, handler: Function): Quill
// Examples
quill.on('text-change', function() {
console.log('Text change!');
});
once
Adds handler for one emission of an event. See
text-change or selection-change for more details on the events themselves.
// Callback signature
once(name: String, handler: Function): Quill
// Examples
quill.once('text-change', function() {
console.log('First text change!');
});
off
Removes event handler.
// Callback signature
off(name: String, handler: Function): Quill
// Examples
function handler() {
console.log('Hello!');
}
quill.on('text-change', handler);
quill.off('text-change', handler);
Plugin info
| Property | Description |
|---|---|
| File name | quill.min.js |
| Location | assets/js/vendor/editors/quill/ |
| Links | Github project page |
Trumbowyg
/editors/trumbowyg/
Overview
Trumbowyg is a lightweight WYSIWYG editor optimized for HTML5 support. Options and design are entirely configurable to suit your needs. However, the default design is compatible with Retina display and optimized for a great and simple user experience. Editor can be extended with additional plugins, supports 30+ languages and custom packages. Trumbowyg is an MIT-licensed open source project and completely free to use.Usage
Installation is fairly simple - just load trumbowyg.min.js after jquery.min.js (minimum required version 1.8), make sure $enable-trumbowyg variable in _config.scss is set to true and initialize plugin in JS:
If you don't already do it, load jQuery at bottom of <body> or in <head> and load Trumbowyg after it. In addition, load necessary plugins:
<!-- Include jQuery -->
<script src="assets/js/jquery/jquery.min.js"></script>
<!-- Include editor -->
<script src="assets/js/vendor/editors/trumbowyg/trumbowyg.min.js"></script>
<!-- Plugins -->
<script src="assets/js/vendor/editors/trumbowyg/plugins/base64/trumbowyg.base64.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/cleanpaste/trumbowyg.cleanpaste.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/colors/trumbowyg.colors.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/insertaudio/trumbowyg.insertaudio.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/noembed/trumbowyg.noembed.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/preformatted/trumbowyg.preformatted.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/template/trumbowyg.template.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/upload/trumbowyg.upload.js"></script>
<script src="assets/js/vendor/editors/trumbowyg/plugins/pasteimage/trumbowyg.pasteimage.js"></script>
This the minimal code to transform a simple div into the amazing WYSIWYG editor which is Trumbowyg. Or if you want to set options to Trumbowyg, add an object which contains your options as parameters:
// Initialize default editor
$('#trumbowyg-demo').trumbowyg();
// Initialize with options
$('#trumbowyg-demo').trumbowyg({
btns: ['strong', 'em', '|', 'insertImage'],
autogrow: true
});
Options
Following is a list of all configuration parameters with their corresponding default values:
Prefix
default: 'trumbowyg'
You can change prefix of all class added on elements of Trumbowyg using this option:
// Initialize
$('textarea').trumbowyg({
prefix: 'custom-prefix'
});
Localization
default: null
Your users don't speak english? No problem, Trumbowyg has a language parameter. You have to load the appropriate lang file. Search in /dist/langs folder to see if a language file already exists, if not create it and share it :). Don't forget include the lang file in your pages:
<!-- Include lang file -->
<script type="text/javascript" src="js/dist/langs/fr.min.js"></script>
Make sure to include lang file after Trumbowyg and before instantiating the editor!
Usage of language parameter (English is a fallback lang):
// Initialize
$('textarea').trumbowyg({
lang: 'fr'
});
Button pane
default: all buttons
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 btns option:
// Custom button set
$('.simple-editor').trumbowyg({
btns: [['bold', 'italic'], ['link']]
});
// Default button set
$('.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']
]
});
Hide button texts
default: false
You can hide button texts showed when you put svgPath to false
// Globally
$.trumbowyg.hideButtonTexts = true
// Or locally
$('.trumbowyg').trumbowyg({
hideButtonTexts: true
});
Semantic
default: true
Generates a better, more semantic oriented HTML (i.e. <em> instead of <i>, <strong> instead of <b>, etc.). It's just a boolean. This option deactivates the underline button by default because they do not convey any real semantic. If you want to reactivate them, you have to do it explicitly
:
// Initialize
$('.trumbowyg').trumbowyg({
semantic: false
});
Reset CSS
default: false
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 resetCss option:
// Initialize
$('.trumbowyg').trumbowyg({
resetCss: true
});
Remove format pasted
default: false
If you don't want styles pasted from clipboard (from Word or other webpage for example), pass the removeformatPasted option to true. In order to use this option, you need to define a font size in your CSS or use a reset like normalize.
// Initialize
$('.trumbowyg').trumbowyg({
removeformatPasted: true
});
Auto grow
default: false
The text editing zone can extend itself when writing a long text. To activate this feature, use the autogrow option::
// Initialize
$('.trumbowyg').trumbowyg({
autogrow: true
});
Auto grow on enter
default: false
The text editing zone can extend itself when editor get focus and reduce on blur. To activate this feature, use the following option:
// Initialize
$('.trumbowyg').trumbowyg({
autogrowOnEnter: true
});
Image width modal edit
default: false
Add a field in image insert/edit modal which allow users to set the image width. To activate this feature, use the following option:
// Initialize
$('.trumbowyg').trumbowyg({
imageWidthModalEdit: true
});
URL protocol
default: false
An option to auto-prefix URLs with a protocol. When this option is set to true, URLs missing a protocol will be prefixed with https://. Alternatively, a string can be provided for a custom prefix. For example, a value of true would convert example.com to https://example.com, while a value of ftp converts to ftp://example.com.
// Initialize
$('.trumbowyg').trumbowyg({
urlProtocol: true
});
Minimal links
default: false
Reduce the link overlay to use only url and text fields, omitting title and target.
// Initialize
$('.trumbowyg').trumbowyg({
minimalLinks: true
});
Modal box API
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:
Open and close
For that use the .trumbowyg() method and give parameters 'openModal' or 'closeModal' like that:
// Open modal box
var $modal = $('#editor').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
$('#editor').trumbowyg('closeModal');
An openModal call returns a jQuery object which contains the modal box. You need this object if you want to use listen events (see below)
Events on modal box
Modal boxes in Trumbowy come with two buttons: "Confirm" and "Cancel". An event is associated to each one:
- tbwsubmit: trigged when form is submit
- tbwreset: trigged when user cancel operation
// Open modal
var $modal = $('#editor').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){
// Save datas
$("#editor").trumbowyg('closeModal');
});
$modal.on('tbwcancel', function(e){
$('#editor').trumbowyg('closeModal');
});
Only build inputs in modal
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.
// Config
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();
});
Range
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.
Save and get current range
// Save current range
$('#editor').trumbowyg('saveRange');
// Restore last saved range
$('#editor').trumbowyg('restoreRange');
Get selection range
// Range contains a JavaScript range
var range = $('#editor').trumbowyg('getRange');
Get last saved range text
// Get text
var text = $('#editor').trumbowyg('getRangeText');
Manage content
You can set and get current HTML content of the editor with a getter/setter:
// Get HTML content
$('#editor').trumbowyg('html');
// Set HTML content
$('#editor').trumbowyg('html', "<p>Your content here</p>");
Empty
You can empty the content of the editor.
// Clear editor
$('#editor').trumbowyg('empty');
Enable/disable edition
As you can disable editor by using disabled option, you can also switch between enabled and disabled states by using API.
// States
$('#editor').trumbowyg('disable');
$('#editor').trumbowyg('enable');
Toggle between HTML & WYSIWYG modes
You can switch between HTML view and WYSIWYG view via toggle method.
// Toggle views
$('#editor').trumbowyg('toggle');
Destroy editor
When you wish, you can restore the previous state of the element was used to create the editor.
// Destroy editor
$('#editor').trumbowyg('destroy');
Events
Some events are fired on the jQuery element which is used to build the editor.
- Focus on editor:
tbwfocus - Blur on editor:
tbwblur - Editor is initialized:
tbwinit - Change in editor:
tbwchange - Resize the editor on autogrow:
tbwresize - Paste something in the editor:
tbwpaste - Switch to fullscreen mode:
tbwopenfullscreen - Leave editor's fullscreen mode:
tbwclosefullscreen - Close the editor:
tbwclose
// Events
$('#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
Plugin info
| Property | Description |
|---|---|
| File name | trumbowyg.min.js |
| Location | global_assets/js/plugins/editors/trumbowyg/ |
| Links | Github project page |