Days
Hours
Minutes
Seconds
x

Froala Editor v4.3 is hereLEARN MORE

Skip to content

Examples

Color Themes

Dark Theme

Red Theme

Gray Theme

Royal Theme

HTML

<div id="eg-dark-theme" class="text-small">
  Dark Theme
</div>
<br/>

<div id="eg-red-theme" class="text-small">
  Red Theme
</div>
<br/>

<div id="eg-gray-theme" class="text-small">
  Gray Theme
</div>
<br/>

<div id="eg-royal-theme" class="text-small">
  Royal Theme
</div>

JAVASCRIPT

<!-- Include theme files. -->
<link href="../css/themes/dark.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/red.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/gray.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/royal.css" rel="stylesheet" type="text/css" />
<script>
  $(function() {
    $('div#eg-dark-theme').editable({
      // Set dark theme name.
      theme: 'dark',

      // Set basic mode.
      inlineMode: false
    })

    $('div#eg-red-theme').editable({
      // Set red theme name.
      theme: 'red',

      // Set basic mode.
      inlineMode: false
    })

    $('div#eg-gray-theme').editable({
      // Set gray theme name.
      theme: 'gray',

      // Set basic mode.
      inlineMode: false
    })

    $('div#eg-royal-theme').editable({
      // Set royal theme name.
      theme: 'royal',

      // Set basic mode.
      inlineMode: false
    })
  });
</script>