### Load Froala Editor from CDN and Initialize
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/README.md
Include Froala Editor's CSS and JS files from a CDN and initialize the editor on a textarea element. This is a simple way to get started.
```html
```
--------------------------------
### Bootstrap Grid Layout Example
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/3rd-party/bootstrap/grid.html
Demonstrates a responsive grid layout with different column sizes using Bootstrap classes within a Froala editor context. This structure allows for content to adapt to various screen sizes.
```html
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
```
--------------------------------
### Configure TAB Key for Indentation
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/typing/tab.html
Use the `tabSpaces` option to set the number of spaces for TAB key indentation. This example sets it to 4 spaces.
```javascript
(function () { new FroalaEditor("#edit", { tabSpaces: 4 }) })()
```
--------------------------------
### Install Froala Editor via npm
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/README.md
Use npm to install the Froala Editor package. This is a common method for managing project dependencies.
```bash
npm install froala-editor
```
--------------------------------
### Install Froala Editor via Bower
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/README.md
Use Bower to install the Froala Editor package. Bower is a package manager for the web.
```bash
bower install froala-wysiwyg-editor
```
--------------------------------
### Initialize Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/paragraph_modes/enter_p.html
Initializes the Froala Editor on an element with the ID 'edit'. This is the default setup for the editor.
```javascript
(function () {
new FroalaEditor("#edit")
})()
```
--------------------------------
### Load Froala Editor as an AMD module with RequireJS
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/README.md
Integrate Froala Editor using RequireJS, a module loader. This example shows loading the editor and the Align plugin.
```html
```
--------------------------------
### Initialize Froala Editor on Button Click
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/initialization/init_on_button.html
Initialize the Froala editor to appear when a specific button is clicked. This example includes a basic content change event listener.
```javascript
const editorInstance = new FroalaEditor('#edit', { events: { contentChanged: function () { console.log('content changed') } } })
```
--------------------------------
### Configure Froala Editor with Toolbar at Bottom
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/bottom.html
Use the toolbarBottom option to position the editor's toolbar at the bottom. This example also sets the enter key behavior to create paragraphs.
```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_P, toolbarBottom: true }) })()
```
--------------------------------
### Set Custom Placeholder Text
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/styling/placeholder.html
Initialize the Froala Editor with a custom placeholder message. This option is useful for guiding users on what to input.
```javascript
(function () { new FroalaEditor("#edit", { placeholderText: 'Start typing something...' })
})()
```
--------------------------------
### Set Editor Width to 400px
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/styling/width.html
Use the 'width' option to define a fixed width for the WYSIWYG editor. This example sets the editor's width to 400 pixels.
```javascript
(function () { new FroalaEditor("#edit", { width: 400 }) })()
```
--------------------------------
### Initialize Froala Editor with Gray Theme
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/themes/gray.html
Use this snippet to initialize the Froala Editor and apply the 'gray' theme. Ensure the Froala editor's JavaScript and CSS files are included in your project.
```javascript
(function () { new FroalaEditor("#edit", { theme: 'gray' }) })()
```
--------------------------------
### Initialize Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/3rd-party/code-mirror.html
Basic initialization of Froala Editor with a custom toolbar configuration. Ensure the CodeMirror CSS and JS files are included before this script.
```javascript
new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'underline', 'fontSize', 'fontFamily'],
['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'],
['insertLink', 'insertImage', 'undo', 'redo', 'html']
]
})
```
--------------------------------
### Initialize Froala Editor with Color Picker Customization
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popups/colors.html
This snippet shows how to initialize the Froala editor and customize the color picker using options like colorsBackground, colorsDefaultTab, colorsStep, and colorsText. Ensure the colors.min.js plugin is included.
```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor',
],
['undo', 'redo']
],
// Colors list.
colorsBackground: [
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE', '#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
],
colorsDefaultTab: 'background',
colorsStep: 6,
colorsText: [
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE', '#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
]
})
})()
```
--------------------------------
### Initialize Froala Editor with Sticky Offset
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/offset.html
Initialize the Froala Editor and set the toolbarStickyOffset option to 100. This value determines the distance from the top of the viewport at which the toolbar will become sticky.
```javascript
(function () { new FroalaEditor("#edit", { toolbarStickyOffset: 100 }) })()
```
--------------------------------
### Initialize Froala Editor with Custom Inline Styles
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/styling/inline.html
This snippet shows how to initialize the Froala editor, including the 'inlineStyle' button in the toolbar and defining two custom inline styles: 'Big Red' and 'Small Blue'. Ensure the `inline_style.min.js` plugin is included.
```javascript
(function () {
new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough'],
['inlineStyle', 'undo', 'redo']
],
// Define new inline styles.
inlineStyles: {
'Big Red': 'font-size: 20px; color: red;',
'Small Blue': 'font-size: 14px; color: blue;'
}
})
})()
```
--------------------------------
### Get Editor HTML Content
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/api/get_html.html
Use this snippet to retrieve the HTML content from the Froala WYSIWYG Editor instance. Ensure the editor is initialized on the target selector.
```javascript
$('div#selector').froalaEditor('html.get');
```
```javascript
new FroalaEditor("#edit")
```
--------------------------------
### Initialize Froala Editor with Royal Theme
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/themes/royal.html
Use this snippet to initialize the Froala editor and apply the 'royal' theme. Ensure the 'royal' theme CSS file is included in your project.
```javascript
(function () { new FroalaEditor("#edit", { theme: 'royal' })
})()
```
--------------------------------
### Initialize Froala Editor with Font Awesome 5 Icons
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/3rd-party/font-awesome-5-js.html
This snippet shows the basic initialization of a Froala Editor instance, specifying Font Awesome 5 as the icon template. Ensure Font Awesome 5 CSS and JS files are included in your project.
```javascript
(function () {
const editorInstance = new FroalaEditor('#edit', {
iconsTemplate: 'font_awesome_5'
})
})()
```
--------------------------------
### Initialize Froala Editor with Table Resize Options
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/table/resize.html
Initializes the Froala Editor with the table plugin enabled and customizes table resizing behavior using `tableResizerOffset` and `tableResizingLimit`.
```javascript
(function () { new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'table'],
['undo', 'redo']
],
tableResizerOffset: 10,
tableResizingLimit: 50
})
})()
```
--------------------------------
### Prevent Pasting Specific HTML Tags
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/paste/tags.html
Use the pasteDeniedTags option to specify an array of HTML tags that should be removed when content is pasted into the editor. This example prevents 'a' and 'i' tags from being pasted.
```javascript
(function () { new FroalaEditor("#edit", { pasteDeniedTags: [\'a\', \'i\'] }) })()
```
--------------------------------
### Initialize Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/3rd-party/tui/index.html
This snippet shows the basic initialization of the Froala Editor. Ensure the editor element is present in your HTML.
```javascript
(function () { new FroalaEditor("#edit", {}) })()
```
--------------------------------
### Initialize Editor with Toolbar Selection Options
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/show_selection.html
Initializes the Froala editor with options to show font family, font size, and paragraph format selections in the toolbar. Ensure the editor element is correctly targeted.
```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
['fontFamily'],
['fontSize'],
['paragraphFormat'],
['bold', 'italic', 'underline', 'undo', 'redo', 'codeView']
], fontFamilySelection: true, fontSizeSelection: true, paragraphFormatSelection: true })
})()
```
--------------------------------
### Prevent Google Links in Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/link/custom_validation.html
Use the 'link.beforeInsert' event to intercept link insertions. Return 'false' to prevent the link from being inserted. This example blocks any link containing 'google'.
```javascript
const editorInstance = new FroalaEditor('#edit', {
events: {
'link.beforeInsert': function (link, text, attrs) {
console.log(link)
if (link.indexOf('google') >= 0) {
alert('No google link is allowed!')
return false
}
}
}
})
```
--------------------------------
### Configure Editor Shortcuts and Hints
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/typing/shortcuts.html
Initialize the Froala editor with custom shortcuts enabled and disable shortcut hints in button tooltips.
```javascript
(function () {
new FroalaEditor("#edit", {
// Set the list of available shortcuts.
shortcutsEnabled: ['bold', 'italic'],
// Disable shortcut hints.
shortcutsHint: false
})
})()
```
--------------------------------
### Initialize Editor with Dark Theme
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/themes/dark.html
Use this snippet to initialize the Froala editor with the dark theme. Ensure the dark theme CSS file is included in your project.
```javascript
(function () {
new FroalaEditor("#edit", {
theme: 'dark'
})
})()
```
--------------------------------
### Initialize Froala Editor with Full Page Option
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popular/full_page.html
Initializes the Froala Editor with the fullPage option enabled, allowing for the creation of complete HTML documents.
```javascript
(function () { new FroalaEditor("#edit", { fullPage: true })
})()
```
--------------------------------
### Initialize Froala Editor with Aviary Key
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/3rd-party/aviary/index.html
Initialize the Froala Editor and pass your Aviary API key using the 'aviaryKey' option. This enables the Aviary image editing plugin.
```javascript
(function () { new FroalaEditor("#edit", { aviaryKey: 'your api key' }) })()
```
--------------------------------
### Initialize Froala Editors on Click
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/init_on_click/two_editors.html
This snippet shows how to configure multiple Froala editors to initialize on click using the initOnClick option. Each editor can have a different z-index.
```javascript
(function () {
var options = {
enter: FroalaEditor.ENTER_P,
toolbarInline: true,
initOnClick: true,
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'],
['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'],
['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
]
}
new FroalaEditor("#edit", Object.assign(options, { zIndex: 21 }))
new FroalaEditor("#edit2", Object.assign(options, { zIndex: 1 }))
})()
```
--------------------------------
### Initialize Froala Editor with Toolbar Bottom and Sticky Offset
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/bottom_offset.html
Initialize the Froala Editor with the toolbar positioned at the bottom of the editor and a sticky offset of 100 pixels from the bottom of the viewport. This is useful for ensuring the toolbar remains accessible without obscuring content.
```javascript
(function () { new FroalaEditor("#edit", { toolbarStickyOffset: 100, toolbarBottom: true }) })()
```
--------------------------------
### Initialize Froala Editor with Table Insert Helper Offset
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/table/insert_helper.html
This code initializes the Froala Editor with the table plugin enabled and sets the `tableInsertHelperOffset` option to 25 pixels. This controls the distance from the table border where the insert helper appears.
```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'table'],
['undo', 'redo']
], tableInsertHelperOffset: 25 })
})()
```
--------------------------------
### Initialize Froala Editor on Click
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/init_on_click/inline.html
Use the initOnClick option to delay editor initialization until the user clicks the editable area. This is beneficial for pages with multiple rich text editors.
```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_P, toolbarInline: true, initOnClick: true, toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'], ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'], ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'] ] })
})()
```
--------------------------------
### Initialize Froala Editor with Enter BR Mode
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/paragraph_modes/enter_br.html
This snippet shows how to initialize the Froala Editor instance with the enter option set to FroalaEditor.ENTER_BR, which makes the ENTER key insert a BR tag.
```javascript
(function () {
new FroalaEditor("#edit", {
enter: FroalaEditor.ENTER_BR
})
})()
```
--------------------------------
### Initialize Froala Editor with Inline Toolbar
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popular/toolbar_inline.html
Use this snippet to initialize the Froala Editor with the toolbar set to appear inline. Configure the desired buttons for different screen sizes using toolbarButtons options.
```javascript
(function () { new FroalaEditor("#edit", {
toolbarInline: true,
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'],
['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'],
['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
],
toolbarButtonsXS: null,
toolbarButtonsSM: null,
toolbarButtonsMD: null
) })
})()
```
--------------------------------
### Initialize Editor with Custom Buttons
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/buttons/custom_buttons.html
Initializes the Froala Editor with a custom toolbar configuration that includes the previously defined 'alert', 'clear', and 'insert' buttons.
```javascript
new FroalaEditor("#edit", {
toolbarButtons: [
['undo', 'redo', 'bold'],
['alert', 'clear', 'insert']
]
})
```
--------------------------------
### Initialize Editor on a Link
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/initialization/init_on_link.html
This snippet demonstrates initializing the Froala WYSIWYG HTML editor on a specific link element. Ensure the link.min.js plugin is included.
```javascript
(function () {
const editorInstance = new FroalaEditor('#edit', {
events: {
contentChanged: function () {
console.log('content changed')
}
}
})
})()
```
--------------------------------
### Initialize Editors with Shared Inline Toolbar
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/external_inline.html
Initializes two Froala editors with the same inline toolbar configuration. The toolbar is set to be external and shared across both editors.
```javascript
(function () { new FroalaEditor("#edit, #edit2", { toolbarInline: true, toolbarContainer: 'body', toolbarButtons: \
\[ \
\['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'\],
\['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'\],
\['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'\]
\]
})
})()
```
--------------------------------
### Initialize Editor with Insert HTML Button
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/api/insert_html.html
Initializes the Froala editor with a specific configuration, including the custom 'insertHTML' button in the toolbar.
```javascript
new FroalaEditor("#edit", {
toolbarButtons: [
'bold', 'italic', 'underline', 'paragraphFormat', 'formatOL', 'formatUL', 'insertHTML', 'undo', 'redo', 'html'
]
})
```
--------------------------------
### Initialize Froala Editor with Custom Paragraph Styles
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/styling/paragraph.html
This snippet shows how to initialize the Froala Editor with custom paragraph styles. Ensure the CSS classes are defined in your stylesheet for the styles to be visible.
```javascript
(function () {
new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough'],
['paragraphStyle', 'undo', 'redo']
],
// Define new paragraph styles.
paragraphStyles: {
class1: 'Class 1',
class2: 'Class 2'
}
})
})()
```
--------------------------------
### Initialize Froala Editor with Custom Plugin
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popups/custom.html
Initialize the Froala editor on a specific element, enabling the custom plugin and configuring the toolbar to include the button that opens the custom popup.
```javascript
new FroalaEditor('#edit', {
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'myButton'
],
['undo', 'redo'
]
],
pluginsEnabled: ['customPlugin']
})
```
--------------------------------
### Initialize and Destroy Froala Editor with Events
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/events/initialized_destroy.html
This snippet shows how to initialize the Froala Editor and attach event listeners for 'initialized' and 'destroy'. It also includes functionality to re-initialize and destroy the editor, logging messages to the console for each event.
```javascript
(function () {
var editorInstance;
document.getElementById('init').addEventListener('click', function (e) {
document.getElementById('edit').classList.remove('fr-view');
editorInstance = new FroalaEditor('#edit', {
events: {
initialized: function () {
console.log('Initialized');
},
destroy: function () {
console.log('Destroy');
}
}
});
});
document.getElementById('destroy').addEventListener('click', function (e) {
editorInstance.destroy();
document.getElementById('edit').classList.add('fr-view');
});
})()
```
--------------------------------
### Initialize Froala Editor on Image
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/initialization/init_on_image.html
This snippet shows the basic JavaScript code to initialize the Froala Editor on an element with the ID 'edit'. Ensure the image.min.js plugin is included.
```javascript
(function () { new FroalaEditor("#edit") })()
```
--------------------------------
### Initialize Froala Editor with Custom Emoticons
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popups/emoticons.html
Initialize the Froala editor with custom emoticon settings, including the number of emoticons per line and a custom set of emoticons.
```javascript
new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'emoticons'],
['undo', 'redo']
],
emoticonsStep: 4,
emoticonsSet: [
{
'id': 'people',
'name': 'Smileys & People',
'code': '1f600',
'emoticons': [
{ code: '1f600', desc: 'Grinning face' },
{ code: '1f601', desc: 'Grinning face with smiling eyes' },
{ code: '1f602', desc: 'Face with tears of joy' },
{ code: '1f603', desc: 'Smiling face with open mouth' },
{ code: '1f604', desc: 'Smiling face with open mouth and smiling eyes' },
{ code: '1f605', desc: 'Smiling face with open mouth and cold sweat' },
{ code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes' },
{ code: '1f607', desc: 'Smiling face with halo' }
]
}
]
})
```
--------------------------------
### Initialize Editor with Character Limit
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/plugins/char_counter.html
Initialize the Froala editor with a maximum character limit of 140 using the charCounterMax option.
```javascript
(function () { new FroalaEditor("#edit", { // Set maximum number of characters. charCounterMax: 140 })
})()
```
--------------------------------
### Define and Register Custom Commands
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/buttons/custom_buttons.html
Defines custom icons and registers commands for 'alert', 'clear', and 'insert' functionalities. These commands can then be added to the editor's toolbar.
```javascript
FroalaEditor.DefineIcon('alert', { NAME: 'info', SVG_KEY: 'help' })
FroalaEditor.RegisterCommand('alert', {
title: 'Hello',
focus: false,
undo: false,
refreshAfterCallback: false,
callback: function () {
alert('Hello!')
}
})
FroalaEditor.DefineIcon('clear', { NAME: 'remove', SVG_KEY: 'remove' })
FroalaEditor.RegisterCommand('clear', {
title: 'Clear HTML',
focus: false,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.set('')
this.events.focus()
}
})
FroalaEditor.DefineIcon('insert', { NAME: 'plus', SVG_KEY: 'add' })
FroalaEditor.RegisterCommand('insert', {
title: 'Insert HTML',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('My New HTML')
}
})
```
--------------------------------
### Initialize Froala Editor with Enter DIV Option
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/paragraph_modes/enter_div.html
Use this snippet to initialize the Froala Editor and set the ENTER key behavior to create new DIV tags. Ensure the editor element with the ID 'edit' is present in your HTML.
```javascript
(function () {
new FroalaEditor("#edit", {
enter: FroalaEditor.ENTER_DIV
})
})()
```
--------------------------------
### Initialize Editor on Click
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/init_on_click/basic.html
This snippet demonstrates how to initialize the Froala editor with the `initOnClick` option set to true. This defers the full initialization until the user clicks the editable area.
```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_P, initOnClick: true }) })()
```
--------------------------------
### Froala Editor Focus and Blur Event Handling
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/events/blur_focus.html
This snippet shows how to initialize a Froala Editor instance and attach event listeners for the 'focus' and 'blur' events. It logs messages to the console when these events occur on the editor.
```javascript
(function () {
const editorInstance = new FroalaEditor('#edit', {
enter: FroalaEditor.ENTER_P,
events: {
focus: function () {
console.log('focus')
},
blur: function () {
console.log('blur')
}
}
})
document.getElementById('asd').addEventListener('focus', function () {
console.log('input focus')
})
document.getElementById('asd').addEventListener('blur', function () {
console.log('input blur')
})
})()
```
--------------------------------
### Initialize Multiple Editors with Shared Toolbar
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/external.html
Use this snippet to initialize multiple Froala Editor instances and assign a shared toolbar to them using the 'toolbarContainer' option. Ensure the target elements and the toolbar container exist in the DOM.
```javascript
(function () {
new FroalaEditor("#edit1, #edit, #edit2", {
toolbarContainer: '#foo',
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'],
['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'],
['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
]
})
})()
```
--------------------------------
### Initialize and Destroy Froala Editor with Event Listener
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/initialization/initialized_event.html
This snippet shows how to initialize and destroy the Froala Editor instance. It also includes event listeners to trigger these actions and logs the 'initialized' event to the browser console.
```javascript
(function () {
var instance;
document.getElementById('init').addEventListener('click', function (e) {
document.getElementById('edit').classList.remove('fr-view');
instance = new FroalaEditor('#edit');
});
document.getElementById('destroy').addEventListener('click', function (e) {
instance.destroy();
document.getElementById('edit').classList.add('fr-view');
});
})();
```
--------------------------------
### Initialize Froala Editor with Inline Toolbar Visible Without Selection
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/inline_selection.html
This snippet demonstrates how to initialize the Froala editor with inline toolbar functionality and configure it to be visible without any text selection. It sets up various button groups for the toolbar.
```javascript
(function () { new FroalaEditor("#edit", {
toolbarInline: true,
toolbarVisibleWithoutSelection: true,
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'],
['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'],
['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
],
toolbarButtonsXS: null,
toolbarButtonsSM: null,
toolbarButtonsMD: null
) })
})()
```
--------------------------------
### Initialize Froala Editor with Iframe Option
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popular/iframe.html
Use this snippet to initialize the Froala Editor instance with the iframe option set to true. This isolates the editor's content within an iframe.
```javascript
(function () {
new FroalaEditor("#edit", {
iframe: true
})
})()
```
--------------------------------
### Define and Register Custom Image Button
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/image/custom_button.html
This snippet defines a custom icon and registers a command for an image info button. It then initializes the Froala editor, adding the custom button to the image editing popup.
```javascript
(function () { FroalaEditor.DefineIcon('imageInfo', { NAME: 'info', SVG_KEY: 'help' })
FroalaEditor.RegisterCommand('imageInfo', {
title: 'Info',
focus: false,
undo: false,
refreshAfterCallback: false,
callback: function () {
var $img = this.image.get()
alert($img.attr('src'))
}
})
new FroalaEditor("#edit", {
imageEditButtons: ['imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove']
})
})()
```
--------------------------------
### Define Custom Popup Template and Buttons
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popups/custom.html
Define the HTML structure for your custom popup and set default popup buttons. This is typically done before initializing the editor.
```javascript
Object.assign(FroalaEditor.POPUP_TEMPLATES, {
'customPlugin.popup': '[\_BUTTONS\[][\_CUSTOM_LAYER\]]'
})
Object.assign(FroalaEditor.DEFAULTS, {
popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'],
})
```
--------------------------------
### Customize Toolbar Buttons with Separators
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popular/toolbar_buttons.html
Use toolbarButtons and toolbarButtonsXS to define custom button sets for different screen sizes. Separators like '|' and '-' can be included to group buttons.
```javascript
(function () { new FroalaEditor("#edit", {
// Set custom buttons with separator between them.
toolbarButtons: [
['undo', 'redo'],
['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html']
],
toolbarButtonsXS: [
['undo', 'redo'],
['bold', 'italic', 'underline']
]
})
})()
```
--------------------------------
### Define and Register Custom Dropdown
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/buttons/custom_dropdown.html
This snippet defines a custom dropdown icon and registers it as a command with options and callbacks. It then initializes the Froala editor with this custom dropdown included in the toolbar.
```javascript
(function () { FroalaEditor.DefineIcon('my_dropdown', { NAME: 'cog', SVG_KEY: 'cogs' })
FroalaEditor.RegisterCommand('my_dropdown', {
title: 'Advanced options',
type: 'dropdown',
focus: false,
undo: false,
refreshAfterCallback: true,
options: {
'v1': 'Option 1',
'v2': 'Option 2'
},
callback: function (cmd, val) {
console.log(val)
},
// Callback on refresh.
refresh: function ($btn) {
console.log('do refresh')
},
// Callback on dropdown show.
refreshOnShow: function ($btn, $dropdown) {
console.log('do refresh when show')
}
})
new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'formatBlock', 'my_dropdown']
]
})
})()
```
--------------------------------
### Registering RTL and LTR Custom Commands
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/international/rtl_ltr_buttons.html
Defines custom icons and registers commands for 'rightToLeft' and 'leftToRight' actions. These commands modify the direction and text alignment of selected editor blocks.
```javascript
(function () { var changeDirection = function (dir, align) { this.selection.save() var elements = this.selection.blocks() for (var i = 0; i < elements.length; i++) { var element = elements[i] if (element != this.$el.get(0)) { element.style.direction = dir element.style.textAlign = align } } this.selection.restore() } FroalaEditor.DefineIcon('rightToLeft', { NAME: 'long-arrow-left', SVG_KEY: 'undo' }) FroalaEditor.RegisterCommand('rightToLeft', { title: 'RTL', focus: true, undo: true, refreshAfterCallback: true, callback: function () { changeDirection.apply(this, ['rtl', 'right']) } }) FroalaEditor.DefineIcon('leftToRight', { NAME: 'long-arrow-right', SVG_KEY: 'redo' }) FroalaEditor.RegisterCommand('leftToRight', { title: 'LTR', focus: true, undo: true, refreshAfterCallback: true, callback: function () { changeDirection.apply(this, ['ltr', 'left']) } }) new FroalaEditor("#edit", { toolbarButtons: [ ['undo', 'redo', 'bold', 'formatOL', 'formatUL'], ['rightToLeft', 'leftToRight'] ] }) })()
```
--------------------------------
### Initialize Froala Editor Inside Iframe
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/init_inside_iframe/basic.html
This snippet demonstrates the process of initializing Froala Editor within an iframe. It waits for the iframe's content to load before initializing the editor, referencing the iframe's document for configuration.
```javascript
(function () { var timer = setInterval(function () { var iframe = document.getElementById('content') var iframeDoc = iframe.contentDocument || iframe.contentWindow.document // Check if loading is complete if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') { new FroalaEditor('#edit', { //iframe_document : iframeDoc, scrollableContainer: iframeDoc.getElementById("edit") }) clearInterval(timer) return } }, 500) })()
```
--------------------------------
### Initialize Froala Editor with RTL Direction
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/international/direction_rtl.html
Set the 'direction' option to 'rtl' when initializing the Froala editor to enable right-to-left text writing. This is essential for languages like Arabic and Farsi.
```javascript
new FroalaEditor("#edit", { direction: 'rtl' })
```
--------------------------------
### Define Predefined Link List in Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/link/predefined_links.html
Use the `linkList` option to specify an array of link objects. Each object can define the link's text, URL (`href`), and whether it should open in a new tab (`target`).
```javascript
(function(){ new FroalaEditor("#edit",{ linkList: [ { text: 'Froala', href: 'https://froala.com', target: '_blank' }, { text: 'Google', href: 'https://google.com', target: '_blank' }, { text: 'Facebook', href: 'https://facebook.com' } ] }) })();
```
--------------------------------
### Insert Image as Base64
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/image/insert_base64.html
This snippet uses the `image.beforeUpload` event to read an image file as a data URL and insert it into the editor. Return `false` from the event to prevent the default upload behavior.
```javascript
(function () {
const editorInstance = new FroalaEditor('#edit', {
events: {
'image.beforeUpload': function (files) {
const editor = this;
if (files.length) {
var reader = new FileReader();
reader.onload = function (e) {
var result = e.target.result;
editor.image.insert(result, null, null, editor.image.get());
};
reader.readAsDataURL(files[0]);
}
return false;
}
}
});
})()
```
--------------------------------
### Live Code Preview with contentChanged Event
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/api/live_code_preview.html
This JavaScript snippet initializes a Froala editor and uses the contentChanged event to update a preview area with the beautified HTML content of the editor. The initialized event also sets the initial preview.
```javascript
(function () {
const editorInstance = new FroalaEditor('#edit', {
events: {
initialized: function () {
const editor = this
document.getElementById('preview').innerText = editor.codeBeautifier.run(editor.html.get())
},
contentChanged: function () {
const editor = this
document.getElementById('preview').innerText = editor.codeBeautifier.run(editor.html.get())
}
}
})
})()
```
--------------------------------
### Enable Subscript and Superscript Buttons
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/buttons/subscript_superscript.html
Configure the toolbarButtons option to include the 'subscript' and 'superscript' buttons. This allows users to apply these text formats within the editor.
```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
['bold', 'italic'],
['indent', 'outdent', 'formatOL', 'formatUL'],
['insertLink', 'insertImage', 'subscript', 'superscript']
] })
})()
```
--------------------------------
### Initialize and Destroy Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/api/init_destroy.html
This snippet demonstrates how to initialize and destroy the Froala Editor instance using button clicks. It logs messages to the console and toggles a CSS class on the editor element.
```javascript
(function () {
var editor;
document.getElementById('init').addEventListener('click', function (e) {
console.log("Initializing Froala Editor...");
document.getElementById('edit').classList.remove('fr-view');
editor = new FroalaEditor("#edit");
});
document.getElementById('destroy').addEventListener('click', function (e) {
console.log("Destroying Froala Editor...");
editor.destroy();
document.getElementById('edit').classList.add('fr-view');
});
})();
```
--------------------------------
### Listen for Content Changes in Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/events/content_changed.html
This snippet demonstrates how to initialize a Froala Editor instance and attach an event listener for the 'contentChanged' event. When the event is triggered, a message is logged to the browser's console. Ensure the editor is initialized with an element ID and configure the events object in the editor options.
```javascript
(function () {
const editorInstance = new FroalaEditor('#edit', {
enter: FroalaEditor.ENTER_P,
events: {
contentChanged: function () {
console.log('content changed')
}
}
})
})()
```
--------------------------------
### Froala Editor Initialization with Enter Key Configuration
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/3rd-party/bootstrap/grid.html
Initializes the Froala WYSIWYG editor with a specific configuration for the Enter key behavior. This snippet shows how to set the Enter key to insert a line break (BR tag) instead of a paragraph (P tag).
```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_BR })
})()
```
--------------------------------
### Register Button to Show Custom Popup
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popups/custom.html
Register a new editor command 'myButton' that will trigger the display of the custom popup. This includes defining its icon and callback function.
```javascript
FroalaEditor.DefineIcon('buttonIcon', {
NAME: 'star',
SVG_KEY: 'star'
})
FroalaEditor.RegisterCommand('myButton', {
title: 'Show Popup',
icon: 'buttonIcon',
undo: false,
focus: false,
popup: true,
plugin: 'customPlugin',
callback: function () {
if (!this.popups.isVisible('customPlugin.popup')) {
this.customPlugin.showPopup();
} else {
if (this.$el.find('.fr-marker')) {
this.events.disableBlur()
this.selection.restore()
}
this.popups.hide('customPlugin.popup')
}
}
})
```
--------------------------------
### Define Custom Table Cell Styles
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/table/cell_style.html
This snippet demonstrates how to initialize the Froala Editor and define custom table cell styles using the `tableCellStyles` option. Ensure your CSS classes are defined for the styles to be visible.
```javascript
(function () { new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'table'],
['undo', 'redo']
],
// Define new table cell styles.
tableCellStyles: {
class1: 'Class 1',
class2: 'Class 2'
}
})
})()
```
--------------------------------
### Configure Auto-Adjustable Height
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/styling/adjustable_height.html
Set the minimum and maximum height for the Froala editor. heightMin prevents the editor from shrinking below a certain size, while heightMax stops it from growing beyond a specified limit, introducing a scrollbar if content exceeds it.
```javascript
(function () { new FroalaEditor("#edit", { heightMax: 400, heightMin: 200 }) })()
```
--------------------------------
### Initialize Froala Editor in a Modal
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/3rd-party/bootstrap/modal.html
Initializes the Froala WYSIWYG HTML Editor with specific configurations for use within a modal. The 'enter' key behavior is set to Paragraph mode, height is set to 350 pixels, and z-index is set to 8000.
```javascript
(function () {
new FroalaEditor("#edit", {
enter: FroalaEditor.ENTER_P,
height: 350,
zIndex: 8000
})
})()
```
--------------------------------
### Define and Register Selection Commands
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/api/selection.html
Defines icons and registers commands for saving, restoring, and clearing the editor's text selection. These commands are then added to the editor's toolbar.
```javascript
(function () { FroalaEditor.DefineIcon('saveSelection', { NAME: 'download', SVG_KEY: 'print' })
FroalaEditor.RegisterCommand('saveSelection', {
title: 'Save',
focus: true,
undo: false,
refreshAfterCallback: false,
callback: function () {
this.selection.save()
alert('selection saved')
}
})
FroalaEditor.DefineIcon('restoreSelection', {
NAME: 'upload',
SVG_KEY: 'upload'
});
FroalaEditor.RegisterCommand('restoreSelection', {
title: 'Restore',
focus: true,
undo: false,
refreshAfterCallback: false,
callback: function () {
this.selection.restore()
}
})
FroalaEditor.DefineIcon('clearSelection', {
NAME: 'trash',
SVG_KEY: 'remove'
});
FroalaEditor.RegisterCommand('clearSelection', {
title: 'Clear',
focus: true,
undo: false,
refreshAfterCallback: false,
callback: function () {
this.selection.clear()
}
})
new FroalaEditor("#edit", {
toolbarButtons: [
['saveSelection', 'restoreSelection', 'clearSelection']
]
})
})()
```
--------------------------------
### Load Froala Editor as a transpiled ES6/UMD module
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/README.md
Load Froala Editor using ES6 import syntax. This requires a transpiler like Babel or TypeScript.
```javascript
import FroalaEditor from 'froala-editor'
// Load a plugin.
import 'froala-editor/js/plugins/align.min.js'
// Initialize editor.
new FroalaEditor('#edit')
```
--------------------------------
### Define and Register Insert HTML Command
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/api/insert_html.html
Defines a custom icon and registers the 'insertHTML' command for the Froala editor. This command inserts predefined HTML and saves the undo step.
```javascript
(function () {
FroalaEditor.DefineIcon('insertHTML', {
NAME: 'plus',
SVG_KEY: 'add'
})
FroalaEditor.RegisterCommand('insertHTML', {
title: 'Insert HTML',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.insert('Some Custom HTML.')
this.undo.saveStep()
}
})
})
```
--------------------------------
### Customize Toolbar Buttons for Different Screen Sizes
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/toolbar/buttons.html
Configure the toolbar buttons for large and extra-small devices. Use `toolbarButtons` for large screens and `toolbarButtonsXS` for extra-small screens. Buttons can be grouped using separators like '|' or '-'.
```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
['undo', 'redo'],
['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'insertTable', 'html']
], toolbarButtonsXS: [
['undo', 'redo'],
['bold', 'italic', 'underline']
] })
})()
```
--------------------------------
### Initialize Froala Editor with Scrollable Container
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/misc/scrollable_container.html
Use this snippet to initialize Froala Editor, specifying the ID of the scrollable container. Ensure the scrollable container is present in the DOM before initialization.
```javascript
(function () { new FroalaEditor("#edit", { scrollableContainer: '#scrollable' }) })()
```
--------------------------------
### Load Froala Editor as a CommonJS Module
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/README.md
Use CommonJS syntax to load Froala Editor and its plugins. This is suitable for Node.js environments or bundlers that support CommonJS.
```javascript
var FroalaEditor = require('froala-editor');
// Load a plugin.
require('froala-editor/js/plugins/align.min');
// Initialize editor.
new FroalaEditor('#edit');
```
--------------------------------
### Enable keepFormatOnDelete in Froala Editor
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/typing/keep_format.html
Initialize Froala Editor with the keepFormatOnDelete option set to true to preserve text formatting upon deletion.
```javascript
(function () { new FroalaEditor("#edit", { keepFormatOnDelete: true }) })()
```
--------------------------------
### Initialize Multiple Froala Editors
Source: https://github.com/froala/wysiwyg-editor-release/blob/master/html/popular/two_instances.html
Initializes two Froala Editor instances. The first instance targets elements with IDs 'edit' and 'edit1', while the second targets 'edit3'. Ensure these elements exist in your HTML.
```javascript
(function () {
new FroalaEditor('#edit, #edit1', {})
new FroalaEditor('#edit3', {})
})()
```