Building Mobile-Friendly WYSIWYG HTML Editors: A How-To Guide

Posted on August 14, 2024
By Carl Cruz
In General,

Introduction

More people use phones to browse the web every day. This means we need good text editors that work on small screens. Let’s look at how to make the best mobile wysiwyg html editor that’s easy to use on phones. We’ll use Froala as an example, but these ideas work for other editors too.

Key Takeaways

best mobile wysiwyg html editor need big buttons for touch screens
They should load fast on phones
You can change them to fit your app
Extra tools can make them work better on phones
They should work with different coding systems

Making it Work on Phones

When you make an editor for phones, you need to think about how people use touchscreens. Here’s a simple way to set up an editor:

const editor = new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline'],
  heightMin: 200,
  heightMax: 400
});

This code makes a basic editor with just a few buttons. It also sets how tall the editor can be.

Changing the Toolbar: You can make the toolbar change based on screen size. Here’s how:

const editor = new FroalaEditor('#editor', {
  toolbarButtons: {
    text: {
      buttons: ['bold', 'italic', 'underline', 'color'],
      visible: 3
    },
    paragraph: {
      buttons: ['align', 'list', 'indent'],
      visible: 3
    },
    insert: {
      buttons: ['link', 'image', 'table'],
      visible: 3
    },
    actions: {
      buttons: ['undo', 'redo', 'fullscreen'],
      align: 'right',
      visible: 2
    }
  },
  toolbarButtonsXS: {
    text: {
      buttons: ['bold', 'italic'],
      visible: 2
    },
    paragraph: {
      buttons: ['align', 'list'],
      visible: 2
    },
    insert: {
      buttons: ['link', 'image'],
      visible: 2
    },
    actions: {
      buttons: ['undo', 'redo'],
      align: 'right',
      visible: 2
    }
  }
});

This setup puts buttons in groups. It shows fewer buttons on small screens.

Making it Fast: Phones can be slow, so we need to make our editor quick. Here’s how to load only what you need:

import FroalaEditor from 'froala-editor';
import 'froala-editor/js/plugins/image.min.js';
import 'froala-editor/js/plugins/link.min.js';

const editor = new FroalaEditor('#editor', {
  pluginsEnabled: ['image', 'link']
});

This code only loads the parts of the editor you want to use. This makes it load faster on phones.

Easy Touch Features

Mobile editors should be easy to use with your fingers. One good feature is quick insert:

const editor = new FroalaEditor('#editor', {
  quickInsertButtons: ['image', 'table', 'list'],
  quickInsertTags: ['p', 'h1', 'h2', 'h3']
});

This lets users add things quickly without searching through menus.

Special Phone Tools

Some editors have extra tools just for phones. Here’s how to use one:

const editor = new FroalaEditor('#editor', {
  mobileIgnoreWidth: 768,
  toolbarButtons: {
    text: {
      buttons: ['bold', 'italic', 'underline', 'color'],
      visible: 3
    },
    paragraph: {
      buttons: ['align', 'list', 'indent'],
      visible: 3
    },
    insert: {
      buttons: ['link', 'image', 'table'],
      visible: 3
    },
    actions: {
      buttons: ['undo', 'redo', 'fullscreen'],
      align: 'right',
      visible: 2
    }
  }
});

This makes sure the editor works well on all phone screens.

Using with Other Code: If you’re using a system like React Native, you can still add an editor. Here’s a simple way:

import React from 'react';
import { WebView } from 'react-native-webview';

const MobileEditor = () => {
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
    </head>
    <body>
      <div id="editor"></div>
      <script>
        new FroalaEditor('#editor', {
          toolbarButtons: ['bold', 'italic', 'underline'],
          heightMin: 200
        });
      </script>
    </body>
    </html>
  `;

  return (
    <WebView
      source={{ html }}
      style={{ flex: 1 }}
    />
  );
};

export default MobileEditor;

This puts the editor inside your app, so it looks like part of it.

Saving What People Write: It’s important to save what people write in the editor. Here’s how:

const editor = new FroalaEditor('#editor', {
  events: {
    'contentChanged': function () {
      const content = this.html.get();
      saveContent(content);
    }
  }
});

function saveContent(content) {
  console.log('Saving:', content);
  // You can send this to a server or save it on the phone
}

This code saves the content whenever someone changes it.

Wrap-up

Making the best wysiwyg html editor for phones takes some work. You need to think about how people use phones, make things load fast, and make it easy to use. By using these tips, you can make an editor that works well on all kinds of phones. As more people use phones to browse the web, knowing how to do this will be very important.

Remember, the key is to keep things simple and fast. Test your editor on different phones to make sure it works well for everyone.