JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/dx.light.css">
<script src="https://unpkg.com/devextreme-quill/dist/dx-quill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/dx.all.js"></script>
<div class="demo-container">
<div id="editor"></div>
</div>
JavaScript
$(function() {
$("#editor").dxHtmlEditor({
value,
height: 350,
tableContextMenu: { enabled: true },
toolbar: {
items: [
{
name: "header",
acceptedValues: [false, 1, 2, 3]
},
"separator", "bold", "color", "separator",
"alignLeft", "alignCenter", "alignRight", "separator",
"insertTable"
]
}
});
});
var value = `
<h2>
Table headers and context menu
</h2>
<br>
<table>
<thead>
<tr">
<th style="text-align: left;">Task Subject</th>
<th style="text-align: center;">Status</th>
<th style="text-align: right;">Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">Upgrade Server Hardware</td>
<td style="text-align: center;">In Progress</td>
<td style="text-align: right;">45%</td>
</tr>
<tr>
<td style="text-align: left;">Upgrade Personal Computers</td>
<td style="text-align: center; color: red;">Need Assistance</td>
<td style="text-align: right;">80%</td>
</tr>
<tr>
<td style="text-align: left;">Approve Personal Computer Upgrade Plan</td>
<td style="text-align: center; color: lime;">Completed</td>
<td style="text-align: right;">100%</td>
</tr>
</tbody>
</table>`;