TinyMCE in UI Page is missing tools from toolbar

Robert Beeman
Kilo Sage

We have an old (but heavily utilized) UI Page with TinyMCE loaded on a textarea. It works fine, but some of the tools aren't showing up in the toolbar even though they are specified in the init. Our users are specifically requesting the Link button. In my personal developer instance, I made a very basic UI Page for troubleshooting this, and I cannot figure out why they aren't there.

Sample UI Page HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	
	<script>
	
	<script>
	   tinymce.init({
	   mode : "specific_textareas",
	   editor_selector : "mceEditor",
	   width: '100%',
	   height: '300px',
	   menubar: "tools",
	   toolbar: "$[gs.getProperty('glide.ui.html.editor.v4.toolbar.line1')]",
	   content_css : "* {font: 10px arial, sans-serif;} b {font-weight:bold;} th {font-weight:bold;} strong {font-weight:bold;}",
	   });
	</script>
	
	<textarea cols="60" rows="10" id="textfield" name="textfield" class="mceEditor"></textarea>
	
</j:jelly>

That first <script> on line 4 is being removed for some reason. It was supposed to be loading 'tinymce.full.jsx' from '/scripts/tinymce4_4_3/'


'glide.ui.html.editor.v4.toolbar.line1' System Property value:

bold,italic,underline,undo,redo,|,fontselect,fontsizeselect,table,|,forecolor,backcolor,link,unlink,|,image,media,code,|,alignleft,aligncenter,alignright,|,bullist,numlist,fullscreen


Resultant UI Page:
find_real_file.png

It looks like table, forecolor, backcolor, link, unlink, image, media, code, and fullscreen are all missing. Does anyone know what is going on? Thank you for your help with this!

16 REPLIES 16

And they render properly in OoB forms like Knowledge, just not when I load it from a UI Page.

Kien3
Kilo Explorer

Hi @Robert Beeman ,

I have the same problem as you.

Have you solved it yet?

Hi Kien,

Not with TinyMCE, but we found an alternative.  We ended up loading an open source wysiwyg editor that we could control instead. It is called Jodit. It can be loaded from a CDN, but we chose to host it in a script include.

Jodit Link: https://xdsoft.net/jodit/

Rolf Nyhus
Tera Guru

Hi Robert,

Stumbled across this in search for something else. I had the same issue, and found out that I needed to specify plugins as well in the tinymce.init. 

Adding this line (you might need some amendments) should do the trick.

plugins: 'media fullscreen link table lists',

To ensure you capture all your required buttons, see "Plugins" menu section on https://www.tiny.cloud/docs/ for details on which plugins need initialization.

 

Regards,

Rolf

Community Alums
Not applicable

This helped.