How to set options on inLine
Set an option by using Javascript
You can set an option during the initialization by customizing the related inLine function.
new inLine('#myEditor', {
toolbar: ["bold","italic","underline"],
customClass: "il-editor--dark"
});Options and default values
inLine provides you with several options to customize your inline text editor.
Index
Options with examples
selector
Use the first argument of the inline function to set the selector on which initialize the inline editor.
| Type | string |
EXAMPLE
Javascript configuration
new inLine('#myEditor');output
Use the output option to specify an input selector in which inLine will input its content each time you make a change on it.
| Type | string/boolean |
| Default | false |
EXAMPLE
Javascript configurationn
new inLine('#myEditor', {
output: '#myTexarea'
});Content
Use the content option to define the default text for inLine. If set to false, it will automatically use the existing content of the textarea or div being converted into an inline text editor.
| Type | string | boolean |
| Default | false |
Example
JavaScript Configuration:
new inLine('#myEditor', {
html: 'This is the <strong>default content</strong> of this inline editor!'
});Toolbar
Use the toolbar option to define which tool buttons should be included in the inline toolbar.
| Type | array |
| Default | ['format', '|', 'alignment', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'link', 'emoji', 'highlight'] |
Example
JavaScript configuration:
new inLine('#myEditor', {
toolbar: ['bold', 'italic', 'underline']
});AVAILABLE OPTIONS
| format | Defines the text format, such as paragraph, heading, or list. |
| | | Separator used to group toolbar buttons visually. |
| alignment | Options for text alignment (left, center, right, justify). |
| bold | Makes the selected text bold. |
| italic | Italicizes the selected text. |
| underline | Underlines the selected text. |
| strikethrough | Adds a strikethrough effect to the selected text. |
| link | Inserts or edits a hyperlink. |
| emoji | Opens an emoji picker to insert emojis. |
| highlight | Highlights the selected text with a background color. |
| bigTitle | Convert the selected parent element into an H1 heading. |
| mediumTitle | Convert the selected parent element into an H2 heading. |
| smallTitle | Convert the selected parent element into an H3 heading. |
| unorderedList | Creates an unordered (bullet point) list. |
| orderedList | Creates an ordered (numbered) list. |
| blockquote | Formats the text as a blockquote. |
formats
Use the formats option to define which format should be included in the format tool.
| Type | array |
| Default | ['bigTitle', 'mediumTitle', 'smallTitle', 'unorderedList', 'orderedList', 'blockquote'] |
Example
JavaScript configuration:
new inLine('#myEditor', {
formats: ['bigTitle', 'mediumTitle', 'smallTitle']
});alignments
Use the alignments option to define which alignments should be included in the aligment tool.
| Type | array |
| Default | ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'] |
Example
JavaScript configuration:
new inLine('#myEditor', {
alignments: ['justifyLeft', 'justifyCenter', 'justifyRight']
});allowedTags
The allowedTags parameter lets you specify which HTML tags are permitted in the content, ensuring control over formatting and security.
| Type | array |
| Default | ["p", "strong", "em", "b", "i", "u", "h1", "h2", "h3", "ul", "ol", "li", "br", "a", "img"] |
Example
JavaScript configuration:
new inLine('#myEditor', {
allowedTags: ["p", "b", "i", "u"]
});colors
Use the colors option to specify what colors you want to include on the highlight tool.
| Type | array |
| Default | ['#cbe9ff','#dbf79e','#ffe785','#ffada3'] |
EXAMPLE
Sample configuration with Javascript
new inLine('#myEditor', {
colors: ['blue','red','yellow','green','#00EEFF']
});labels
Set the labels option to customize the labels of the tools tooltips
| Type | object |
EXAMPLE
Sample configuration with Javascript
new inLine('#myEditor', {
labels: {
bold: "Grassetto",
italic: 'Corsivo',
underline: 'Sottolineato'
}
});DEFAULT (English)
labels: {
format: 'Format',
bold: 'Bold',
italic: 'Italic',
underline: 'Underline',
strikethrough: 'Strike',
paragraph: 'Paragraph',
unorderedList: 'Unordered list',
orderedList: 'Ordered list',
bigTitle: 'Big title',
mediumTitle: 'Medium title',
smallTitle: 'Small title',
blockquote: 'Blockquote',
alignment: 'Text alignment',
justifyLeft: 'Left',
justifyCenter: 'Center',
justifyRight: 'Right',
justifyFull: 'Justified',
highlight: 'Highlight',
link: 'Link',
linkPlaceholder: 'Paste link here',
goto: 'Go to link',
addLink: 'Add link',
removeLink: 'Remove link',
confirmLink: 'Confirm link',
reset: 'Reset'
}
customClass
The customClass option allows you to add custom CSS classes to the toolbar node. This is useful for applying specific styles. Read more here.
| Type | string/boolean |
EXAMPLE
Sample configuration with Javascript
new inLine('#myEditor', {
customClass: "il-editor--dark"
});