Tinymce html editor loaded with template plugin

lauri457
Giga Sage

Monday

I saw a post on linkedin mentioning that tinymce has a template plugin but it is not available in servicenow. Turns out you can init the tinymce editor with the template plugin if you do it manually, the plugin gets removed elsewhere. 

 

So that you don't need to remove the editor and reinit you can just use an onload client script and a multiline string (not HTML) column to use the setupTinymceField method on the iframe window. Below I setup a custom table with three fields to serve the template contents.

 

(function onLoad() {
    const getTemplates = () => {
        return fetch('/api/now/table/u_template', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-UserToken': this.g_ck
            }
        })
            .then(r => r.json())
            .then(d => {
                return d.result.map(t => ({
                    title: t.u_title,
                    description: t.u_description,
                    content: t.u_content
                }))
            })
            .catch(err => {
                console.error("Failed getting templates:", err)
                return []
            })
    }
    getTemplates().then(function (templates) {
        const tinyMceConfig = {
            plugins: "template",
            toolbar: ["template"],
            templates: templates
        };
        const initTinymce = () => this.setupTinymceField("incident.description", tinyMceConfig)
        if (!this.hasInitTinyMce) {
            this.ScriptLoader.getScripts(['/scripts/tinymce_default/js_includes_tinymce.jsx?sysparm_substitute=false'], initTinymce)
        } else {
            initTinymce()
        }
    })
})()

 

lauri457_0-1768281176943.png

lauri457_2-1768281269642.png

 

 

0 Helpfuls
  • 174 Views
1 REPLY 1

Sandesh Powar
Mega Guru

Monday

 
Hey @lauri457 ,

This is really cool! I love when people find creative ways to extend what ServiceNow can do out of the box. The template plugin for TinyMCE is such a useful feature - surprised it's not available by default.

Your solution looks solid. I tried something similar a while back and ran into a couple of quirks, so wanted to share some thoughts:

Quick question first - are you seeing the templates persist when you refresh the form or navigate away and come back? I had issues with the configuration getting reset sometimes.

A few things that helped me:

Caching the templates - You're hitting the API every time the form loads. I added sessionStorage caching and it made things way snappier:

 
javascript
const cached = sessionStorage.getItem('my_templates');
if (cached) {
    const data = JSON.parse(cached);
    // Check if cache is still fresh (maybe 30 min?)
    if (Date.now() - data.timestamp < 1800000) {
        return Promise.resolve(data.templates);
    }
}
// Otherwise fetch fresh...


Making it work on multiple tables - If you want to use this on other forms too, you could add a field to your template table for which table it applies to. That way you can filter and only show relevant templates.


The "removed elsewhere" thing - Yeah, I noticed that too. Sometimes when UI policies fire or the form does a partial refresh, TinyMCE reinitializes and loses your custom config. Never found a perfect fix, but checking if the editor still has your plugins before trying to use them helps avoid errors.

One thing I'm curious about - what does your u_template table look like? Just title, description, and content fields? I added an "active" checkbox and an "order" field to mine so I could control which templates show up and in what order.

Oh, and make sure your ACLs on that template table let everyone read them. Learned that one the hard way when my templates worked for admins but not regular users!

This is the kind of customization that makes ServiceNow so powerful. Have you thought about using this for other fields too, like work notes or resolution notes? Could be really helpful for standardizing how teams document things.

Nice work figuring this out!

Best regards!

Sandesh Powar
0 Helpfuls