Options

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