Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Stylized Bootstrap logo and WYSIWYG editor.

Enhance Bootstrap forms with WYSIWYG editing

Ben Long

January 29th, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

So you’ve heard of TinyMCE, but you may not have realized how simple it is to integrate with frameworks and design systems, like Bootstrap, to provide a world-class WYSIWYG editing experience on your websites and applications. 

Whether you are building simple forms or a CMS, you can get started with rich text editing in your project with only a few lines of code.

Let’s do it!

Example TinyMCE WYSIWYG HTML editor in Bootstrap framework.

1. Start with the basic Bootstrap setup

I’m not going to delve into the details of how to get started with Bootstrap. There’s plenty of information on their website about that already.

Personally (maybe I’m old school, but…), I like to work with a single index.html file when I’m learning something new if possible. So, here’s the starter template as provided in the Bootstrap getting started docs.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>

  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

 

2. Add the WYSIWYG editor to your Bootstrap project

The TinyMCE editor initializes on a specified element on your page, so let’s first create a basic form, including a textarea where the editor will go.

To do this, replace <h1>Hello, world!</h1> (in the body) with the following code:

<div class="container mt-4 mb-4">
  <div class="row justify-content-md-center">
    <div class="col-md-12 col-lg-8">
      <h1 class="h2 mb-4">Submit issue</h1>
      <label>Describe the issue in detail</label>
      <div class="form-group">
         <textarea id="editor"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

Next, we’ll import and initialize the editor by adding the following code within the head section <head>...</head> of the page.

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script>
  tinymce.init({
    selector: 'textarea#editor',
    menubar: false
  });
</script>

Get a free API Key directly from Tiny, and insert it in the URL above to replace no-api-key. This is the quickest and easiest way to get TinyMCE running in your project. Alternatively, you can check out the self-hosting instructions.

TinyMCE is extremely flexible and customizable, so there are loads of configuration options you can throw at it at this point, but to keep things simple for now, we’ve just removed the menu bar by setting it to false. Also note that the value we’ve provided for selector matches the value we used for the textarea id above. 

After you’ve made these changes, open the HTML file, and the basic editor will appear.

Basic TinyMCE editor in a simple Bootstrap form.

NOTE: If, at this point, you see a warning message, make sure:

  • You have added your domain against the API Key in the Tiny account dashboard.
  • You have replaced no-api-key with your own API Key in the above code. If you haven’t got one yet — it’s all good — you can get a free API Key now.

(The message will remain if you’re simply opening the file locally.)

 

3. Apply the Bootstrap skin to TinyMCE

The Bootstrap skin is one of many cool customizations that come with Tiny’s premium Skins and Icons Packs plugin, but you’ll already have a 30 day trial of all the premium plugins from when you got the API Key in the previous step, so you might as well go ahead and try it on.

Modify the initialization script to include the skin as follows. (We’ll also customize some of the plugins and the toolbar at the same time.)

<script>
  tinymce.init({
    selector: 'textarea#editor',
    skin: 'bootstrap',
    plugins: 'lists, link, image, media',
    toolbar: 'h1 h2 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help',
    menubar: false
  });
</script>

The Bootstrap skin is applied throughout the entire editor interface, best demonstrated by opening one of the plugins from the toolbar, such as the image tool.

TinyMCE editor with customized toolbar and Bootstrap skin applied.
TinyMCE image picker with Bootstrap skin applied.

 

4. Add the blue focus outline to the editor

At this point, you might be thinking, but the editor window doesn’t match the rest of my design because it doesn’t glow when it’s selected!

So here’s a little bit of code you can incorporate in the initialization script that applies the Bootstrap focus styles to the editor:

tinymce.init({
  selector: "textarea#editor",
  skin: "bootstrap",
  plugins: "lists, link, image, media",
  toolbar:
    "h1 h2 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help",
  menubar: false,
  setup: editor => {
    // Apply the focus effect
    editor.on("init", () => {
      editor.getContainer().style.transition =
        "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
    });
    editor.on("focus", () => {
      (editor.getContainer().style.boxShadow =
        "0 0 0 .2rem rgba(0, 123, 255, .25)"),
        (editor.getContainer().style.borderColor = "#80bdff");
    });
    editor.on("blur", () => {
      (editor.getContainer().style.boxShadow = ""),
        (editor.getContainer().style.borderColor = "");
    });
  }
});

And we’re done!

TinyMCE editor with blue focus outline.

 

Complete example of WYSIWYG editor in Bootstrap

This tutorial was based on a live demo that Tiny’s principal designer, Fredrik Danielsson, put together to demonstrate how to configure the editor for the Bootstrap environment.

Check out the demo here:

 

What’s next?

If you’re keen to use TinyMCE in Bootstrap modals, check out the advanced config below.

Otherwise, stay around and learn more about what TinyMCE can do for you. At the base level, you can configure which features and options are available to users on the toolbar, but there’s so much more you can do with it too.

Read more about the Tiny WYSIWYG HTML editor, and see what’s new in TinyMCE 5.1 — our best WYSIWYG editor yet.

 

Advanced configuration: Using TinyMCE in Bootstrap modals

Here are a few extra tips for using TinyMCE in Bootstrap modals. You can also check out the Tiny Bootstrap integration documentation for more information.

Using TinyMCE in a Bootstrap modal dialog window

If you’re using TinyMCE in a Bootstrap dialog, you’ll need to add the following code after tinymce.init({...});:

// Prevent Bootstrap dialog from blocking focusin
$(document).on("focusin", function(e) {
  if (
    $(e.target).closest(
      ".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root"
    ).length
  ) {
    e.stopImmediatePropagation();
  }
});

See this TinyMCE Fiddle for an example. Click on the Open button, then click on the link icon, and you’ll be able to type in the URL field. Without the code above, you won’t be able to focus on the URL field. Try it for yourself!

Autofocus on TinyMCE editor inside Bootstrap modal dialog window

If you’d like TinyMCE to have focus automatically when presented in a Bootstrap modal window, add code similar to the following (see this TinyMCE Fiddle), replacing #myModal and content for your own values as required:

// Autofocus on dialog
$("#myModal").on("shown.bs.modal", function() {
  tinyMCE.get("content").focus();
});
IntegrationBootstrap
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. 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

  • Text "Insert Template" with corresponding icon above.
    How-tos & Tutorials

    Making the most of templates in TinyMCE

    by Marty Friedel in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

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