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

How to build a Workflow app with TinyMCE Cloud

Joe Robinson

August 3rd, 2022

6 min read

Written by

Joe Robinson

Category

How-to Use TinyMCE

Project and workflow apps appear simple in what they do. The key goal is to organize big projects into small manageable tasks, while the secondary goal is to give users the ability to control those many small tasks. They can be labeling tasks, estimates (either time or dollars), applying deadlines, or classifying the tasks in some other industry-specific way.

They’re the big priorities: get them right, and you’ve got a useful tool. 

But what supports all those big moving parts? A series of small moving parts. Those small parts are by no means the fulcrum that leverages the workflow app, but they’re indispensable. And indispensable components provide something useful – they don’t add more maintenance or difficulty. 

This is the exact place that TinyMCE provides support for your workflow app. 

TinyMCE’s rich text editing capabilities are indispensable, trusted by over 1.5 million developers worldwide. Our TinyMCE Cloud set-up is fast, and you can get started with TinyMCE in 5 minutes (one more reason it’s indispensable).

This article explains how to get started with TinyMCE Cloud in a demo project and workflow management app. The demo uses the TinyMCE Workflow starter config.

Getting started with a workflow app

The first step for setting up your workflow app editor component is getting your TinyMCE API key. Go to the TinyMCE account page and follow the steps listed. You can also check on the pricing plans page, and select the plan that works best for you.

The second step is to familiarize yourself with the workflow demo config. To find the workflow config, check on Workflow Solutions Page to find the code snippet you need to get started.

You can check on the video tutorial:

And here is the transcript of the tutorial:

Hey there it's John from Tiny and in this video I'm going to show you how to set up TinyMCE workflow and collaboration starter config loading TinyMCE from the cloud we built this starter config based on workflow and collaboration rich text editing best practices and looking at how companies like atlassian hcl and concord use tiny mce within their workflow and collaboration apps you can use it if you're building your workflow software from scratch or if you're looking to augment your existing workflow software with rich text editing capabilities okay let's get started what i've got here is a local development environment with my code editor on the left and my browser on the right head over to tiny.cloud click on solutions and click on workflow and collaboration you'll see the demo at the top and scroll past it until you get to the starter config the starter config is available in two versions without code tips and with code tips if you're new to tinymce we recommend the with code tips option because it shows you what each configuration option does and links you to the relevant docs so go ahead and copy the starter config into your editor and save your file i'll go load it up in my browser and so what we're looking at right now is the workflow starter config it says the domain is not registered we can still use the editor with this notice but it's kind of annoying for our users and we also don't have the premium features enabled if we're not connected to the cloud so head over to your account copy your api key scroll up to the top of the starter config and replace no api key with your api key save the file and reload the page okay that looks a lot better we have the workflow and collaboration starter config set up in our local development environment now loading tinymc and its plugins from the cloud you can see that this starter config is set up with two editors both that require you to click on them to activate the editor the first editor can be used for editing tickets or tasks or other items within your workflow software and the second one is a bit more basic configured for commenting if you don't have a tiny mce api key you can head over to our pricing page and sign up for a free 14-day trial to try out all the premium features included in the starter config the 14-day trial also comes with access to our support team which can help you get started if you get stuck so what's next you're going to want to learn how to get and set content from the editor i've included a link in the description for you to check that out if you're looking for more information on rich text editing best practices within workflow and collaboration software we've got a ton more content check out our youtube channel or head over to our blog for more information good luck

Locating your FREE API key

Once you have your TinyMCE account, your API key is available on the top section of the account page.

Your key gives you 14 days FREE access to TinyMCE premium plugins. The free trial begins when you use the key in your editor, and load it into a browser with premium plugins configured in the tiny.init script.

Create your demo workflow project

The demo workflow has a UI that matches a task screen that would appear inside a workflow app. It recreates the design of a Kanban board task and comes pre-configured with TinyMCE Cloud premium plugins. And, if you have an existing workflow project, you can adapt these instructions to add TinyMCE in as your upgraded rich text editing component.

To get started:

  1. Set up a folder inside your workstation environment, and include an index.html file inside it.

  2. Copy the following workflow demo HTML into your index file. This content is draw from the TinyMCE Workflow and Collaboration Platforms configuration:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>TinyMCE Workflow Starter Config</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
    let commonConfig = {
      plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
      menubar: false,
    }
      toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
      setup: (editor) => {
        editor.on('focus', () => {
          document.getElementById('editor-description-wrap').classList.add('enabled');
        });
      },

      ...commonConfig,
    });

    tinymce.init({
      selector: "#editor-comment-content",
      toolbar: "bold italic forecolor backcolor | numlist bullist | link image emoticons codesample blockquote ",

      setup: (editor) => {
          editor.on('focus', () => {
            document.getElementById('editor-comment-wrap').classList.add('enabled');
          });
        },
      ...commonConfig,
    });

    function save(id) {
      document.getElementById(id).classList.remove('enabled');
    }

  </script>
  </head>
<body>
  <main>
  </main>
</body>
  1. Save the changes

Configuring the CDN link and API key 

  1. Copy the API key CDN link:

 <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> 
  1. Paste the CDN script before the tinymce.init script in your index.html file:

  1. Change the “your-api-key”, replacing it with your own API key.

  2. Save the changes.

Including the TinyMCE Workflow configuration

    1. Update the TinyMCE configuration script with the following content:
  <script>
    let commonConfig = {
      plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
      menubar: false,
      inline: true,
      toolbar_persist: true,
      object_resizing: false,
      spellchecker_language: 'en',
      spellchecker_active: true
    }
      toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
      fixed_toolbar_container: '#editor-description-toolbar',
      placeholder: "Add a description",
      editimage_toolbar: "rotateleft rotateright",
      setup: (editor) => {
        editor.on('focus', () => {
          document.getElementById('editor-description-wrap').classList.add('enabled');
        });
      },

      ...commonConfig,
    });

    tinymce.init({
      selector: "#editor-comment-content",
      toolbar: "bold italic forecolor backcolor | numlist bullist | link image emoticons codesample blockquote ",
      placeholder: "Add a comment...",
      fixed_toolbar_container: '#editor-comment-toolbar',

      setup: (editor) => {
          editor.on('focus', () => {
            document.getElementById('editor-comment-wrap').classList.add('enabled');
          });
        },
      ...commonConfig,
    });

    function save(id) {
      document.getElementById(id).classList.remove('enabled');
    }

  </script>

This TinyMCE configuration uses a common config, and then extends the configuration by adding it to another TinyMCE editor

  1. Save the changes

Configuring the workflow app interface

  1. Copy the following style tag content, and paste it into your index.html file after the TinyMCE Script content:

<style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        main {
            max-width: 720px;
            margin: auto;
        }

        .editor-wrap.enabled {
            border-radius: 3px;
            border: 1px solid #ccc;
        }

        .editor-content {
            transition: min-height .25s, padding-bottom .25s;
            min-height: 0;
            outline: none;
            border-radius: 1px;
            transition: box-shadow .15s, background-color .15s;
        }

        .editor-content>*:first-child {
            margin-top: 0;
        }

        .editor-content>*:last-child {
            margin-bottom: 0;
        }

        .editor-wrap#editor-description-wrap:hover:not(.enabled) .editor-content {
            background-color: #efefef;
            box-shadow: 0 0 0 6px #efefef;
        }

        .editor-wrap.enabled .editor-content {
            min-height: 140px;
            padding: 1rem;
        }

        .editor-toolbar {
            padding: 3px;
            display: none;
            border-bottom: 1px solid #ccc;
            z-index: 1;
        }

        .editor-wrap.enabled .editor-toolbar {
            display: block;
        }

        .editor-footer {
            margin: 1rem;
            display: none;
            padding-top: .5rem;
        }

        .editor-wrap.enabled .editor-footer {
            display: block;
        }

        .editor-save-btn {
            background: #207ab7;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            border: none;
            outline: none;
            height: 34px;
            line-height-step: 34px;
            padding: 0 16px;
            border-radius: 4px;
            margin: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-user-select: none;
        }

        .editor-cancel-btn {
            background: #dfe3ec;
            font-size: 16px;
            font-weight: bold;
            color: #17224f;
            border: none;
            outline: none;
            height: 34px;
            line-height-step: 34px;
            padding: 0 16px;
            border-radius: 4px;
            margin: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-user-select: none;
        }

        .editor-label {
            font-size: 19px;
            margin: 2rem 0 1rem;
            display: block;
            border-bottom: 1px solid #dfe3ec;
        }

        .comment {
            display: flex;
        }

        .avatar {
            background-color: #ff9999;
            color: #17224f;
            font-size: 18px;
            font-weight: bold;
            border-radius: 100px;
            width: 42px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            margin-right: 8px;
        }

        .editor-wrap#editor-comment-wrap {
            padding: 1rem;
        }

        .editor-wrap#editor-comment-wrap .editor-content {
            padding: 1rem;
        }
        /* and not namespaced to `.editor-content` */

        .componentBorder {
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 0.01rem;
            flex-grow: 1;
            position: relative;
            width: 900px;
        }

        a,
        a:link {
            color: blue;
        }

        a:visited {
            color: purple;
        }

        a:hover {
            color: green;
        }

        a:active {
            color: red;
        }

        h1 {
            font-size: 1.75rem;
            font-weight: strong;
        }

        h2 {
            font-size: 1.5rem;
            font-weight: strong;
        }

        h3 {
            font-size: 1rem;
            font-weight: strong;
        }

        hr {
            margin: 1.5rem 0;
            padding: .5rem 0;
            border: 0;
        }

        hr::after {
            content: '';
            display: block;
            border-width: 0 0 1px 0;
            border-color: #ccc;
            border-style: solid;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        .tox.tox-tinymce-aux .tox-toolbar__overflow {
            background-color: #fff !important;
        }
    </style>
  1. Update the HTML content by copying the following configuration into your demo file between the body tags:

<body>
  <div class="componentBorder">
    <main>
        <label class="editor-label">Description</label>
        <div class="editor-wrap" id="editor-description-wrap">
            <div class="editor-toolbar" id="editor-description-toolbar"></div>
            <div class="editor-content" id="editor-description-content">
                <h2><strong>What’s your rich text editor </strong><strong>workflow</strong><strong> project? </strong></h2>
                <p>Are you…</p>
                <ul>
                    <li><strong>Building a new workflow or project management platform</strong> and need to add rich text editing functionality?</li>
                    <li><strong>Extending your existing workflow or project management app</strong> and need to enhance your default editor?</li>
                </ul>
                <p>Then use the only WYSIWYG editor that’s trusted by 1.5M developers.</p>
                <h3><strong>Curious about TinyMCE?</strong></h3>
                <p>Click inside this box to activate the editor and see how it works!</p>
            </div>
            <footer class="editor-footer">
                <button type="button" id="save-description-btn" onclick="save('editor-description-wrap')" class="editor-save-btn">Save</button>
                <button type="button" onclick="alert('Your own custom save function')" class="editor-cancel-btn">Cancel</button>
            </footer>
        </div>

        <label class="editor-label">Comments</label>
        <div class="comment">
            <div class="avatar">FD</div>
            <div class="editor-wrap" id="editor-comment-wrap">
                <div class="editor-toolbar" id="editor-comment-toolbar"></div>
                <div class="editor-content" id="editor-comment-content"></div>
                <footer class="editor-footer">
                    <button type="button" id="save-description-btn" onclick="save('editor-comment-wrap')" class="editor-save-btn">Save</button>
                    <button type="button" onclick="alert('Your own custom cancel function')" class="editor-cancel-btn">Cancel</button>
                </footer>
            </div>
        </div>
    </main>
   </div>
</body>
  1. Save the changes, and load the demo in your browser:

TinyMCE workflow config working in the browser

Need more workflow information?

The workflow page explains what each of the Premium plugins that are configured for the workflow app can do for your project. For more granular information, you can toggle the HTML comments in the workflow config on, to see the intent behind each line of markup and JavaScript.

Signing up for a FREE API key gives you access to Premium plugin functionality for 14 days before you need to consider whether the Core plan without premium plugins is suitable, or if the Premium plugins better suit your workflow app needs, and therefore need to sign up for one of the TinyMCE Paid plans.

 During your 14-day free trial period (or after you’ve signed up for a paid plan), you can contact support if you have any questions on adding TinyMCE to your workflow app.

Tiny CloudTinyMCEWorkflowConfiguration
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCE

    How to configure URL validation in your app

    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