Comments (2)
The problem is how the module creates the Jodit editor instance.
I've created a pull request to solve it #26 .
Meanwhile, you can create a workaround like this:
import { Component, AfterViewInit, ElementRef, forwardRef, OnDestroy, NgZone, Input } from '@angular/core';
import {
ControlValueAccessor,
NG_VALUE_ACCESSOR
} from '@angular/forms';
// html editor
import * as Editor from 'jodit/build/jodit.min';
@Component({
selector: 'app-html-editor',
template: '<ng-template></ng-template>',
styleUrls: ['./html-editor.component.scss'],
// Integration with @angular/forms.
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => HtmlEditorComponent),
multi: true,
}
]
})
export class HtmlEditorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
public editorInstance: any;
private data: string;
private textArea: Element;
@Input('config') config: any;
/**
* A callback executed when the content of the editor changes. Part of the
* `ControlValueAccessor` (https://angular.io/api/forms/ControlValueAccessor) interface.
*
* Note: Unset unless the component uses the `ngModel`.
*/
private cvaOnChange?: (data: string) => void;
/**
* A callback executed when the editor has been blurred. Part of the
* `ControlValueAccessor` (https://angular.io/api/forms/ControlValueAccessor) interface.
*
* Note: Unset unless the component uses the `ngModel`.
*/
private cvaOnTouched?: () => void;
constructor(private ngZone: NgZone, private elementRef: ElementRef) { }
ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.createEditor();
});
}
// Implementing the OnDestroy interface.
ngOnDestroy() {
if (this.editorInstance) {
this.editorInstance.destruct();
this.editorInstance = null;
}
}
// Implementing the ControlValueAccessor interface (only when binding to ngModel).
writeValue(value: string | null): void {
// This method is called with the `null` value when the form resets.
// A component's responsibility is to restore to the initial state.
if (value === null) {
value = '';
}
// If already initialized.
if (this.editorInstance) {
this.editorInstance.value = value;
}
// If not, wait for it to be ready; store the data.
else {
this.data = value;
}
}
// Implementing the ControlValueAccessor interface (only when binding to ngModel).
registerOnChange(callback: (data: string) => void): void {
this.cvaOnChange = callback;
}
// Implementing the ControlValueAccessor interface (only when binding to ngModel).
registerOnTouched(callback: () => void): void {
this.cvaOnTouched = callback;
}
// Implementing the ControlValueAccessor interface (only when binding to ngModel).
setDisabledState(isDisabled: boolean): void {
// If already initialized
if (this.editorInstance) {
this.editorInstance.setReadOnly(isDisabled);
}
}
private createEditor() {
this.createElement();
if (!this.editorInstance) {
this.editorInstance = new Editor.Jodit(this.textArea, this.config);
// Add events
this.addEvents();
// Set value data
this.editorInstance.value = this.data;
// Resize after value adds
this.editorInstance.events.fire('resize');
}
}
private createElement() {
if (!this.textArea) {
this.textArea = document.createElement('textarea');
this.elementRef.nativeElement.appendChild(this.textArea);
}
}
private addEvents() {
// data binding to ngModel on Change value
this.editorInstance.events.on('change', (new_value: string) => {
if (this.cvaOnChange) {
this.cvaOnChange(new_value);
}
});
// data binding to ngModel on Change value
this.editorInstance.events.on('blur', () => {
this.ngZone.run(() => {
if (this.cvaOnTouched) {
this.cvaOnTouched();
}
});
});
}
}
from jodit-angular.
@katan still my project slow
from jodit-angular.
Related Issues (20)
- Problem with Angular Universal
- Angular 13 support HOT 19
- Get editor upon component init HOT 1
- Unable to install [email protected] in Angular 9 HOT 1
- Jodit-Multi-Pro with Angular 13 HOT 6
- Support Angular 15? Issue with setDisabledState HOT 8
- Is RxJs dependency needed? HOT 1
- OEM license key for premium plugins
- To make the editor resizable
- Adding image via upload require few clicks HOT 1
- Angular compatibility with LTS versions HOT 2
- Tab-focus from input to editor HOT 1
- Where to place custom plugin and how do i import it?
- Custom Rendering for Jodit-Angular
- Angular warns about CommonJS or AMD dependency
- Cannot change background-color of jodit-editor HOT 2
- How to init value? HOT 2
- I got an error 'has no selector, please add it!' when run 'ng build --prod' HOT 2
- Upgrade to Angular 12? HOT 5
- Module not found: Error: Can't resolve 'jodit' HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jodit-angular.