Fast-Track Your TinyMCE Project with Tiny Docs AI

Getting a rich text editor up and running for your CMS shouldn’t be a time sink. TinyMCE already makes it quick and easy to get started, but we set out to push the experience even further. We’ve seen the rise of agentic AI tools and know how helpful it is to have a smart, automated resource when a human isn’t available to assist. That’s why we built Tiny Docs AI, a new tool for anyone using our docs and seeking answers.

Tiny Docs AI gives configuration advice, shows how to implement plugins, and shares code snippets available to copy and use right away. From beginning to end, you can create the perfect RTE for your project with this little docs bot. In this guide, we’ll show you how to use Tiny Docs AI to create an RTE tailored for a lightweight content management system. No matter your app’s needs, Tiny Docs AI can help you build the right kind of RTE. 

What is Tiny Docs AI?

Tiny Docs AI is an interactive widget that guides you through setting up and configuring TinyMCE for your content management system. Located in the bottom right corner of every TinyMCE documentation page, it offers:

Core features

• Smart documentation navigation: Find exactly what you need without manual searching.
• Code generation: Get working configurations tailored to your CMS requirements.
• Real-time assistance: Get immediate answers as you browse documentation.
• Context-aware help: Receive answers relevant to your current documentation page.
• Multi-turn dialog: Build on previous questions for detailed solutions.

How it changes your workflow

Time to Value: Tiny Docs AI reduces setup time from 2-4 hours to just 15-30 minutes by automating key configuration steps and providing instant, contextual guidance.

Using the widget effectively

1. Ask Direct Questions: The widget understands natural language queries about TinyMCE setup, plugins, and features.
   • Example: "How do I add spell checking to my editor?"
   • Share Context: When asking for help, include details about:
2. Your project type (web app, CMS, etc.)
   • Programming language/framework
   • Specific TinyMCE features you need
3. Request Examples: The widget can generate working code samples.
   • Example: "Show me how to configure TinyMCE with track changes enabled"
   • Refine Results: If the initial response isn’t exactly what you need, ask follow-up questions to get more specific information.

💡 Note: Keep the widget open while you implement solutions to quickly get answers when you need them

How to Write Effective Prompts with Tiny Docs AI

One of the keys to getting the most out of Tiny Docs AI is understanding how it works with TinyMCE’s documentation. Unlike general AI tools, Tiny Docs AI retrieves answers directly from our official documentation, ensuring accurate and reliable responses. This section will guide you through best practices for getting the most helpful responses.

How Tiny Docs AI works

Tiny Docs AI uses retrieval-augmented generation, which means:

• It answers questions based on TinyMCE’s official documentation
• It won’t "make up" information that isn’t in the docs
• More specific questions lead to more accurate answers
• References to specific features or documentation sections help target better responses

Core prompting rules

When writing prompts for Tiny Docs AI, follow these fundamental principles:

#1: Be Clear and Specific

#2: Reference relevant documentation

#3: Avoid ambiguity

Improving Your Results

To get the best possible assistance from Tiny Docs AI:

1. Iterate and Refine
   • If the first answer isn’t quite what you need, try rephrasing your question
   • Add more context about your specific use case
   • Break complex questions into smaller, focused queries
2. Stay On Topic
   • Focus on TinyMCE-specific features and functionality
   • Reference official plugins and configurations
   • Ask about documented integration patterns
3. Use Technical Terms
   • Use exact plugin names and configuration options
   • Reference specific API methods and events
   • Include framework names and versions when relevant
   • Examples of Effective Question Patterns

Setup and Configuration

• "What are the required configuration options for [feature]?"
• "How do I integrate TinyMCE with [framework] version [X.X]?"
• "What are the dependencies for the [plugin] plugin?"

Troubleshooting

• "I'm seeing [specific error] when configuring [feature]. How do I resolve this?"
• "What are the common issues with [plugin] in [environment]?"
• "How do I debug [specific behavior] in the editor?"

Integration

• "What's the correct way to initialize TinyMCE in [framework]?"
• "How do I handle [specific event] in [framework]?"
• "What's the recommended approach for [specific use case]?"

💡 Note: Keep track of which questions yield the most helpful responses. This can help you develop a pattern for effective queries in the future.

How to create a CMS-ready RTE with Tiny Docs AI

Now that we understand how to effectively interact with Tiny Docs AI, let’s put these practices to work. We’ll create a CMS-ready rich text editor using clear, specific prompts that follow our best practices. This walkthrough will show you how to set up the essential features needed for content management:

• Spell checking for content quality
• Accessibility compliance for WCAG standards
• Media/image embedding capabilities
• Word count for content length requirements
• Templates for consistent content structure

Step one: Setup a TinyMCE instance

The first thing we’ll need to do is set up a basic instance of TinyMCE. To work with Tiny Docs AI, go to the TinyMCE documentation and click Ask AI in the bottom righthand corner. 

A fundamental skill when working with AI is knowing how to prompt it. For this walkthrough, I’ll share the prompts I used with Tiny Docs AI and what the results were. To start off, I requested a specific local setup for this demo:

Prompt:

"Set up a basic TinyMCE instance using an index.html file and http-server for my local environment";

Result: The result? Tiny Docs AI delivered a robust code instance of the rich text editor that would go into an index.html file. It has a veritable cornucopia of initial features to get us started, including images, wordcount, and media embedding which I had already mentioned were desired features.

💡 Note: Notice when the TinyMCE script is brought into the HTML doc, it says no-api-key in the midst of the URL. You’ll need to replace that with a real TinyMCE API key. If you don’t already have one, you can get a free TinyMCE API key in two minutes.

<!DOCTYPE html>
<html>
<head>
  <script
    type="text/javascript"
    src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
    referrerpolicy="origin">
  </script>
  <script type="text/javascript">
    tinymce.init({
      selector: '#myTextarea',
      width: 600,
      height: 300,
      plugins: [
        'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
        'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
        'media', 'table', 'emoticons', 'help'
      ],
      toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
        'forecolor backcolor emoticons | help',
      menu: {
        favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
      },
      menubar: 'favs file edit view insert format tools table help',
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
    });
  </script>
</head>
<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>

Launch the app locally

The next step is to launch the rich text editor in the browser with http-server and test the app. Here’s a quick setup if you don’t already have it installed:

• Install Node.js from nodejs.org
• Install http-server by running:

npm install -g http-server

Navigate to the project folder where your index.html file lives, and run these two commands: 

npm i
http-server

Now you can see the basic RTE at http://localhost:8080/, and we can set up an RTE that’s ready for a content management system!

Step two: Add Spell Checker and Accessibility Checker

Let’s add the Spell Checker and Accessibility Checker features to the TinyMCE instance. These plugins are both great for a CMS, and can be customized according to app restrictions and requirements. To get started, let’s ask Tiny Docs AI to help us add both of these plugins to our current RTE. 

Prompt:

"Help me add Spell Checker and Accessibility Checker to our TinyMCE instance";

Result:

Tiny Docs AI returns the code needed to add our Spell Checker and Accessibility Checker plugins to the toolbar and plugins options in the TinyMCE config. Let’s add the code given by Tiny Docs AI to our index.html: 

...
   tinymce.init({
      selector: '#myTextarea',
      width: 600,
      height: 300,
      plugins: [
        'tinymcespellchecker', 'a11ychecker', 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
        'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
        'media', 'table', 'emoticons', 'help'
      ],
      toolbar: 'spellchecker a11ycheck | undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
        'forecolor backcolor emoticons | help',
      spellchecker_language: 'en_US',
...

Save the index.html file and refresh localhost:8080 to see the two new plugins ready to go. 

Step three: Add Templates

Templates make content editing and content management faster and easier for users who have to update, edit, or write content, add images, and quality check every piece to make sure it aligns with site standards. With TinyMCE, templates are customizable and unique to each app. If you already have HTML templates for content, you can add them to your TinyMCE configuration. To get Tiny Docs AI to help, I prompted: 

Prompt

"Add Templates to the basic TinyMCE instance you created at the start of this chat";

Result

Tiny Docs AI let me know that there are three steps to integrating Templates into my TinyMCE instance:

1. Add advtemplate to the plugins option.
2. Add inserttemplate and addtemplate to the toolbar option.
3. Provide a template list using the advtemplate_templates option for a static setup.

Step one: Add the Templates plugin

Next, Tiny Docs gave me useful code snippets to add to my TinyMCE init, which I did:

...
   tinymce.init({
      selector: '#myTextarea',
      width: 600,
      height: 300,
      plugins: [
        'advtemplate', 'tinymcespellchecker', 'a11ychecker', 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
        'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
        'media', 'table', 'emoticons', 'help'
      ],
      toolbar: 'inserttemplate addtemplate | spellchecker a11ycheck | undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
        'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
        'forecolor backcolor emoticons | help',
      spellchecker_language: 'en_US',
      advtemplate_templates: [],
...

You’ll notice that the avdtemplate_templates array is empty, which is deliberate for the next step. 

Step two: Add custom templates for a CMS

When Tiny Docs AI first offered up some custom templates, they were related to email messaging. This was my fault for not asking for templates related to a CMS, so the next step was to prompt Tiny Docs AI to write us some useful example templates related to content management.

Prompt: 

"Add templates specifically targeted to content management systems";

Result: 

Tiny Docs AI returned several useful templates for a CMS: 

advtemplate_templates: [
  {
    title: "Article Header",
    content: "<h1>Article Title</h1><p><em>By Author Name | Date</em></p><hr>",
  },
  {
    title: "Section Heading",
    content: "<h2>Section Title</h2><p>Start your section content here...</p>",
  },
  {
    title: "Image with Caption",
    content:
      '<figure><img src="https://via.placeholder.com/600x200" alt="Image description"><figcaption>Image caption goes here.</figcaption></figure>',
  },
  {
    title: "Callout Box",
    content:
      '<div style="border:1px solid #1976D2; padding:10px; background:#f0f8ff;"><strong>Note:</strong> Important information for readers.</div>',
  },
  {
    title: "Author Bio",
    content:
      '<div class="author-bio"><strong>About the author:</strong> <p>Author Name is a contributor to this CMS.</p></div>',
  },
];

To use these templates, add them to the advtemplate_templates array, save index.html, and refresh localhost:8080. Now your users can build an article in a matter of minutes. There’s no limit to how far you can take the templates, either! They’re all based in HTML and fully customizable according to your app and user needs.

Wrap up: Add more plugins

This basic demo of an advanced rich text editor makes a CMS fast and easy to use, but it can be taken even further. Collaborative features like comments, mentions, and document history are also necessary in content management. Try adding some more plugins to your foundational demo: 

• How to Set Up and Use Revision History in TinyMCE: See document version history and recover content from previous versions. This four-part series will lead you through implementing Revision History with author information and profiles, lazy loading for faster apps, and adding custom CSS to the plugin.
• How to Build a CMS with React and TinyMCE: A Complete Guide: If you like React, check out this tutorial to build an AI Assistant-enabled CMS that connects to an OpenAI account. This advanced guide walks through integrating even more CMS features, like special characters, inline CSS, advanced media embedding, document converters, autolinking, code samples, and much more.