Styling

Color Themes

The default theme of the WYSIWYG HTML editor can be changed to one that better fits the color palette of your website. You can also create your own theme and customize the rich text editor's interface the way you want.

Try it yourself:

The desired theme can be set using the theme option. Don't forget to include the corresponding CSS theme file.

Edit in JSFiddle

HTML

Copy

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

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

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

CSS

Copy

<!-- Include theme files. -->
<link href="../css/themes/dark.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/gray.min.css" rel="stylesheet" type="text/css" />
<link href="../css/themes/royal.min.css" rel="stylesheet" type="text/css" />

JAVASCRIPT

Copy

<script>
  new FroalaEditor('div#eg-dark-theme', {
    // Set dark theme name.
    theme: 'dark',
    zIndex: 2003
  })

  new FroalaEditor('div#eg-gray-theme', {
    // Set gray theme name.
    theme: 'gray',
    zIndex: 2001
  })

  new FroalaEditor('div#eg-royal-theme', {
    // Set royal theme name.
    theme: 'royal'
  })
</script>