Service Portal widget - sp-tinymce-editor image upload not working

[Tommy Jensen]

I have this very simple widget with the tiny mce html editor. It appears fine one the form and the editor seems to be working. Except when I try to upload an image. The image is not inserted into the editor and I get no error messages in the console log. What am I missing ?

<div class="panel panel-default">
  <div class="panel-heading">Preview</div>
  <sp-tinymce-editor ng-model="c.data.text" ng-model-options="{getterSetter: true}"></sp-tinymce-editor>
</div>

[Varsha Jadhav1]

Hi Tommy

Description

Content edits to HTML fields are not saved when form is edited through a portal page. sp-tinymce-editor directives are not properly updating the model.

Steps to Reproduce

1. Log into an OOB instance
2. Open an incident form via Service Portal
i.e 
https://{instance-name}.service-now.com/sp?id=form&table=incident&sys_id={sys_id}
3. Configure the form layout and add a HTML field
4. On the incident form, fill out the HTML field with a value i.e '1111'
5. Save the record
6. On the incident form, select and **cut (ctrl+X)** the value (i.e '1111') from the HTML field so that it is empty
7. Save the form

Observe the record still retains the previous value that was removed (i.e '1111'), instead of showing the HTML field empty. This behaviour also occurs with images that are cut from the html content.

Workaround

This is expected behaviour for the existing integration with the TinyMCE HTML Editor. The issue is with the ui-tinymce plugin for Angular JS.
Ref.: https://github.com/angular-ui/ui-tinymce/issues/323

You can update the $scope.c.submit function on the affected widget by adding this line:

c.desc = tinymce.activeEditor.getContent();

This will make sure that during submit the correct c.desc value is captured, as it seems that tinymce does not recognise the new value after a cut event. For example:

$scope.c.submit = function() {
console.log(c.desc);
c.desc = tinymce.activeEditor.getContent()
console.log(c.desc);
c.submitted = true;
c.submitText = 'Submitting the ticket...';
submitIt();
}

[Tommy Jensen]

I already found this and to me that is not relevant because the form is not submitted.

The problem is that the image button is not inserting an image into the body even before trying to submit.

[dhananjay21]

Hi Tommy,

Were you able to find any solution for your issue. Can you please let me know your findings as me to have an similar requirement but have to implement it on custom widget and not on Form Widget.

Would appreciate your help, thanks.  

[dhananjay21]

Hi @Tommy Jensen ,

Were you able to find any solution for it ?

I have found an workaround, we can drag and drop an image in the editor then the image gets uploaded.

I'm trying to configure the toolbar for the editor in the widget, need to remove few option like the insert image button which is not working as expected.

Have you found any document or solution for the issue, would appreciate your help.

Thanks,

Dhananjay