Skip to content

Latest commit

 

History

History
231 lines (158 loc) · 7.6 KB

README.md

File metadata and controls

231 lines (158 loc) · 7.6 KB

Froala Editor V3

Build Status npm npm

This branch is for Froala WYSIWYG Editor V3. If you are looking for version 2, please check https://github.com/froala/wysiwyg-editor/tree/v2.

Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.

WYSIWYG HTML Editor

Demos

Download and Install Froala Editor

Install from npm

npm install froala-editor

Install from bower

bower install froala-wysiwyg-editor

Load from CDN

<!-- Include Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/js/froala_editor.pkgd.min.js"></script>

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

Load from CDN as an AMD

<html>
<head>
  <!-- Load CSS files. -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]'
      }
    });
  </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',
      'froala-editor/js/languages/de'
    ], function(FroalaEditor) {
      new FroalaEditor('#edit', {
        language: 'de'
      })
    });
  </script>
</body>

</html>

Load from CDN as CommonJS Module

The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.

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

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

new FroalaEditor('#edit');

Load from as a transpiled ES6/UMD module

The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.

import FroalaEditor from 'froala-editor';

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

new FroalaEditor('#edit');

For more details on customizing the editor, please check the editor documentation.

Use with your existing framework

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 11
  • Safari iOS
  • Chrome, Firefox and Default Browser Android

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for the Froala WYSIWYG HTML Editor. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Froala WYSIWYG Editor. The issue that you are about to report may be already fixed in the latest master branch version: https://github.com/froala/froala-wysiwyg/tree/master/js.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. A JSFiddle is always welcomed, and you can start from this basic one.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the editor please contact us instead of opening an issue.

Licensing

In order to use the Froala Editor you have to purchase one of the following licenses according to your needs. You can find more about that on our website on the pricing plan page.