Is there any way to implement rich text editor

Tags: #<Tag:0x00007fa9944381c8>

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: and then the guide how to use your custom editor in Angular:

Kind regards

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

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;,currentrow,currentcolumn);    // not working

  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=''>Professional JavaScript for Web Developers</a>",
      description: "This <a href=''>book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>."
      title: "<a href=''>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=''>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,
    columns: [
        data: "title",
        renderer: "html",
        title: "title"
        data: "description",
        renderer: "html",
        title: "description",
    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.curentcolumn, this.model);
    this.modalopen =false;

Handontable doesn’t provide dbclick event but you can try with the native 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 is a general editor tutorial with the open method.