TinyMCE
MoxieManager
Drive
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.
Step 1. Start with the Bootstrap setup
There’s plenty of information onhow to start using Bootstrap, so getting directly into the demo:
-
Create an
index.htmlfile – 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.0popper-2.6.0bootstrap-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>- Modify the editor by adding this
<script>content into theheadtag 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>- 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. - To keep things simple for now, set the menubar option to
false. - After you’ve made these changes, open the HTML file in a browser, or run it on a local host with an
http.serverwith python or similar.
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-keywith 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:
-
Add the following code to change the
tinymce.initscript:
<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>-
Save the change, and then reload the demo in your browser:
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.
-
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>- Save and then, reload the demo in your browser to view the TinyMCE Bootstrap skin design:
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.
