Is there any way to implement rich text editor

Tags: #<Tag:0x00007fd2ca2e9718>
#1

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.

#2

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

#3

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

#4

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

#5

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.

#6

No sorry, we do not have examples like that. We do not have any example with a cooperation between libraries.

#7

@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;
  }
}
#8

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?

#9

@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?

#10

Here https://handsontable.com/docs/7.2.2/tutorial-cell-editor.html is a general editor tutorial with the open method.