Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/froala/wysiwyg-editor
The next generation Javascript WYSIWYG HTML Editor.
https://github.com/froala/wysiwyg-editor
froala javascript rich-text-editor wysiwyg wysiwyg-editor wysiwyg-html-editor
Last synced: 3 days ago
JSON representation
The next generation Javascript WYSIWYG HTML Editor.
- Host: GitHub
- URL: https://github.com/froala/wysiwyg-editor
- Owner: froala
- License: other
- Created: 2014-02-03T00:08:51.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2024-11-18T08:44:44.000Z (24 days ago)
- Last Synced: 2024-12-02T14:08:53.272Z (10 days ago)
- Topics: froala, javascript, rich-text-editor, wysiwyg, wysiwyg-editor, wysiwyg-html-editor
- Language: CSS
- Homepage: https://www.froala.com/wysiwyg-editor
- Size: 77.8 MB
- Stars: 5,303
- Watchers: 132
- Forks: 675
- Open Issues: 787
-
Metadata Files:
- Readme: README.md
- License: License.txt
Awesome Lists containing this project
- awesome-wysiwyg - Froala Editor - A beautifuly designed jQuery WYSIWYG Rich Text Editor based on HTML5. (JQuery Based)
- awesome-web-editor - wysiwyg-editor - The next generation Javascript WYSIWYG HTML Editor. (Rich text editor)
- awesome-wysiwyg-editors - Froala Editor - Free ⊘ Proprietary` - 一个设计精美的基于 HTML5 的 WYSIWYG 富文本编辑器。 ![github star](https://img.shields.io/github/stars/froala/wysiwyg-editor.svg?style=social&label=Star) (独立的)
README
# [Froala Editor V4](https://www.froala.com/wysiwyg-editor)
[![Build Status](https://api.travis-ci.com/froala-labs/froala-editor-js-2.svg?token=RmiyW7AecDyQ8ja7VMDj&branch=master)](https://travis-ci.com/froala-labs/froala-editor-js-2)
[![npm](https://img.shields.io/npm/dm/froala-editor.svg)](https://www.npmjs.com/package/froala-editor)
[![npm](https://img.shields.io/npm/v/froala-editor.svg)](https://www.npmjs.com/package/froala-editor)Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
![WYSIWYG HTML Editor](https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg)
- Slim - only add the plugins that you need ([30+ official plugins](https://www.froala.com/wysiwyg-editor/docs/plugins))
- [Client frameworks integrations](https://www.froala.com/wysiwyg-editor/docs/framework-plugins/)
- Server side SDKs for [PHP](https://www.froala.com/wysiwyg-editor/docs/sdks/php), [Node.JS](https://www.froala.com/wysiwyg-editor/docs/sdks/nodejs), [.NET](https://www.froala.com/wysiwyg-editor/docs/sdks/dotnet), [Java](https://www.froala.com/wysiwyg-editor/docs/sdks/java), and [Python](https://www.froala.com/wysiwyg-editor/docs/sdks/python)
- Code is well commented
- [Online documentation](https://www.froala.com/wysiwyg-editor/docs) up to date
- Simple to extend - the plugins are all well commented and simple to use as a basis for your own plugins
- Well maintained - [frequent releases](https://www.froala.com/wysiwyg-editor/changelog)
- Great support - [Help Center](https://wysiwyg-editor.froala.help)
- Awesome [new features](https://wysiwyg-editor-roadmap.froala.com)
## Demos
- **Basic demo**: https://www.froala.com/wysiwyg-editor
- **Inline demo**: https://www.froala.com/wysiwyg-editor/inline
- **Full list**: https://www.froala.com/wysiwyg-editor/examples## Download and Install Froala Editor
### Install from npm
```
npm install froala-editor
```### Install from bower
```
bower install froala-wysiwyg-editor
```### Load from CDN
Using Froala Editor from CDN is the easiest way to install it and we recommend using the jsDeliver CDN as it mirrors the NPM package.```html
new FroalaEditor('textarea');
```
### Load from CDN as an AMD module
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.
```html
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'
}
});
body {
text-align: center;
}
div#editor {
width: 81%;
margin: auto;
text-align: left;
}
.ss {
background-color: red;
}
require([
'froala-editor',
'froala-editor/js/plugins/align.min'
], function(FroalaEditor) {
new FroalaEditor('#edit')
});
```
### Load Froala Editor as a CommonJS Module
Froala Editor is using an UMD module pattern, as a result it has support for CommonJS. *The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.*```javascript
var FroalaEditor = require('froala-editor');// Load a plugin.
require('froala-editor/js/plugins/align.min');// Initialize editor.
new FroalaEditor('#edit');
```### Load Froala Editor as a transpiled ES6/UMD module
Since Froala Editor supports ES6 (ESM - ECMAScript modules) and UMD (AMD, CommonJS), it can be also loaded as a module with the use of transpilers. E.g. Babel, Typescript. *The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.*```javascript
import FroalaEditor from 'froala-editor'// Load a plugin.
import 'froala-editor/js/plugins/align.min.js'// Initialize editor.
new FroalaEditor('#edit')
```For more details on customizing the editor, please check the editor [documentation](https://www.froala.com/wysiwyg-editor/docs).
## Use with your existing framework
- Angular JS: https://github.com/froala/angular-froala
- Angular 2: https://github.com/froala/angular2-froala-wysiwyg
- Aurelia: https://github.com/froala/aurelia-froala-editor
- CakePHP: https://github.com/froala/wysiwyg-cake
- Craft 2 CMS: https://github.com/froala/Craft-Froala-WYSIWYG
- Craft 3 CMS: https://github.com/froala/Craft-3-Froala-WYSIWYG
- Django: https://github.com/froala/django-froala-editor
- Ember: https://github.com/froala/ember-froala-editor
- Knockout: https://github.com/froala/knockout-froala
- Meteor: https://github.com/froala/meteor-froala
- Ruby on Rails: https://github.com/froala/wysiwyg-rails
- React JS: https://github.com/froala/react-froala-wysiwyg/
- Reactive: https://github.com/froala/froala-reactive
- Symfony: https://github.com/froala/KMSFroalaEditorBundle
- Vue JS: https://github.com/froala/vue-froala-wysiwyg/
- Yii2: https://github.com/froala/yii2-froala-editor
- Wordpress: https://github.com/froala/wordpress-froala-wysiwyg## 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
- Demo: [www.froala.com/wysiwyg-editor](http://www.froala.com/wysiwyg-editor)
- Download Page: [www.froala.com/wysiwyg-editor/download](https://www.froala.com/wysiwyg-editor/download)
- Documentation: [froala.com/wysiwyg-editor/docs](https://www.froala.com/wysiwyg-editor/docs)
- License Agreement: [www.froala.com/wysiwyg-editor/terms](https://www.froala.com/wysiwyg-editor/terms)
- Support: [wysiwyg-editor.froala.help](https://wysiwyg-editor.froala.help/hc/en-us)
- Roadmap & Feature Requests: [https://wysiwyg-editor-roadmap.froala.com](https://wysiwyg-editor-roadmap.froala.com)
- Issues [Repo guidelines](https://github.com/highcharts/highcharts/blob/master/repo-guidelines.md)## 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](https://jsfiddle.net/froala/cgu0dmxh/).
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](https://www.froala.com/wysiwyg-editor/contact) 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](https://www.froala.com/wysiwyg-editor/pricing).