Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Build a note taking app with our WYSIWYG editor

Ben Long

January 20th, 2021

Written by

Ben Long

Category

How-tos & Tutorials

Tagged

TinyMCE is used as the text entry component in over 100M+ products worldwide. It’s trusted by millions of developers who are creating the next generation of productivity and collaboration applications - check out examples of 9 products you can build with TinyMCE.

Among the many possibilities, TinyMCE can be used to build online note taking apps like Evernote or Notion. And with real-time collaboration already built-in, your applications will empower users to work together more effectively and save businesses a lot of time and money as a result.

In this article, we’re going to take a step by step look at how to configure TinyMCE for note taking applications.

A note taking application built with TinyMCE.

Start with the default config

If this is your first time using TinyMCE, let’s just take a moment to set up a simple project so you can follow along. If you’re already familiar with TinyMCE, you can jump ahead to the next section.

Create an HTML file using the following code from the TinyMCE quickstart guide, replacing no-api-key with your own Tiny API key. If you haven’t yet got an API key, you can get a free API key now.

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
   <script>
     tinymce.init({
       selector: "#mytextarea"
     });
   </script>
 </head>
 <body>
 <h1>TinyMCE Example</h1>
   <form method="post">
     <textarea id="mytextarea"></textarea>
   </form>
 </body>
</html>

Open the HTML file in a browser and the default TinyMCE editor will be displayed, initialized on the element with the same id as that specified by the selector option.

NOTE: You will be presented with a warning notification - This domain is not registered with Tiny Cloud - if you are running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account. To remove the notification, open it on localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.

TinyMCE default configuration with text added.

Remove the menu bar

TinyMCE comes with a menu bar by default; however, many modern collaboration tools do away with menus and, instead, provide a subset of the most commonly used options on a toolbar.

To remove the TinyMCE menu bar, add menubar: false to the init script in your code:

tinymce.init({
  selector: "#mytextarea",
  menubar: false,
  statusbar: false,
});

We’ve also removed the status bar to simplify the editor window further.

Refer to our Tiny docs for more information about the menubar or statusbar options.

Customize the toolbar

TinyMCE is built to be flexible and to fit all kinds of use cases. We provide a default set of toolbar options to get you started, but you can configure it to suit just about any UX. 

For example, in your collaboration workspace, you might want to provide a simple set of formatting options plus the ability to insert images, links, code snippets, and lists.

The default toolbar options can be overridden using the toolbar option, listing each toolbar control you want to display to users. For example:

tinymce.init({
  selector: "#mytextarea",
  menubar: false,
  statusbar: false,
  plugins: "codesample hr image link lists",
  toolbar:
    "styleselect | bold italic underline strikethrough forecolor backcolor | image link codesample hr | bullist numlist",
});

Some toolbar options depend on particular plugins, in which case, you’ll need to load the corresponding plugins too. For example, here we need to load the codesample, hr, image, link, and lists plugins. See the full table of toolbar buttons; “core” toolbar buttons are part of the core functionality, which means no additional plugin needs to be loaded for them to work.

TinyMCE configured with more toolbar options for users.

Further reading:

Adjust the editor size and position

In many cases, you’ll want the height of the editor to fill the space it’s in. You can do this by setting the height to 100%:

tinymce.init({
  /* ... */ height: "100%",
});

For more control over the positioning and margins of the editor, you can style it accordingly. For example, you might have an <aside> element for a sidebar, and a <main> element in which the editor is running, as demonstrated by the CodePen example.

Simplify the available formats

By default, the formats button on the toolbar comes configured with four submenus of 21 options altogether. However, for a cleaner and simpler UX, you may want to provide users with a smaller set containing the most popular options.

You can do this using the style_formats option. For example:

tinymce.init({
  /* ... */
  style_formats: [
    { title: "Title", block: "h1" },
    { title: "Heading", block: "h2" },
    { title: "Sub heading", block: "h3" },
    { title: "Paragraph", block: "p" },
    { title: "Code", inline: "code" },
    { title: "Quote", block: "blockquote" },
    { title: "Callout", block: "div", classes: "call-out" },
  ],
});
TinyMCE configured with custom formats.

Tiny Checklist

In addition to our core plugins, Tiny provides a set of premium plugins for increased productivity, compliance, and collaboration. These come with our cloud plans - start a free 14 day trial now.

For example, checklists are often used in note taking applications to help people organize critical tasks and increase productivity.

Once you have access to the premium Checklist plugin, you can add it to your configuration simply by adding it as a plugin and adding it to the toolbar:

tinymce.init({
  /* ... */ plugins: "codesample hr image link lists checklist",
  toolbar:
    "styleselect | bold italic underline strikethrough forecolor backcolor | image link codesample hr | bullist numlist checklist",
});
TinyMCE configured with the premium Checklist plugin.

Customize the skin and icons

Tiny’s Premium Skins and Icon Packs have been designed to give you loads of options when it comes to styling the editor to match your desired UI/UX. These are included with Tiny’s new Cloud Essential plan.

For instance, we can apply the snow skin and matching thin icons with the skin and icons config options:

tinymce.init({
  /* ... */ skin: "snow",
  icons: "thin",
});

The snow skin was designed to provide a spacious and fresh editing experience, especially with the thin icon pack - designed to work together to make a stunningly beautiful note taking experience. The snow skin also removes the outside border, allowing you to seamlessly incorporate it into your web app.

See the whole range of our premium skins and icon packs. Or create your own custom skins with our online skin tool.

TinyMCE with the snow skin and thin icons.

Complete example

Check out the complete example on CodePen. Edit on CodePen to see it running in a larger window.

What next?

Now you know how to get started building your own online word processor; however, there really are so many possibilities to take it further from here.

For example, if you’re looking for a way to emulate an experience similar to Notion or Confluence where users can select a template from a blank page, check out our advanced placeholders demo. This demo shows how to implement an empty page placeholder UI containing complex HTML and buttons to insert templates.

Advanced placeholders in TinyMCE.

Also, Tiny’s real-time collaboration technology is now in closed beta, and we’re keen to get our latest innovation into the hands of developers, businesses, and their employees. Read more about Tiny’s real-time collaboration and how to get involved.

Tag us on Twitter @joinTiny with a screenshot of your TinyMCE configuration. Or contact us for more information about how to integrate and configure TinyMCE for your particular applications. We’re here to help 😎

The new real-time collaboration feature for TinyMCE.
Use Cases
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • How-tos & Tutorials

    Is your domain registered with Tiny Cloud?

    by Joe Robinson in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing