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

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

Ben Long

November 18th, 2022

3 min read

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, 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 TinyMCE

    How to reload editors in web app forms and refresh content

    by Joe Robinson in How-to Use TinyMCE
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© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing