Is there any way to implement rich text editor using Custom editor for angular??
I looked for ways to implement it but did not find any solution.
Sure there is! You can start with our guide how to create custom editor: https://handsontable.com/docs/7.2.2/tutorial-cell-editor.html and then the guide how to use your custom editor in Angular: https://handsontable.com/docs/7.2.2/frameworks-wrapper-for-angular-custom-editor-example.html
Kind regards
Wojciech
I tried to implement using the cell-editor but not able to do that.
Can you share an example by adding any editor in angular
Hey @shinoyjose009
there’s already one link with a demo for the editor here https://handsontable.com/docs/7.2.2/frameworks-wrapper-for-angular-custom-editor-example.html
I meant rich text-box editor.(like Ckeditor,Quill or any other)
I only saw examples to add text boxes, check boxes etc. But is there any example to add rich text-box inside HandsonTable that is what I am looking for in Angular.
No sorry, we do not have examples like that. We do not have any example with a cooperation between libraries.
@aleksandra_budnik hh ok. So I tried a different way to achieve the integration of external ckeditor in my application. I tried to open a popup with CKeditor on cell mouse click. I am able to open the popup in afterSelection . But I need it to open on like double click or when in edit mode.
i tried the open() method of the CustomEditor but not working .got stuck. see the code below:-
import { Component, OnInit } from '@angular/core';
import Handsontable from 'handsontable';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ModalService } from '../custom-modal/custom-modal.service';
import { HotTableRegisterer } from '@handsontable/angular';
class CustomEditor extends Handsontable.editors.TextEditor {
public Modalservice : ModalService
obj = new CkeditorHandsonTableComponent(this.Modalservice);
open() {
var currentrow = this.row;
var currentcolumn = this.col;
var cellData = this.originalValue;
this.obj.click(cellData,currentrow,currentcolumn); // not working
}
}
@Component({
selector: 'app-ckeditor-handson-table',
templateUrl: './ckeditor-handson-table.component.html',
styleUrls: ['./ckeditor-handson-table.component.scss']
})
export class CkeditorHandsonTableComponent implements OnInit {
public Editor = ClassicEditor;
private hotRegisterer = new HotTableRegisterer();
id = 'hotinstance'
constructor(private modalService: ModalService) { }
public model = '<p>demo Text</p>';
tempdata: any;
currentrow: number;
curentcolumn: number;
modalopen:boolean = false;
data = [
{
title: "<a href='http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691'>Professional JavaScript for Web Developers</a>",
description: "This <a href='http://bit.ly/sM1bDf'>book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>."
},
{
title: "<a href='http://shop.oreilly.com/product/9780596517748.do'>JavaScript: The Good Parts</a>",
description: "This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.",
},
{
title: "<a href='http://shop.oreilly.com/product/9780596805531.do'>JavaScript: The Definitive Guide</a>",
description: "<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.",
}
]
ngOnInit() {
}
hotSettings: Handsontable.GridSettings = {
startRows: 5,
data: this.data,
columns: [
{
data: "title",
renderer: "html",
title: "title"
},
{
data: "description",
renderer: "html",
title: "description",
editor:CustomEditor
}
],
colHeaders: true,
colWidths: 200
};
click(data,row,column) {
this.currentrow = row;
this.curentcolumn = column;
this.model = data;
this.modalopen =true;
}
closeModal() {
this.hotRegisterer.getInstance(this.id).setDataAtCell(this.currentrow, this.curentcolumn, this.model);
this.modalopen =false;
}
}
Handontable doesn’t provide dbclick event but you can try with the native event https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event Have you tried it?
@aleksandra_budnik I will try that too. But what I am asking is to open a popup via custom editor.
To call a function inside open() of the CustomEditor. Is it possible?
Here https://handsontable.com/docs/7.2.2/tutorial-cell-editor.html is a general editor tutorial with the open
method.