We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular Rich Text Editor error in production

Thread ID:

Created:

Updated:

Platform:

Replies:

152908 Aug 30,2019 07:26 PM UTC May 19,2020 03:03 PM UTC Angular - EJ 2 7
loading
Tags: RichTextEditor
Gabriel Camacho
Asked On August 30, 2019 07:26 PM UTC

Hi,  I am trying to get the Rich Text Editor control to work in production without luck.

I was able to make the rich text editor work flawlessly in development, however, after generating the production build, an error occurs. I attach an image of the problem.
The error is "TypeError: this.htmlEditorModule.sanitizeHelper"



I implemented it as a custom form control, this is the code I have so far:

Template:
<label *ngIf="!isImage()" for="{{itemId}}">{{label}}</label>
<ng-container *ngIf="!readOnly">
<ejs-combobox *ngIf="isSelect()" (change)="onInput($event.itemData?.value)" [value]="value" id='{{itemId}}'
placeholder="{{placeholder}}" [dataSource]='dataSource' [fields]='fields' [allowCustom]='false' [autofill]='true'
[allowFiltering]='true' #combobox (focus)='combobox.showPopup()'>
</ejs-combobox>

<ejs-dropdownlist *ngIf="isDropDown()" (change)="onInput($event.itemData?.value)" [value]="value" id='{{itemId}}'
placeholder="{{placeholder}}" [dataSource]='dataSource' [fields]='fields' [allowFiltering]='true'>
</ejs-dropdownlist>

<ejs-datetimepicker *ngIf="isDate()" (change)="onInput($event.value)" [value]="value" id='{{itemId}}'
placeholder="{{placeholder}}">
</ejs-datetimepicker>

<ejs-datepicker *ngIf="isOnlyDate()" [min]="min" [max]="max" [start]="start" (change)="onInput($event.value)"
[value]="value" id='{{itemId}}' placeholder="{{placeholder}}">
</ejs-datepicker>

<ejs-textbox [multiline]='isTextArea()' placeholder="{{placeholder}}" *ngIf="isTextBox() || isTextArea()"
(input)="onInput($event.value)" [value]="value" id="{{itemId}}">
</ejs-textbox>

<ejs-numerictextbox *ngIf="isNumericTextBox()" (change)="onInput($event.value)" [value]="value" id="{{itemId}}"
placeholder="{{placeholder}}" format="0" min="0">
</ejs-numerictextbox>

<ejs-checkbox *ngIf="isBoolean()" [checked]="value" id='{{itemId}}' (change)="onInput($event.checked)">
</ejs-checkbox>

<ejs-richtexteditor *ngIf="isRichTextEditor()" id='{{itemId}}' (change)="onInput($event.value)" [value]="value"
[toolbarSettings]='tools' [quickToolbarSettings]='quickTools'>
</ejs-richtexteditor>

<input-file #inputFile *ngIf="isImage()" placeholder="{{placeholder}}" id='{{itemId}}' (deletedFile)="onInput(null)"
(acceptedFile)="onInput($event)">
</input-file>
</ng-container>

<ng-container *ngIf="readOnly">
<ejs-textbox disabled [value]="value"></ejs-textbox>
</ng-container>


The important part is this I guess:
<ejs-richtexteditor *ngIf="isRichTextEditor()" id='{{itemId}}' (change)="onInput($event.value)" [value]="value"
[toolbarSettings]='tools' [quickToolbarSettings]='quickTools'>
</ejs-richtexteditor>


Component:
import { Component, Input, forwardRef, ViewChild } from '@angular/core';
import { LayoutItemType } from '../../models/layout-item-type.enum';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

import { SelectItem } from '../../models/select-item.model';
import { FileHelper } from '../../utils/file.helper';
import { InputFileComponent } from 'ngx-input-file';

import { environment } from '../../../../environments/environment';


@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styles: [],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true
}
]
})
export class InputComponent implements ControlValueAccessor {

prod = environment.production;

@Input()
editable = true;

lastRteItemsDev = ['|', 'ClearFormat', 'Print', 'SourceCode'];
lastRteItemsProd = ['|', 'ClearFormat', 'Print'];

public tools = {
items: [
'Undo', 'Redo', '|',
'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
'SubScript', 'SuperScript', '|',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
'Indent', 'Outdent', '|', 'CreateLink',
...(this.prod ? this.lastRteItemsProd : this.lastRteItemsDev)
]
};
public quickTools = {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', '-', 'Display', 'AltText', 'Dimension'
]
};

@Input()
placeholder: string;
@Input()
label: string;
@Input()
readOnly = false;
@Input()
itemId: string;
@Input()
type: string;

// Dropdowns
@Input()
dataSource: SelectItem[];

// Dates
@Input()
start = 'Month';
@Input()
max = new Date(2099, 11, 31);
@Input()
min = new Date(1900, 0, 1);

fields = { text: 'text', value: 'value' };

// Value accesor
value: string;
isDisabled: boolean;


@ViewChild('inputFile', { static: false })
inputFile: InputFileComponent;

onChange = (_: any) => { };
onTouch = () => { };

isDropDown = () => this.type === LayoutItemType.DROP_DOWN;
isSelect = () => this.type === LayoutItemType.SELECT;
isTextBox = () => this.type === LayoutItemType.STRING;
isTextArea = () => this.type === LayoutItemType.LARGE_STRING;
isNumericTextBox = () => this.type === LayoutItemType.NUMBER;
isDate = () => this.type === LayoutItemType.DATE;
isOnlyDate = () => this.type === LayoutItemType.ONLY_DATE;
isBoolean = () => this.type === LayoutItemType.BOOLEAN;
isImage = () => this.type === LayoutItemType.IMAGE;
isRichTextEditor = () => this.type === LayoutItemType.HTML;
isAny = () => this.type === LayoutItemType.ANY;



constructor() { }

async onInput(value: any) {
if (this.isImage() && value)
value = await FileHelper.toBase64(value.file);

this.value = value;
this.onTouch();
this.onChange(this.value);
}

async writeValue(value: any) {
if (this.isImage() && value) {
const file = await FileHelper.fromBase64(value);
const filePreview = [{
file,
preview: value.split('::')[1],
}];
this.inputFile.files = filePreview;
}
this.value = value;
}

registerOnChange(fn: any): void {
this.onChange = fn;
}

registerOnTouched(fn: any): void {
this.onTouch = fn;
}

setDisabledState(isDisabled: boolean): void {
this.isDisabled = true;
}

}


I tried having the provider both in this component directly and in a shared module that contains all the needed ones. 
Right now I have them in the shared module (Working in dev).

I am using Angular 8.

Thank you.


Pandiyaraj Muniyandi [Syncfusion]
Replied On September 2, 2019 08:26 AM UTC

Hi Gabriel, 
 
Greetings from Syncfusion support. 
 
We have validated the reported issue with shared code block and we unable to reproduce the issue. Using following commands we build the application and hosted and tested, it working fine from our end. 
 
  • ng serve –prod
 
Generally the reported issue occur when HtmlEditorService not included in component providers section. Have you injected the HtmlEditorService in providers props of your component. 
 
We have prepared sample for your reference, get it from below link 
 
If you still facing problems, could you please share the following details that will help you as soon as possible? 
 
  • Provide a reproducible sample or modify the shared sample below and share it with us (including steps)
  • We can also set up a web meeting in your convenient time to validate the issue
 
Regards, 
Pandiyaraj M 


Rajat
Replied On March 31, 2020 08:13 AM UTC

Getting one issue while using bullets and subullets in rich text editor.
Issue is while while using bullets and subullet both if i am removing the bullet then it is showing some issue like while getting the html it is not perfectly updating.
so if there is no bullet then there is no use of subullets

(http://sachinchoolur.github.io/angular-trix/) this doesn't have that issue 

Instructions to get the error:

for getting that issue use a bullet in a line then hit enter to come to next line then hit tab for subullets then hit enter for anathor subullet then got to the prev subullet hit enter 
it will give a bullet then remove two bullets then the subullet is there tehere i am facing the issue

Indrajith Srinivasan [Syncfusion]
Replied On April 1, 2020 10:21 AM UTC

Hi Rajat, 
 
Greetings from Syncfusion support, 
 
We have validated the reported query and have considered “Sublist not removed from Rich Text Editor” as a bug from our end and logged the report for the same and the fix will be included with our patch release on mid of April 2020.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/13079/


Regards,
 
Indrajith 


Indrajith Srinivasan [Syncfusion]
Replied On April 14, 2020 03:22 PM UTC

Hi Rajat,

Thanks for your patience,

We have resolved the issue “Sublist not removed from Rich Text Editor with Rich Text Editor and the fix is available with the package version 18.1.44.

Can you please upgrade the package to this version to resolve the issue from your end?

Regards,
 
Indrajith 


Rajat
Replied On April 16, 2020 09:53 AM UTC

I have upgraded to the latest package but the issue is still there i think (Sublist not removed from Rich Text Editor)

Indrajith Srinivasan [Syncfusion]
Replied On April 17, 2020 03:28 PM UTC

Hi Rajat, 
 
Good day to you, 
 
We have resolved the reported issue with maintaining an empty sub-list. It doesn't allow list creation with empty text. If you have included some text with the unordered list and sublist, we are able to reproduce the reported issue with maintaining sub-list from our end.  
 
We have considered the sublist maintaining issue with text content as a bug from our end and logged the report for the same and the fix will be included with our weekly patch release, which is scheduled in the Mid of May 2020. 
 
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/13561/ 
 
Regards, 
Indrajith 


Indrajith Srinivasan [Syncfusion]
Replied On May 19, 2020 03:03 PM UTC

Hi Rajat,

Thanks for your patience,

We have resolved the issue “Sublist remains maintained if there content in the unordered list and when deletingand the fix is now available with the package version 18.1.52.

 
 
Sample: https://stackblitz.com/edit/angular-nvf4zk-wg2ofy?file=package.json

Can you please upgrade your package to this version to resolve the issue from your end.

Regards,
Indrajith
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon