Install Froala AMD

Step 1: Use CDN as AMD

Froala Editor is compatible with AMD module loaders such as RequireJS. The following example shows how to load it along with the Algin plugin from CDN using RequireJS. See the example below:


<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>

Step 2: Create DOM Element

The Froala Editor is quite flexible and can be initialized to ‘attach’ to any standard HTML DOM element, such as a DIV, or a TEXTAREA. We recommend using a DIV element, which can be done as follows:

<div id="example"></div>

The “example” id ties the div element to the instance of the Froala Editor that will be initialized in the following step.

Step 3: Initialize the Editor

The last step consists of initializing the Froala Editor on our previously created empty element.

var editor = new FroalaEditor('#example');

Full Initialization Code Example

This is the summary of the above three steps.

<html>
<head>
    
    <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('#example')
    });
    </script>
</body>

</html>

Save Uploaded Video, Images, and Files

Froala makes it simple to save uploaded files, images or videos on your server or on the cloud. For specific instructions on how to perform each of these tasks with the Froala editor in the most popular server-side languages, check out our detailed guides.

The Froala editor also has documentation on a multitude of server-side SDKs in many languages to ease your development process.

Displaying Content Outside of the Froala Editor

To preserve the look of the edited HTML outside of the rich text editor you have to include the following CSS files.

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />

Also, you should make sure that you put the edited content inside an element that has the class fr-view.

<div class="fr-view">
Here comes the HTML edited with the Froala rich text editor.
</div>

What's Next

Finished the demo and looking to explore Froala further? Check out the resources below to learn even more about the powerful features of the Froala WYSIWYG editor!