Guides
Legal
On this page:
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"],
theme: "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');autoInit
This option allows you to run inLine by just initializing it. It basically excecutes a querySelector of the selector specified on page load.
| Type | boolean |
| Default | true |
EXAMPLE
Javascript configuration
new inLine('#myEditor', {
autoInit: false
});theme
Use the theme option to choose a different theme.
| Type | string |
| Default | light |
AVAILABLE THEMES
| Value | Result |
|---|---|
| light (default) |
Test it by just selecting this text!
|
| dark |
Test it by just selecting this text!
|
| purple |
Test it by just selecting this text!
|
EXAMPLE
Javascript confiiguration
new inLine('#myEditor', {
theme: 'purple'
});
output
Use the output option to specify an input selector in which inLine will append its content each time you make a change on it. Specify the selector of the node.
| Type | string/boolean |
| Default | false |
EXAMPLE
Javascript configurationn
new inLine('#myEditor', {
output: '#myTexarea'
});html
Use the html option to set the default content of inLine. If false, it automatically consider the content of the textarea/div you are converting 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 specify what buttons you want to include on the inline toolbar.
| Type | array |
| Default | ['bold','italic','underline','strikeThrough','align','unorderedList','orderedList','color','link'] |
EXAMPLE
Sample configuration with Javascript
new inLine('#myEditor', {
toolbar: ['bold','italic','underline']
});colors
Use the colors option to specify what colors you want to include on the color picker.
| Type | array |
| Default | ['#199AA8','#ABD356','#F9C909','#F45945','#222C3A','#4A5360','#727985','#99A0AB','#C1C6D0'] |
EXAMPLE
Sample configuration with Javascript
new inLine('#myEditor', {
colors: ['blue','red','yellow','green','#00EEFF']
});labels
Set the labels option to change the language of the tooltips of your toolbar
| Type | object |
EXAMPLE
Sample configuration with Javascript
new inLine('#myEditor', {
labels: {
back: "Indietro",
bold: "Grassetto",
italic: 'Corsivo',
underline: 'Sottolineato'
}
});DEFAULT (English)
{
back: 'Back',
indexPanel: 'inLine editor toolbar',
bold: 'Bold',
italic: 'Italic',
underline: 'Underline',
strikeThrough: 'Strike',
unorderedList: 'Unordered list',
orderedList: 'Ordered list',
align: 'Align',
alignPanel: 'Align panel',
justifyLeft: 'Left',
justifyCenter: 'Center',
justifyRight: 'Right',
justifyFull: 'Justified',
link: 'Link',
color: 'Color',
colorPanel: 'Color panel',
colorPalette: 'Color palette',
textColor: 'Text color',
backgroundColor: 'Background color',
linkPlaceholder: 'Your link here',
linkPanel: 'Link panel',
removeLink: 'Remove link',
confirmLink: 'Confirm link',
removeStyle: 'Remove style'
}customCSS
Since inLine creates an iframe in which it appends the markup of the text editor, if you want to change the style of the toolbar you have to create a custom CSS and import it with the importCSS option into the javascript initialization function.
| Type | string/boolean |
EXAMPLE
Sample configuration with Javascript
new inLine('#myEditor', {
customCSS: "path/my-theme.css",
theme: "my-theme",
});Style template
You can copy and paste the code below with the default CSS variables directly on your custom CSS stylesheet by changing the name of your theme.
.il--my-theme {
--il__panel-backgroundColor: white;
--il__panel-color: #252525;
--il__button-hover-backgroundColor: rgba(0, 0, 0, .075);
--il__button-open-backgroundColor: rgba(0, 0, 0, .1);
--il__button-active-backgroundColor: #0088FF20;
--il__button-active-color: #0088FF;
--il__button-active-hover-backgroundColor: #0088FF30;
--il__button-active-hover-color: #0088FF;
--il__button-cancel-backgroundColor: #ff645c;
--il__button-cancel-color: white;
--il__button-cancel-hover-backgroundColor: #ff645c30;
--il__button-cancel-hover-color: #ff645c;
--il__button-confirm-backgroundColor: #6cd26c;
--il__button-confirm-color: white;
--il__button-confirm-hover-backgroundColor: #6cd26c30;
--il__button-confirm-hover-color: #6cd26c;
--il__button-reset-color: #ff645c;
--il__tooltip-backgroundColor: #333;
--il__tooltip-color: white;
--il__dropdown-backgroundColor: white;
--il__dropdown-color: #252525;
--il__input-backgroundColor: rgba(0, 0, 0, 0.075);
--il__input-color: #252525;
}