14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

How to enable a Bootstrap WYSIWYG editor: a step-by-step guide

November 18th, 2022

3 min read

Stylized Bootstrap logo and WYSIWYG editor.

Written by

Ben Long

Category

How-to Use TinyMCE

Wouldn't it be great to avoid fighting an uphill battle with WYSIWYGs and Bootstrap? Well at least for the TinyMCE WYSIWYG editor, the steps to get the text area working are fast and efficient.

This article explains how to enable Bootstrap with TinyMCE. It covers how to modify the WYSIWYG to include a demo Bootstrap form.

Example TinyMCE WYSIWYG HTML editor in Bootstrap framework.

Step 1. Start with the Bootstrap setup

There’s plenty of information onhow to start using Bootstrap, so getting directly into the demo:

  1. Create an index.html file – here’s a starter template:

<!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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>TinyMCE WYSIWYG Bootstrap</title>
        
        <!-- TinyMCE CDN -->
        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
        
        <script>
          tinymce.init({
            selector: 'textarea#editor',
          });
        </script>
    </head>

    <body>
    
    <h1>Hello, world!</h1>
      <textarea id="editor"></textarea>

    </body>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js" integrity="sha512-BmM0/BQlqh02wuK5Gz9yrbe7VyIVwOzD1o40yi1IsTjriX/NGF37NyXHfmFzIlMmoSIBXgqDiG1VNU6kB5dBbA==" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</html>

This starter template uses these versions:

  • jquery-3.6.0
  • popper-2.6.0
  • bootstrap-5.0.2

TinyMCE has some configuration changes depending on if you’re using Bootstrap version 4 or 5 – TinyMCE documentation has more information.

Step 2. Modify the WYSIWYG editor with a Bootstrap form

The TinyMCE editor initializes on a textarea element. To set up a Bootstrap form, replace the “Hello, world!” and textarea content with the following code:

<div class="container mt-4 mb-4">
        <!--Bootstrap classes arrange web page components into columns and rows in a grid -->
        <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>
  1. Modify the editor by adding this <script> content into the head tag section <head>...</head>:
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

<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>
  1. If you have not already, sign up for a FREE API Key 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.
  2. To keep things simple for now, set the menubar option to false
  3. After you’ve made these changes, open the HTML file in a browser, or run it on a local host with an http.server with python or similar.

TinyMCE working in with a bootstrap form

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

  1. You have added your domain against the API Key in the Tiny account dashboard.
  2. 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 opening the file in a browser without running it through a local host.)

Step 3. Add focus to the Bootstrap form

At this point, you might be thinking that the WYSIWYG needs something in the design to make the Bootstrap form stand out when it has focus:

  1. Add the following code to change the tinymce.init script:

<script>
  tinymce.init({
  selector: 'textarea#editor',
  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 = "");
       });
     },
  });
</script>
  1. Save the change, and then reload the demo in your browser:

TinyMCE form with a highlight function working

Step 4. Apply the Bootstrap skin to textarea editor

The Bootstrap skin is one of many customizations options available with premium Skins and Icons Pack.

When you sign up for an API key, you also receive 14 days free access to Premium Plugins, as well as premium skins and icons.

  1. Modify the initialization script to include the Bootstrap skin option just after the selector option:

<script>
  tinymce.init({
    selector: 'textarea#editor',
    skin: 'bootstrap', //The TinyMCE Bootstrap skin
    plugins: 'lists, link, image, media',
    […]//Omitted lines are identical to step 2                       
  });
</script>
  1. Save and then, reload the demo in your browser to view the TinyMCE Bootstrap skin design:

TinyMCE Bootstrap skin running in a browser

Are there any other demos?

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 it out when you have a minute:

What next for Bootstrap?

You can configure the features and options are available on the toolbar as a start. Read more about the Tiny WYSIWYG HTML editor and what’s new in TinyMCE 6 — our best WYSIWYG editor yet.

If you’re keen to use TinyMCE in Bootstrap modals, read the guide – It's available right here – using TinyMCE within a modal dialog.

IntegrationBootstrapTinyMCECSS
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-to Use TinyMCEMar 28th, 2024

    How to view and restore document version history in TinyMCE

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.