Add richtextbox in Handson table

Tags: #<Tag:0x00007efc64f27620> #<Tag:0x00007efc64f27490>
#1

Can any one having the sample code for Binding richtextbox (ckeditor,angular editor) in handosntable?

#2

Hi @savithagnair7

I recommend checking this guide on Cell editor https://handsontable.com/docs/javascript-data-grid/cell-editor/. Sometimes it could be better to create a custom cell type (with the validator and renderer) https://handsontable.com/docs/javascript-data-grid/cell-type/.

Here Is there any way to implement rich text editor is a similar topic on the forum.

#3

Hi @aleksandra_budnik thanks for your reply.I am rendering Mardown editor in one column.But its not displaying the data inside the column.

Sample code

markdownRenderer(instance, td, row, col, prop, value, cellProperties) {
var arrowTag = document.createElement(‘markdown’);
arrowTag.setAttribute(“data”, value);
Handsontable.dom.empty(td);
td.appendChild(arrowTag);
return td;
}
Column data showing as empty.If my value is like"test" it should display as bold ‘test’ in column data

tried this way also

markdownRenderer(instance, td, row, col, prop, value, cellProperties) {
const arrowTag = document.createElement(‘span’);
arrowTag.innerHTML = “<markdown style=‘word-wrap: break-word;word-reak:break-all;’ [data]=”+value+" class=‘variable-binding’>";
Handsontable.dom.empty(td);
td.appendChild(arrowTag);
return td;
}

#4

Hi @savithagnair7

If you would like to show any complex values (not a spring or number) you would need to apply the Handsontable.renderers.TextRenderer.apply(this, arguments); in the first line of your custom cell renderer, like here https://jsfiddle.net/eomaL82g/

#5

hi @aleksandra_budnik Added Handsontable.renderers.TextRenderer.apply(this, arguments);
But still not displaying the data.I think issue in rendering markdown editor

function markdownRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.HtmlRenderer.apply(this, arguments);
td.innerHTML = <markdown [data]=${value}>;

return td;
}

In UI its binding as
“td
<markdown style=“word-wrap: break-word;word-break:break-all;” [data]=“test”>
/td”
data not rendering

#6

We do not have any official guides on how to connect Handsontable with the CKEditor’s richtextbox. However, if you could share a demo of what you already have (Actual code for Handsontable with the library imported) and the documentation page for richtextbox I will try to help.

#7