UNPKG

6.5 kBMarkdownView Raw
1# [Froala Editor](https://www.froala.com/wysiwyg-editor)
2
3[![Build Status](https://travis-ci.com/froala-labs/froala-editor-js-2.svg?token=6qHm2TpvBKAAVFCrJa9X&branch=master)](https://travis-ci.com/froala-labs/froala-editor-js-2)
4[![npm](https://img.shields.io/npm/dm/froala-editor.svg)](https://www.npmjs.com/package/froala-editor)
5[![npm](https://img.shields.io/npm/v/froala-editor.svg)](https://www.npmjs.com/package/froala-editor)
6
7Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
8
9![WYSIWYG HTML Editor](https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg)
10
11- Slim - only add the plugins that you need ([30+ official plugins](https://www.froala.com/wysiwyg-editor/docs/plugins))
12- [Client frameworks integrations](https://www.froala.com/wysiwyg-editor/docs/framework-plugins/)
13- 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)
14- Code is well commented
15- [Online documentation](https://www.froala.com/wysiwyg-editor/docs) up to date
16- Simple to extend - the plugins are all well commented and simple to use as a basis for your own plugins
17- Well maintained - [frequent releases](https://www.froala.com/wysiwyg-editor/changelog)
18- Great support - [Help Center](https://wysiwyg-editor.froala.help)
19- Awesome [new features](https://wysiwyg-editor-roadmap.froala.com)
20
21
22
23## Demos
24
25- **Basic demo**: https://www.froala.com/wysiwyg-editor
26- **Inline demo**: https://www.froala.com/wysiwyg-editor/inline
27- **Full list**: https://www.froala.com/wysiwyg-editor/examples
28
29
30
31## Get Started
32
33Froala WYSIWYG HTML Editor requires [jQuery](http://jquery.com/) 1.11.0 or higher and the iconic font named [Font Awesome](http://fortawesome.github.io/Font-Awesome/) 4.4.0. You may also use older versions of Font Awesome, but some of the editor's icons will not appear.
34
35```html
36<!-- Include CSS for icons. -->
37<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
38
39<!-- Include Editor style. -->
40<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
41<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/css/froala_style.min.css" rel="stylesheet" type="text/css" />
42
43<!-- Create a tag that we will use as the editable area. -->
44<!-- You can use a div tag as well. -->
45<textarea></textarea>
46
47<!-- Include jQuery lib. -->
48<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
49
50<!-- Include Editor JS files. -->
51<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.0/js/froala_editor.pkgd.min.js"></script>
52
53<!-- Initialize the editor. -->
54<script>
55 $(function() {
56 $('textarea').froalaEditor()
57 });
58</script>
59```
60
61For more details on customizing the editor, please check the editor [documentation](https://www.froala.com/wysiwyg-editor/docs).
62
63
64
65## Download
66
67- npm: `npm install froala-editor`
68- bower: `bower install froala-wysiwyg-editor`
69- CDN: https://cdn.jsdelivr.net/npm/froala-editor/
70- Angular JS: https://github.com/froala/angular-froala
71- Angular 2: https://github.com/froala/angular2-froala-wysiwyg
72- Aurelia: https://github.com/froala/aurelia-froala-editor
73- CakePHP: https://github.com/froala/wysiwyg-cake
74- Craft 2 CMS: https://github.com/froala/Craft-Froala-WYSIWYG
75- Craft 3 CMS: https://github.com/froala/Craft-3-Froala-WYSIWYG
76- Django: https://github.com/froala/django-froala-editor
77- Ember: https://github.com/froala/ember-froala-editor
78- Knockout: https://github.com/froala/knockout-froala
79- Meteor: https://github.com/froala/meteor-froala
80- Ruby on Rails: https://github.com/froala/wysiwyg-rails
81- React JS: https://github.com/froala/react-froala-wysiwyg/
82- Reactive: https://github.com/froala/froala-reactive
83- Symfony: https://github.com/froala/KMSFroalaEditorBundle
84- Vue JS: https://github.com/froala/vue-froala-wysiwyg/
85- Yii2: https://github.com/froala/yii2-froala-editor
86- Wordpress: https://github.com/froala/wordpress-froala-wysiwyg
87
88
89
90
91## Browser Support
92
93At present, we officially aim to support the last two versions of the following browsers:
94
95- Chrome
96- Edge
97- Firefox
98- Safari
99- Opera
100- Internet Explorer 10+
101- Safari iOS
102- Chrome, Firefox and Default Browser Android
103
104
105
106## Resources
107
108- Demo: [www.froala.com/wysiwyg-editor](http://www.froala.com/wysiwyg-editor)
109- Download Page: [www.froala.com/wysiwyg-editor/download](https://www.froala.com/wysiwyg-editor/download)
110- Documentation: [froala.com/wysiwyg-editor/docs](https://www.froala.com/wysiwyg-editor/docs)
111- License Agreement: [www.froala.com/wysiwyg-editor/terms](https://www.froala.com/wysiwyg-editor/terms)
112- Support: [wysiwyg-editor.froala.help](https://wysiwyg-editor.froala.help/hc/en-us)
113- Roadmap & Feature Requests: [https://wysiwyg-editor-roadmap.froala.com](https://wysiwyg-editor-roadmap.froala.com)
114- Issues [Repo guidelines](https://github.com/highcharts/highcharts/blob/master/repo-guidelines.md)
115
116
117
118
119## Reporting Issues
120
121We 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:
122
1231. 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.
1242. 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/wc5c3jhk/).
1253. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
126
127
128
129
130## Technical Support or Questions
131
132If you have questions or need help integrating the editor please [contact us](https://www.froala.com/wysiwyg-editor/contact) instead of opening an issue.
133
134
135
136## Licensing
137
138In 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).