### Load Froala Editor from CDN

Source: https://github.com/froala/wysiwyg-editor/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 quick way to get started.

```html
<!-- Include Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea></textarea>

<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

<!-- Initialize the editor. -->
<script>
  new FroalaEditor('textarea');
</script>
```

--------------------------------

### Initialize Editor with Custom Toolbar Buttons

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/buttons/custom_buttons.html

Initialize the Froala editor and include the custom-defined buttons ('alert', 'clear', 'insert') in the toolbar configuration. This example groups custom buttons with other standard buttons in a specific row.

```javascript
new FroalaEditor("#edit", {
  toolbarButtons: [
    ['undo', 'redo', 'bold'],
    ['alert', 'clear', 'insert']
  ]
})
```

--------------------------------

### Initialize Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/font-awesome-5-js.html

Instantiate a Froala Editor instance on an element with the ID 'edit'. This example uses the Font Awesome 5 icons template.

```javascript
(function () { const editorInstance = new FroalaEditor('#edit', { iconsTemplate: 'font_awesome_5' })}())
```

--------------------------------

### Configure WYSIWYG Editor Shortcuts

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/typing/shortcuts.html

Use the `shortcutsEnabled` option to define available keyboard shortcuts and `shortcutsHint` to control tooltip visibility. This example enables 'bold' and 'italic' shortcuts and disables hints.

```javascript
(function () { new FroalaEditor("#edit", { // Set the list of available shortcuts. shortcutsEnabled: ["bold", "italic"], // Disable shortcut hints. shortcutsHint: false }) })()
```

--------------------------------

### Install Froala Editor via npm

Source: https://github.com/froala/wysiwyg-editor/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/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
```

--------------------------------

### Set Custom Placeholder Text

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/styling/placeholder.html

Initialize the Froala editor with a custom placeholder message. This option is useful for guiding users on what content to enter.

```javascript
(function () { new FroalaEditor("#edit", { placeholderText: 'Start typing something...' })
})()
```

--------------------------------

### Configure TAB Key Indentation in Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/typing/tab.html

Use the tabSpaces option to set the number of spaces for TAB key indentation. This example configures it to 4 spaces.

```javascript
(function () { new FroalaEditor("#edit", { tabSpaces: 4 }) })()
```

--------------------------------

### Initialize Multiple Froala Editors

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popular/two_instances.html

Initialize multiple Froala editor instances by providing a comma-separated selector for the target elements. This example initializes editors on elements with IDs 'edit', 'edit1', and 'edit3'.

```javascript
(function () { new FroalaEditor('#edit, #edit1', {}) new FroalaEditor('#edit3', {}) })()
```

--------------------------------

### Initialize Froala Editor with pasteDeniedAttrs

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/paste/attrs.html

Initialize the Froala Editor and specify attributes to be removed upon pasting using the pasteDeniedAttrs option. This example removes 'class' and 'id' attributes.

```javascript
(function () { new FroalaEditor("#edit", { pasteDeniedAttrs: [\'class\', \'id\'] }) })()
```

--------------------------------

### Initialize Editor with Gray Theme

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/themes/gray.html

Use the 'theme' option to set the editor's theme. Ensure the corresponding CSS file is included.

```javascript
(function () { new FroalaEditor("#edit", { theme: 'gray' }) })()
```

--------------------------------

### Initialize Froala Editor with Live Preview

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/api/live_code_preview.html

Initializes the Froala editor and sets up event listeners for `initialized` and `contentChanged`. The `initialized` event ensures the preview is updated on load, and `contentChanged` updates it as the user types. Requires the Froala editor library.

```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())
      }
    }
  })
})()
```

--------------------------------

### Initialize Froala Editor with Inline Toolbar

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popular/toolbar_inline.html

Use the `toolbarInline: true` option to enable the inline toolbar. Configure specific buttons using `toolbarButtons` and its responsive variants.

```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 Froala Editor with Aviary Key

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/aviary/index.html

Initialize the Froala Editor and pass your Aviary API key using the 'aviaryKey' option.

```javascript
(function () { new FroalaEditor("#edit", { aviaryKey: 'your api key' }) })()
```

--------------------------------

### Get Editor HTML Content

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/api/get_html.html

Use this snippet to retrieve the current HTML content of the Froala WYSIWYG Editor. The `true` argument ensures that the raw HTML is returned.

```javascript
const editor = new FroalaEditor("#edit")

// Get the raw HTML content
editor.html.get(true);
```

--------------------------------

### Initialize Froala Editor with Table Resizing Options

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/table/resize.html

Initialize the Froala editor with the table plugin enabled and customize table resizing behavior using tableResizerOffset and tableResizingLimit.

```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
    ['bold', 'italic', 'underline', 'strikeThrough', 'table'],
    ['undo', 'redo']
  ], tableResizerOffset: 10, tableResizingLimit: 50 })
})()
```

--------------------------------

### Initialize Froala Editor with Custom Colors

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popups/colors.html

Initializes the Froala editor with custom color options for the text and background color pickers. 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 Editor with Denied Paste Tags

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/paste/tags.html

Use the pasteDeniedTags option to specify an array of HTML tags that should be removed when pasting content into the editor. This example prevents 'a' and 'i' tags from being pasted.

```javascript
(function () { new FroalaEditor("#edit", { pasteDeniedTags: [\'a\', \'i\'] }) })()
```

--------------------------------

### Initialize Froala Editor with Dark Theme

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/themes/dark.html

Use this code to initialize the Froala editor and apply the dark theme. Ensure the Froala editor is initialized on an element with the ID 'edit'.

```javascript
(function () { new FroalaEditor("#edit", { theme: 'dark' }) })()
```

--------------------------------

### Initialize Froala Editor with Selection Details

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/toolbar/show_selection.html

Initialize the Froala editor with options to display font family, font size, and paragraph format selections in the toolbar. Ensure the necessary buttons are included in the toolbar configuration.

```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
    ['fontFamily'],
    ['fontSize'],
    ['paragraphFormat'],
    ['bold', 'italic', 'underline', 'undo', 'redo', 'codeView']
  ], fontFamilySelection: true, fontSizeSelection: true, paragraphFormatSelection: true })
})()
```

--------------------------------

### Define Custom Popup Template and Buttons

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popups/custom.html

Extend Froala's popup templates and default options to define the structure and buttons for your custom popup. This setup is crucial before defining the plugin.

```javascript
Object.assign(FroalaEditor.POPUP_TEMPLATES, { 'customPlugin.popup': '[_BUTTONS_][[_CUSTOM_LAYER_]]' })
Object.assign(FroalaEditor.DEFAULTS, { popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'], })
```

--------------------------------

### Initialize Froala Editor on Click

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/init_on_click/two_editors.html

Use the initOnClick option to defer editor initialization until the user clicks the editable area. This is recommended for pages with multiple editors to improve performance. Ensure the editor element is targeted by its ID.

```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 }))
})()
```

--------------------------------

### Load Froala Editor as ES6/UMD Module

Source: https://github.com/froala/wysiwyg-editor/blob/master/README.md

Use this snippet to import Froala Editor and its plugins when using module bundlers and transpilers like Babel or TypeScript. Ensure you have installed froala-editor via npm.

```javascript
import FroalaEditor from 'froala-editor'

// Load a plugin.
import 'froala-editor/js/plugins/align.min.js'

// Initialize editor.
new FroalaEditor('#edit')
```

--------------------------------

### Initialize Editor with Table Insert Helper Offset

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/table/insert_helper.html

Use this to initialize the Froala editor and configure the offset for the table insert helper. The offset determines how close the mouse cursor needs to be to the table border to trigger the insert helper.

```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
    ['bold', 'italic', 'underline', 'strikeThrough', 'table'],
    ['undo', 'redo']
  ], tableInsertHelperOffset: 25 })
})()
```

--------------------------------

### Initialize Editor and Preview Content

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/api/live_content_preview.html

Initializes the Froala editor and sets up event listeners to update a preview area. The `initialized` event ensures the preview is updated when the editor first loads, and `contentChanged` updates it as the user types. Requires the editor to be initialized on an element with the ID 'edit' and a preview element with the ID 'preview'.

```javascript
(function () {
  const editorInstance = new FroalaEditor('#edit', {
    enter: FroalaEditor.ENTER_P,
    events: {
      initialized: function () {
        const editor = this
        document.getElementById('preview').innerHTML = editor.html.get()
      },
      contentChanged: function () {
        const editor = this
        document.getElementById('preview').innerHTML = editor.html.get()
      }
    }
  })
})()
```

--------------------------------

### Define and Register Clear Selection Command

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/api/selection.html

Defines a custom icon and registers the 'clearSelection' command for the Froala Editor. This command clears the current text selection. This command does not require any specific setup beyond the editor initialization.

```javascript
FroalaEditor.DefineIcon('clearSelection', {
  NAME: 'trash',
  SVG_KEY: 'remove'
});
FroalaEditor.RegisterCommand('clearSelection', {
  title: 'Clear',
  focus: true,
  undo: false,
  refreshAfterCallback: false,
  callback: function () {
    this.selection.clear()
  }
})
```

--------------------------------

### Initialize Froala Editor with Inline Toolbar

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/toolbar/inline.html

Use this JavaScript code to initialize the Froala editor with an inline toolbar. Ensure the target element ID matches the selector used.

```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
  })
})()
```

--------------------------------

### Load Froala Editor as CommonJS module

Source: https://github.com/froala/wysiwyg-editor/blob/master/README.md

Initialize Froala Editor using CommonJS module syntax, typically in Node.js environments or projects using bundlers like Webpack. Ensure the editor and desired plugins are installed via npm.

```javascript
var FroalaEditor = require('froala-editor');

// Load a plugin.
require('froala-editor/js/plugins/align.min');

// Initialize editor.
new FroalaEditor('#edit');
```

--------------------------------

### Initialize Froala Editor with Custom Plugin

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popups/custom.html

Instantiate the Froala editor, specifying the custom button in the toolbar configuration and enabling the custom plugin. This ensures the custom popup functionality is available.

```javascript
new FroalaEditor("#edit", {
    toolbarButtons: [
        ['bold', 'italic', 'underline', 'strikeThrough', 'myButton'],
        ['undo', 'redo']
    ],
    pluginsEnabled: ['customPlugin']
})
```

--------------------------------

### Initialize Froala Editor on Click

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/init_on_click/inline.html

Use the 'initOnClick: true' option to defer editor initialization until the user clicks the editable area. This improves performance on pages with multiple editors. Ensure the editor element is targeted correctly.

```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 Toolbar at Bottom

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/toolbar/bottom.html

Use this JavaScript code to initialize the Froala Editor and set the toolbar to appear at the bottom of the editor instance. Ensure the Froala Editor library is included and the target element with the ID 'edit' exists.

```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_P, toolbarBottom: true }) })()
```

--------------------------------

### Initialize Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/font-awesome-5-css.html

Basic initialization of Froala Editor with a specific icon template. Ensure the editor element is present in the DOM.

```javascript
(function () { const editorInstance = new FroalaEditor('#edit', { iconsTemplate: 'font_awesome_5' })
})()
```

--------------------------------

### Initialize Froala Editor on Image

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/initialization/init_on_image.html

Use this snippet to initialize the Froala editor on an image element. Ensure the image.min.js plugin is included.

```javascript
(function () { new FroalaEditor("#edit") })()
```

--------------------------------

### Initialize Froala Editor with Quick Insert

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/plugins/quick_insert.html

Initialize the Froala Editor on a specific element. The quick insert button appears when the editor is focused on an empty line.

```javascript
(function () {
  new FroalaEditor("#edit")
})()
```

--------------------------------

### Initialize Froala Editor Inline

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/jquery/mobile.html

Use this code to initialize the Froala Editor in inline mode. Configure enter key behavior and specify the toolbar buttons to display.

```javascript
$(document).on('pageinit', function () {
    const editorInstance = new FroalaEditor('#edit', {
        enter: FroalaEditor.ENTER_P,
        toolbarInline: true,
        toolbarButtons: [
            ['bold', 'italic', 'underline']
        ]
    });
});
```

--------------------------------

### Define Predefined Links with Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/link/predefined_links.html

Use the linkList option to provide a predefined list of links. Each item in the list should have text, href, and optionally a target attribute.

```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' }
    ]
  })
})();
```

--------------------------------

### Initialize Froala Editor with Custom Inline Styles

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/styling/inline.html

Configure the Froala editor to include the inline style button and define custom inline styles. Ensure the 'inlineStyle' button is in the `toolbarButtons` list.

```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;'
  }
})
})()
```

--------------------------------

### Initialize Editor on Link

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/initialization/init_on_link.html

Use the link.min.js plugin to initialize the WYSIWYG editor only on a specific link. The editor will activate when the link is interacted with. Includes an event listener for content changes.

```javascript
(function () {
  const editorInstance = new FroalaEditor('#edit', {
    events: {
      contentChanged: function () {
        console.log('content changed')
      }
    }
  })
})()
```

--------------------------------

### Initialize Froala Editor with zIndex Option

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popular/z_index.html

Use the zIndex option when initializing Froala Editor to set its stacking order. This is crucial for ensuring the editor is visible above other content, especially when it has a gray background.

```javascript
(function () { new FroalaEditor("#edit", { zIndex: 10 }) })()
```

--------------------------------

### Load Froala Editor as AMD module

Source: https://github.com/froala/wysiwyg-editor/blob/master/README.md

Load Froala Editor and its plugins using RequireJS for AMD module compatibility. Ensure RequireJS is configured correctly.

```html
<html>
<head>
  <!-- Load CSS files. -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.css">

  <script src="require.js"></script>
  <script>
    require.config({
      packages: [{
        name: 'froala-editor',
        main: 'js/froala_editor.min'
      }],
      paths: {
        // Change this to your server if you do not wish to use our CDN.
        'froala-editor': 'https://cdn.jsdelivr.net/npm/froala-editor@latest'
      }
    });
  </script>

  <style>
    body {
      text-align: center;
    }
    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }
    .ss {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="editor">
    <div id='edit' style='margin-top:30px;'>
    </div>
  </div>

  <script>
    require([
      'froala-editor',
      'froala-editor/js/plugins/align.min'
    ], function(FroalaEditor) {
      new FroalaEditor('#edit')
    });
  </script>
</body>

</html>
```

--------------------------------

### Initialize Froala Editor with Table Styles

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/table/style.html

Initializes the Froala Editor with the table plugin enabled and custom table styles defined. Ensure CSS classes for 'class1' and 'class2' are defined for styles to be visible.

```javascript
(function () {
  new FroalaEditor("#edit", {
    toolbarButtons: [
      ['bold', 'italic', 'underline', 'strikeThrough', 'table'],
      ['undo', 'redo']
    ],
    // Define new table cell styles.
    tableStyles: {
      class1: 'Class 1',
      class2: 'Class 2'
    }
  })
})()
```

--------------------------------

### Initialize Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/code-mirror.html

Instantiate Froala Editor on a specified element and configure its toolbar buttons. Ensure the target element exists on the page.

```javascript
new FroalaEditor("#edit", {
  toolbarButtons: [
    ['bold', 'italic', 'underline', 'fontSize', 'fontFamily'],
    ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'],
    ['insertLink', 'insertImage', 'undo', 'redo', 'html']
  ]
})
```

--------------------------------

### Initialize Froala Editor on Click

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/init_on_click/basic.html

Use the initOnClick option to delay editor initialization until the user clicks the editable area. This improves performance on pages with multiple editors. Ensure the editor is targeted by its ID.

```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_P, initOnClick: true }) })()
```

--------------------------------

### Initialize Froala Editor with Table Cell Styles

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/table/cell_style.html

Initialize the Froala Editor and define custom table cell styles using the tableCellStyles option. Ensure corresponding CSS classes are defined.

```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'
 }
 })
 })()
```

--------------------------------

### Initialize Froala Editor with Full Page Option

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popular/full_page.html

Initialize the Froala Editor with the 'fullPage' option set to true. This enables the editor to manage the entire HTML document structure.

```javascript
(function () { new FroalaEditor("#edit", { fullPage: true }) })()
```

--------------------------------

### Initialize Froala Editor with Inline Toolbar

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/toolbar/inline_selection.html

Initialize the Froala Editor with inline toolbar enabled and set to be visible without selection. This configuration makes the editor appear on click. Ensure the Froala Editor library is included.

```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 Auto-Adjustable Height

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/styling/adjustable_height.html

Initialize the Froala editor with `heightMin` and `heightMax` options to enable auto-adjustable height. `heightMin` sets the minimum editor height, and `heightMax` sets the maximum height. If content exceeds `heightMax`, a scrollbar will appear.

```javascript
(function () { new FroalaEditor("#edit", { heightMax: 400, heightMin: 200 }) })()
```

--------------------------------

### Initialize Froala Editor with External Toolbar

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/toolbar/external.html

Initialize multiple Froala Editor instances and associate them with a shared external toolbar. Ensure the toolbar container ID is correctly specified in the 'toolbarContainer' option.

```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 Froala Editor with Custom Emoticons

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popups/emoticons.html

Initialize the Froala editor with the emoticons plugin enabled and customize the emoticon display. Use `emoticonsStep` to control the number of emoticons per line and `emoticonsSet` to define the available 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 Froala Editor with RTL Direction

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/international/direction_rtl.html

Use this code to initialize the Froala editor and enable right-to-left text direction. This is useful for languages such as Arabic or Farsi.

```javascript
new FroalaEditor("#edit", { direction: 'rtl' })
```

--------------------------------

### Initialize Froala Editor with Paragraph Styles

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/styling/paragraph.html

Initializes the Froala editor with custom paragraph styles defined in the `paragraphStyles` option. Ensure corresponding CSS classes are defined for 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 on Click

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popular/init_on_click.html

Use the initOnClick option to defer editor initialization until the user clicks the editable area. This improves page performance, especially when multiple editors are present. The editor is initialized on the element with the ID 'edit'.

```javascript
(function () { new FroalaEditor("#edit", { initOnClick: true }) })()
```

--------------------------------

### Initialize Froala Editor with Spell Checker

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/spell-checker/spell-checker.html

Initialize the Froala editor with spell checker enabled. Configure language, context menu, and service paths for spell checking. Ensure scaytAutoload is set to true for automatic initialization.

```javascript
(function () { new FroalaEditor("#edit", { scaytAutoload: true, scaytOptions: { enableOnTouchDevices: false, localization: 'en', extraModules: 'ui', DefaultSelection: 'American English', spellcheckLang: 'en\_US', contextMenuSections: 'suggest|moresuggest', serviceProtocol: 'https', servicePort: '80', serviceHost: 'svc.webspellchecker.net', servicePath: 'spellcheck/script/ssrv.cgi', contextMenuForMisspelledOnly: true, scriptPath: 'https://svc.webspellchecker.net/spellcheck31/lf/scayt3/customscayt/customscayt.js' } })
})()
```

--------------------------------

### Initialize Froala Editor with Drop Event Handler

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/events/drop.html

Initializes the Froala Editor and configures a 'drop' event handler. This handler logs a message, inserts a marker at the drop point, restores the selection, inserts HTML content, and prevents default browser behavior. Ensure the editor is initialized with the correct element ID.

```javascript
(function () {
    const editorInstance = new FroalaEditor('#edit', {
        enter: FroalaEditor.ENTER_P,
        events: {
            drop: function (dropEvent) {
                console.log('drop')
                const instance = this
                editor.markers.insertAtPoint(dropEvent.originalEvent)
                var $marker = editor.$el.find('.fr-marker')
                $marker.replaceWith(FroalaEditor.MARKERS)
                editor.selection.restore()
                // Insert HTML.
                editor.html.insert('Element dropped here.')
                dropEvent.preventDefault()
                dropEvent.stopPropagation()
                return false
            }
        }
    })

    // For Firefox to work.
    document.getElementById('dragme').addEventListener('dragstart', function (e) {
        e.dataTransfer.setData('Text', this.id)
    })
})()
```

--------------------------------

### Initialize Froala Editor with Enter Key Configuration

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/jquery/ui_modal.html

Initializes the Froala editor on an element with ID 'edit'. The `ENTER_P` option ensures that the Enter key creates paragraph tags. This snippet also configures a dialog with a minimum width of 1000 pixels.

```javascript
(function () {
  $("#dialog").dialog({ minWidth: 1000 })
  const editorInstance = new FroalaEditor('#edit', {
    enter: FroalaEditor.ENTER_P,
  })
})()
```

--------------------------------

### Initialize Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/tui/index.html

Use this snippet to initialize the Froala editor on a specific element. Ensure the element ID matches the selector.

```javascript
(function () { new FroalaEditor("#edit", {}) })()
```

--------------------------------

### Configure Froala Editor with Subscript and Superscript Buttons

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/buttons/subscript_superscript.html

Include 'subscript' and 'superscript' in the toolbarButtons array to make these buttons available in the editor.

```javascript
(function () { new FroalaEditor("#edit", { toolbarButtons: [
  ['bold', 'italic'],
  ['indent', 'outdent', 'formatOL', 'formatUL'],
  ['insertLink', 'insertImage', 'subscript', 'superscript']
] })
})()
```

--------------------------------

### Set Royal Theme for Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/themes/royal.html

Initialize the Froala Editor with the 'royal' theme. Ensure the corresponding CSS file for the 'royal' theme is included in your project.

```javascript
(function () { new FroalaEditor("#edit", { theme: 'royal' }) })()
```

--------------------------------

### Initialize Froala Editor with Focus/Blur Events

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/events/blur_focus.html

Initializes the Froala editor and logs messages to the console when the editor gains or loses focus. Ensure the Froala Editor library is included and the target element '#edit' exists.

```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 Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/bootstrap/modal.html

Initialize the Froala WYSIWYG editor on a specific element. Configure options like enter key behavior and height.

```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_P, height: 350, zIndex: 8000 }) })()
```

--------------------------------

### Initialize Froala Editor with Sticky Toolbar Offset

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/toolbar/offset.html

Initialize the Froala Editor on an element with the ID 'edit'. The toolbarStickyOffset option sets the distance in pixels from the top of the viewport when the toolbar becomes sticky.

```javascript
(function () { new FroalaEditor("#edit", { toolbarStickyOffset: 100 }) })()
```

--------------------------------

### Initialize Froala Editors with Shared Inline Toolbar

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/toolbar/external_inline.html

Initializes two Froala editor instances using the same external shared inline toolbar. Ensure the toolbar container is correctly specified to avoid rendering issues.

```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']
  ] })
})()
```

--------------------------------

### Insert Images as Base64 with Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/image/insert_base64.html

Use the `image.beforeUpload` event to read image files as Data URLs and insert them directly into the editor. This prevents the default image upload process. Ensure the editor is initialized with the correct selector.

```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;
      }
    }
  });
})()
```

--------------------------------

### Initialize Froala Editor with Character Counter

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/plugins/char_counter.html

Initialize the Froala Editor with the character counter plugin enabled and set the maximum character limit to 140. Ensure the char_counter.min.js plugin is included.

```javascript
(function () { new FroalaEditor("#edit", { // Set maximum number of characters. charCounterMax: 140 })
})()
```

--------------------------------

### Initialize Froala Editor with Enter Key Configuration

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/3rd-party/bootstrap/lists.html

Initializes the Froala Editor on an element with the ID 'edit'. Configures the editor to use the BR tag for line breaks when the Enter key is pressed. Ensure the Froala Editor library is included before this script.

```javascript
(function () { new FroalaEditor("#edit", { enter: FroalaEditor.ENTER_BR })
})()
```

--------------------------------

### Initialize and Destroy Froala Editor with Events

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/events/initialized_destroy.html

Use this JavaScript code to initialize the Froala editor and handle its 'initialized' and 'destroy' events. Observe console logs to track event triggers. Ensure the HTML has elements with IDs 'init', 'destroy', and 'edit'.

```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 with Inline Toolbar and Iframe Workaround

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/init_inside_iframe/inline.html

This JavaScript code initializes the Froala Editor with an inline toolbar. It includes a workaround to ensure the editor is initialized after the iframe content is fully loaded, which is particularly useful for Chrome browsers. The toolbar configuration specifies buttons for text formatting, alignment, and media insertion.

```javascript
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,
            toolbarInline: true,
            toolbarButtons: [
                ['bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'emoticons'],
                ['paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent'],
                ['insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
            ],
            toolbarButtonsMD: null,
            toolbarButtonsSM: null,
            toolbarButtonsXS: null,
            scrollableContainer: iframe.contentDocument.body
        })
        clearInterval(timer)
        return
    }
}, 100)
```

--------------------------------

### Initialize Froala Editor with Edit in Popup

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/initialization/edit_in_popup.html

Use the 'editInPopup: true' option when initializing the Froala Editor to enable popup editing. Ensure the target element is correctly selected.

```javascript
new FroalaEditor("#edit", { editInPopup: true })
```

--------------------------------

### Define Custom Button Commands

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/buttons/custom_buttons.html

Define custom icons and register commands for new buttons. These can include actions like showing an alert, clearing HTML, or inserting custom content. Ensure the command is registered before initializing the editor.

```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 Iframe Option

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/popular/iframe.html

Use the 'iframe: true' option when initializing Froala Editor to render its content within an iframe. This isolates the editor's content from the rest of the page.

```javascript
(function () { new FroalaEditor("#edit", { iframe: true }) })()
```

--------------------------------

### Initialize Froala Editor with Custom Toolbar Buttons

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/api/selection.html

Initializes the Froala Editor on the element with the ID 'edit' and configures the toolbar to include the custom 'saveSelection', 'restoreSelection', and 'clearSelection' buttons. Ensure the HTML element with id 'edit' exists and is targeted correctly.

```javascript
new FroalaEditor("#edit", {
  toolbarButtons: [
    ['saveSelection', 'restoreSelection', 'clearSelection']
  ]
})
```

--------------------------------

### Define and Register Custom Dropdown Command

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/buttons/custom_dropdown.html

Defines a custom dropdown icon and registers it as a command with options and callbacks. This is used to extend the editor's functionality with custom UI elements.

```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']
  ]
})
})()
```

--------------------------------

### Set Editor Width to 400px

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/styling/width.html

Use the 'width' option to specify the editor's width in pixels. This option is set during editor initialization.

```javascript
(function () { new FroalaEditor("#edit", { width: 400 }) })()
```

--------------------------------

### Initialize and Destroy Froala Editor

Source: https://github.com/froala/wysiwyg-editor/blob/master/html/initialization/initialized_event.html

Use this code to dynamically initialize and destroy the Froala editor instance. It listens for click events on 'init' and 'destroy' buttons. Ensure the editor element has the ID 'edit'.

```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');
    });
})()
```