Skip to content

5 Must Have Features In Any Javascript WYSIWYG HTML Editor

Froala offers the the next generation WYSIWYG HTML Editor which 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 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 support, full screen support, character counter support, and export as PDF support. These features really take the Froala WYSIWYG HTML editor to the next level. The rich media support of responsive video, full screen support, and the enhanced image features really make it a great choice for consumer applications. The character counter support 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 functionality can really save time for users in an enterprise environment. These are only 5 out of over 100 features so explore the rest as well.

Let’s 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 it is possible to add new buttons to the image editing popup.

An example of 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 it is possible to add custom style on the selected image inside the WYSIWYG HTML editor.

The classes should be defined in CSS, otherwise no changes will be visible on the image’s appearance.

You can 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 that appears 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

Using the image.min.js plugin it is possible to 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 enables you to insert videos from Youtube or Vimeo and have them change based on your device screen.

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

Learn more.

Can I make an 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 don’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?

Using the char_counter.min.js plugin it is possible to limit the number of characters that can be introduced into the WYSIWYG HTML editor.

The maximum number of characters can 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 as PDF from an HTML editor?

The getPDF button enables you the possibility of exporting the editor content as PDF. The button is included the in the print plugin of the Froala WYSIWYG Editor, so make sure that you include the print plugin.

<!-- 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 above 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 further extend. Our WYSIWYG HTML editor transformed a basic Javascript tool into an essential technology for many industries. In most cases this wouldn’t have been possible without our Inline WYSIWYG HTML Editor.

Ready to get started? Try Froala Editor today.

No comment yet, add your voice below!


Add a Comment

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