5 Must Have Features In Any Javascript WYSIWYG HTML Editor

The next generation Froala WYSIWYG HTML Editor is a beautiful Javascript web editor that’s easy for your developers to integrate. Moreover, your users will simply fall in love with its clean design and wide-ranging features.

There are quite a few WYSIWYG HTML editors out there, but the features Froala offers help it stand above the rest. Some of those features include enhanced image support (custom buttons, image styles, and init-on image), responsive video and full-screen support, a character counter, and finally, export as PDF.

These features really take the Froala Javascript Editor to the next level because its rich media support for responsive video, full-screen support, and enhanced image features also make it a great choice for consumer applications. The character counter makes it a great tool to use for business applications where users may be writing ad copy or articles where there is a target character count. Finally, the export as PDF function really saves time for users in an enterprise environment.

These are only 5 out of over 100 features, so explore the rest as well. In this article, we’ll take a deeper dive into each of these 5 features and learn more about them.

What enhanced image support can I get in an HTML editor?

Custom Image Button

When using the image.min.js plugin you can add new buttons to the image editing popup.

Here is an example of a custom button for the image editing popup. More details about defining a custom image button can be found in the Custom Button concept.

After defining custom buttons you need to add them to the image popup buttons list, using the imageEditButtons option.

<script>
  FroalaEditor.DefineIcon('imageInfo', {NAME: 'info', SVG_KEY: 'help'});
  FroalaEditor.RegisterCommand('imageInfo', {
    title: 'Info',
    focus: false,
    undo: false,
    refreshAfterCallback: false,
    callback: function () {
      var $img = this.image.get();
      alert($img.attr('src'));
    }
  });

  new FroalaEditor('div#froala-editor', {
    // Set image buttons, including the name
    // of the buttons defined in customImageButtons.
    imageEditButtons: ['imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove']
  })
</script>

Learn more.

Image Styles

While using the image.min.js plugin inside the WYSIWYG HTML editor, you can also add a custom style to a selected image.

Be careful to define your classes in CSS, otherwise, your changes won’t be visible.

You can also define your own image styles using the imageStyles option. This option is an Object where the key represents the class name and its value is the style name in the dropdown list. It is important to have unique keys otherwise they will not work properly.

By default, you can select multiple image styles at a time. If you want to toggle them and allow only one style to be selected at a time use the imageMultipleStyles option.

<style>
  .class1 {
    border-radius: 10%;
    border: 2px solid #efefef;
  }

  .class2 {
    opacity: 0.5;
  }
</style>

<script>
  new FroalaEditor('div#froala-editor', {
    // Define new image styles.
    imageStyles: {
      class1: 'Class 1',
      class2: 'Class 2'
    },
    imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize']
  })
</script>

Learn more.

Init On Image

From the image.min.js plugin, you can also initialize the WYSIWYG HTML editor only on an image.

<script>
  new FroalaEditor('img#edit');
</script>

Learn more.

How can I add WYSIWYG Responsive Videos in an HTML editor?

Embed videos from your favorite service and have them adapt based on the screen size.
The responsive video features let you insert videos from Youtube or Vimeo that adapt based on your device screen.

<script>
  new FroalaEditor('div#froala-editor', {
    videoResponsive: true,
    toolbarButtons: ['insertVideo']
  })
</script>

Learn more.

Can I make the HTML editor full screen?

Using the fullscreen.min.js plugin it is possible to use the WYSIWYG HTML editor in fullscreen mode.

Use the Fullscreen button to start editing in fullscreen mode.

Make sure that the fullscreen button is included in the toolbarButtons list. By default the fullscreen button is already in the list, but if you changed the buttons list just make sure you didn’t omit the fullscreen button. As you can see in the code below there is no other option to add because it is on by default.

<script>
  new FroalaEditor('div#froala-editor')
</script>

Learn more.

Can I get a character counter in an HTML editor?

The char_counter.min.js plugin lets you limit the number of characters introduced into the WYSIWYG HTML editor.

The maximum number of characters can also be changed using the charCounterMax option.

<script>
  new FroalaEditor('div#froala-editor', {
    // Set maximum number of characters.
    charCounterMax: 140
  })
</script>

Learn more.

Can I export it as a PDF from an HTML editor?

The getPDF button lets you export your editor content as a PDF. You will find the button in the print plugin of the Froala WYSIWYG Editor, so make sure that you include it.

<!-- Include PDF export JS lib. -->
<script type="text/javascript" src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>

<script>
  new FroalaEditor('div#froala-editor', {
    toolbarButtons: ['getPDF']
  })
</script>

Learn more.

As you can see, all of these features are super simple to implement with only a few lines of code.  You can literally do anything with the Froala Editor. The well-written, structured, and documented code is very easy to understand and extend. Our WYSIWYG HTML editor transformed a basic Javascript tool into an essential technology for many industries.

Ready to get started? Try Froala Editor today.