Skip to content

5 Easy Steps To Build Custom A Javascript WYSIWYG HTML Editor

Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications. It is a beautiful Javascript web editor that’s easy to integrate for developers and your users will simply fall in love with its clean design. If you have a legacy project that you are moving to the web using a WYSIWYG HTML editor in your project is a great modernization strategy. Froala Editor has some powerful features which focus on performance, security, and easy integrations both on the front end and back end.

Some of these features include:

  • Ultra high performance
    Froala Editor is one of the most powerful Javascript rich text editors in every single aspect. It is designed with performance in mind and will withstand the most rigorous tests.
  • Well Structured
    Our engineers came up with a fantastic architecture that made this the best Javascript rich text editor.
  • Secure
    We know it’s bullet proof, but don’t take our word for it, just go ahead and hack it. #hackFroala
  • Powerful API
    Froala editor’s API was designed and documented to make the rich text editor easy to customize and interact with.
  • Server Integrations
    Our rich text editor also has support for backend technologies to make developer’s life even easier.
  • Word & Excel Paste
    Choose if you wish to keep or clean formatting when pasting from Microsoft Word and Excel and the rich text editor does it all for you.

It is really easy to customize the Froala Editor for you needs using the online customization wizard in 5 easy steps. You can choose the style of the editor, configure all of the different options (100+), customize the toolbar, pick the language, and finally download the newly configured editor and it’s configuration settings. Let’s walk through each of the 5 steps and learn more about them

How can I choose my WYSIWYG HTML editor style?

The first step in the customizer is to select the format and layout of the editor. The choices are Classic, Document-ready, Inline, Edit in Popup, and Full Page. You can preview each of the options below in the screenshot. Once you select the editor for your needs you can move on to the next step.

 

How can I configure my WYSIWYG HTML editor options?

In this step of the customizer you can configure each of the over 100 features such as Font Family, Emoticons, Colors, Code View, and many many more. Once you select one of the options you can configure each of the properties. It displays the property name, property type, it’s default setting, and a description for the property. If you don’t need to configure any of the options (they can be changed later) you can move on to the next step.

 

 

How can I customize the toolbar of a WYSIWYG HTML editor?

On this step in the customizer you can configure and rearrange the contents of the HTML editor toolbar. For example, if you would like to move the Font Family button to the right of the font size (12) you can do that. Or really any re-arrangement than you would like. You can also disable the buttons as needed from the toolbar. Once you have configured your toolbar you can move on to the next step.

How can I configure the language in the Froala WYSIWYG HTML editor?

On the fourth step of the Froala Editor customizer you can select from a number of different languages such as Arabic, Bosnian, Chinese, Croatian, and many more. If English is the preferred language you can move on to the next step in the customizer.

How can I download my custom WYSIWYG HTML editor?

On the final step of the Froala Editor customizer you can download the editor and it’s configuration. You will receive an archive file which contains all of the files you need to deploy the editor. There is an index.html file containing the sample deployment code, a license.txt file, a readme.md file, and all of the other files needed. The readme.md file lists a number of ways to deploy the editor using a CDN as well.

How can I integrate the Froala Editor with my front end or back end framework?

You can use with your existing framework via the sample source code projects available on GitHub.

  • 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

Ready to customize your own WYSIWYG HTML editor? Let’s get started!

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *