Froala WYSIWYG editor for Craft CMS (v3)

The implementation of the Froala Editor (license not included) for Craft CMS (v3), _(*1)

Check the Craft CMS v2 version here, _(*2)

Entry Field Example , _(*3)

Installation

You can install this plugin from the Plugin Store or with Composer., _(*4)

From the Plugin Store

Go to the Plugin Store in your project's Control Panel and search for "Froala". Then click on the "Install" button in its modal window., _(*5)

With Composer

Open your terminal and run the following commands:, _(*6)

# go to the project directory
cd /path/to/my-project

# tell Composer to load the plugin
composer require froala/craft-froala-wysiwyg

# tell Craft to install the plugin
./craft install/plugin froala-editor

Known issue (help wanted!)

Adding links to Craft Entries causing issues when you double click on the entry to link to. Just click once and use the "Select" button., _(*7)

Sorry for the inconvience. We're working on these annoying issues. But we decided to release a new version because of some missing important other features (like saving links the Craft way)., _(*8)

Configuration

Froala Configs

You can create custom configs that will be available to your Froala fields. They should be created as JSON files in your config/froalaeditor/ folder., _(*9)

For example, if you created a config/froalaeditor/Simple.json file with the following content:, _(*10)

{
  "toolbarButtons": [
    "bold", "italic", "underline", "strikeThrough", "formatOL", "formatUL", "insertHR", "|",
    "undo", "redo", "|", "paragraphFormat", "paragraphStyle", "|", "html"
  ],
  "paragraphFormat": {
    "N": "Normal",
    "H1": "Heading 1",
    "H2": "Heading 2",
    "H3": "Heading 3",
    "H4": "Heading 4"
  }
}

…then a "Simple" option would become available within the config section on your Froala field’s settings., _(*11)

See the Froala documentation for a list of available config options and buttons., _(*12)

Third party plugins

<!-- Include third party plugins -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="../../js/third_party/font_awesome.min.js"></script>
<script src="../../js/third_party/spell_checker.min.js"></script>
<script src="../../js/third_party/embedly.min.js"></script>
<script src="../../js/third_party/image_tui.min.js"></script> 
<link rel="stylesheet" href="../../css/third_party/image_tui.min.css">

HTML Purifier Configs

Froala fields use HTML Purifier to ensure that no malicious code makes it into its field values, to prevent XSS attacks and other vulnerabilities., _(*13)

You can create custom HTML Purifier configs that will be available to your Froala fields. They should be created as JSON files in your config/htmlpurifier/ folder., _(*14)

Use this as a starting point, which is the default config that Froala fields use if no custom HTML Purifier config is selected:, _(*15)

{
    "Attr.AllowedFrameTargets": ["_blank"],
    "Attr.EnableID": true,
    "HTML.AllowedComments": ["pagebreak"]
}

(The HTML.AllowedComments option is required for the pagebreak plugin.), _(*16)

See the HTML Purifier documentation for a list of available config options., _(*17)

Contributing

If you have any issue regarding the editor itself, please report your issue on the main repository itself., _(*18)

You can raise an issue here if you have found a problem in the integration with Craft CMS v3., _(*19)

If you already have fixed the bug yourself, please create a Pull Request (PR) and send us the fixes with a detailed description of the problem and the fix. Please PR your changes on our develop branch., _(*20)

Any help will be appreciated. Many thanks., _(*21)