Using TinyMCE or WYSIWYG in a UI Page

matt_toone · ‎09-12-2016

New to posting to the community so please bare with me.

Use case:

User will have the ability at the top of the form that will display a pop-up window with 3 unique fields that are not located on the form. These fields will be displayed and mandatory to populate in the following order; Date/Time field, Drop Down list with 5 choices and a text field that will allow styles to retain from copy and paste from Microsoft Word or Outlook.

So based on my use case, my requirement to create a UI Page that will be called by a UI Action which will be filled out by the customer. Once the "fields" from the pop-up/GlideDialog are populated and the tech clicks "Ok", the contents of this pop-up/GlideDialog will trigger a unique event and trigger a notification which will contain fields from the form and all values from the pop-up/GlideDialog and be sent from a array of email addresses that were adding into a slush bucket.

So I have broken this down into 3 pieces to simplify the work.

1) UI Page (Incomplete)

The contents of the UI Page will have 3 fields;

drop down list
date/time field
text field with TinyMCE/WYSIWYG ability

The drop down list and the date/time fields are available in HTML as a type of "datetime-local" and declaring a label with options. Those two are easy to handle, I currently have the 3rd field as a input text box. Now is the tricky part is figuring out how to make this input field into a TinyMCE/WYSIWYG field (if possible). Anyone know how to do this?

2) UI Action (Complete)

Create the UI Action that calls the UI Page as a pop-up/GlideDialog

3) Email Notification (Complete)

Triggered by the event of the UI Page Processing script

Gets the 1st and 2nd parameters (who to sent the email to and values from the ui page fields separated by "~~"

So what I am asking the community for help is with my first field and completing this requirement. Looking for the ability to use a TinyMCE or WYSIWYG in a UI Page or any type of input text box that will retain majority/all styles from Microsoft Outlook/Word Document.

Currently on Geneva Patch 7, customer will be upgrading to Helsinki within the next 2 weeks. Depending functionality, should be able to hold off till Helsinki if a solution is available.

Thank you,

Matt

larstange · ‎09-13-2016

Hi

Start by initializing the TinyMCE in the top of the UI page

<script></script>

<script>

   tinymce.init({

   mode : "specific_textareas",

   editor_selector : "mceEditor",

   width: '100%',

   height: '400px',

   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>

Then the apply the class you specify in the "editor_selector" to the textarea

<textarea cols="80" rows="10" id="body" name="body" class="mceEditor"></textarea>

View solution in original post

hrng · ‎01-24-2017

Hi Matt,

I'm trying to do something similar at the moment, just wondering if you could share the content of the client script on your UI page? I'm running into trouble when trying to get the value of the TinyMCE field, doesn't seem to be passing over to the client script with document.getElementById("fieldid").value. How did you get the value of the TinyMCE field after submission?

Thanks!

Dave

emile · ‎05-09-2017

Hi Dave,

I had the same problem with getting the text as it appears in an iFrame within the Body tag.

The following worked for me.

function okClick(){

var tinymceFrame = document.getElementById("body_ifr");

var iframeDocument = (tinymceFrame.contentWindow || tinymceFrame.contentDocument);

if (iframeDocument.document)

iframeDocument = iframeDocument.document;

GlideDialogWindow.get().destroy();

g_form.setValue("comments", iframeDocument.body.innerText);

}

Cheers,

Emile

hrng · ‎05-09-2017

Thanks! I ended up going a different route, but neglected to update my comment:

function onSubmit() {

   var comments_src = tinymce.get('html_comments').getContent();

   var worknotes_src = tinymce.get('html_worknotes').getContent();

   if (comments_src != "") {

             var comments_html = "[code]"+comments_src+"[/code]";

             g_form.setValue('comments', comments_html);

   }

   if (worknotes_src != "") {

             var worknotes_html = "[code]"+worknotes_src+"[/code]";

             g_form.setValue('work_notes', worknotes_html);

   }

   

   GlideDialogWindow.get().destroy(); //Close the dialog window   

   return true;   

   }

Bhavin Jain1 · ‎04-14-2018

Hi larstange,

I'm using the below code in UI page to show the tinymce editor but it show error "tinymce is not defined"

tinymce.init({
selector: "textarea.tinymce,
menubar: 'edit insert view format table tools',

});

</script>

<textarea cols="96" rows="6" id="add_comments" class="tinymce" name="add_comments" ></textarea>

Could you help me in this. Is there anything missing

Regards,

Bhavin

jonnygrove · ‎08-01-2018

I found that you have to add the script paths for Tinymce that's included with the platform. I just grabbed them off the page inspector on an existing form with the html editor. Just put these before the initialization script.