HTML editor
Basic editor
How to create a column as an HTML editor input in your spreadsheet.
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YzI2NjExNGIxZDM1MDVlNjU0OWQ4MjJkM2ZjNWUzMzk0MTA5MjRlOWNlMjM5NjVhYjIzNTkxMzA4YmZlYjdlYTY3NzllYzhkYWMyNzU2MzdlODI4MmE1YjM5M2UxNWYyOGUzODU1NDBlOWExN2I3OTc2MTEzMDViOWYwZDA4MzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16VXdOak0yTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let data = [
[ 'the Sorcerer`s Stone', '<img align="left" style="width:100px" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUSEhIWFhUWFhUYFxcVGBobGBsZHxsYIB0dGB0YHyggGBslHhcYITEiJSkrLi4uGh8zODMtNygtLisBCgoKDg0OGxAQGy0lICYrLS0tLS0uLS0tLS0tLy0tKy0vLS0tLS0tLS8tLS0tLy0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAwQFBgcCCAH/xABIEAACAQIEAwUGBAMFBAkFAAABAgMAEQQFEiEGMUETIlFhgQcycZGhsRQjQlJiwfAkcoLR4QgVY5IlM0NzoqOywvEWNVNks//EABkBAQADAQEAAAAAAAAAAAAAAAABAgMEBf/EACsRAAICAgICAQIFBQEAAAAAAAABAhEDIRIxQVEEYbETInGR8CMygaHhFP/aAAwDAQACEQMRAD8A3GiiigCiiigCiiigCiiigCiiuXe3QnyFAdUUwxOY6NGpCCwJIJHdAF2vYm5AubC/Kkc1xxACKSC1u+OSi472o93xAB5m1AStFVvMM6XCRKZZGZyNMakDXLJbZQo7xJ58rC19qpmVcXEYq2KhMQlYNHJdZEXSrAl9BOkgtYDmL70Bq9JzTqgu7BR4sQB9aob42SCRjrEigO5IBAkZgmljflpCkXBtvaxNU/NeIpHu8jDUerX2HXSp5Dz61zZvkcNRVs6MXx3Pb0jYlzjDk2GIiJHMCRSfvSxx0Vr9olv7wry5jMexZnUk97unTpB25gHka+YbPJUbUjkmwOm5FwRuL/uG+1R+LkrpFnhhfZ6nw2JSQao3Vx4qQR8xSteacu4zkVtaHs36MnX4/u+BrZ/Z9xqmYRlWsuIjt2ijkR0ZfI/StMWVy1JUymTDxVp2i30UUVsYBRRRQBRRRQBRRRQBRRRQBRRRQBRRRQBRRRQBSU0pA7o1N0W9vrUFnfEyQyJGQQpZQ8mxCXv7wBuBsN+W4pvPmME8sDxTqwfXGdLMEZCpPdI2L7A0BJHNTudLJYDZ1spG5JUnnytvbpTx5wGux20ggWO2+5P0phh1VEKjvCzC5v7tyQN/iajHmLG5JNZTyqJdQbHyxLKySFn7hPI2Vww+Nza9twOtK4nBB7As2gENpv8AqBuCTzPwO2wrnLm2Ip3IdqqsjasnikxHEYVJDG7qC0Z1I1t1NiCQfgSKhM2wOCw0UkrQRgNct3feYm/LxJP9WqwRcqovtMnBhI1gabEr8dl1eWxNutvKqSm6NMcFKVFI4mzxggjhsBbmRYX/AIR1A6dKoy40ljve9l1N18bDqTTPMc1Lu3Uchc7WHl1pqshP+f8AXKrQxUtms8tukTMuLDEseQO1zz9OQpgHsb+P9XpLtNxfew+tLadTG46W+m1TxSK22OezBFwdLfQ/HpUjwvxE+BxceJAtp1K4HIoRYgjwvY7eFQKyFTpP9CupVvtRRpkylao9R8LcYx4nRFKvY4kxrI0RNxY33Rhsw2qz15by/Np9K9jKwmbQikgaFQACzNa4uUv16cqv3CXtClw10xs3bxi+pgveS3QAe8BY/I1ucZs1FNMuzKKeNZoZFeNhcMpuP/nypQYtN+9y51FommL0UmkynkwNKVNkBRRRQBRRRQBRRRQBRRXE0oVSzEBVBJJ5ADmTQHTNYEnkN6pz5i0+OjbtZIooYy+gqQsgZioYsbAcj3TfYgixqpcecQTyu5hnICL3IYjcsGtZyF3ZgN7E2HgedQWZ4+ebCQQmb8vtSwvdpeyGkqXI2LXO3+m9ZSUVbJjFydIt/E05XEYmCAakxUcTa42A7JwNJL6r6tS6SAP2+tSHCmWxYbDxwJduzBJY23ZjdmtfYk0z4XjjMQCDcHfbe/j61OSOsEbSPsFBJrzZfKc3ro7FgUf1FsbjEjRmkYKtjcmqQvtDwZBcayi2uxAFz+1Qdyaz/jzio4twkbtfUV3GlbHkBZjceJNQua4Vo9MQvpUXuDe5PMkD5VtGNpcieKV1s9D8KcR4XFLeCUE/tJGr5A1Oz15YwOFcMHRijXADIbG55cv6NbV7NOI550MWJcO6khXOzG3MHx+9S5KOirxP+4v8XKvOfHeeSNJMGa2qRwV67Lt8hYerV6Qg868te0zBPDmM0LX2a6eatuP8vStIJNmalxTKsopzHH3dXnb/ADqRx/DGLisJMNKvdVr6Ta3mRt1pfD5XPoC/h3sOZI+1aOa8FoY2M5IAI4iOb3qajwV5NFr7GxHkPOvsOWF2TUrBdSKe6dgN7DxJ3qaxeYwtiwxZYo01XHNztbcDkTyA8BWDbZ1KNf6KRjYTq0fqsbel/wDI1zgcULaT/XgatK5X+JmE+Gs9pF/KBAcxjnYN1IvVazzIZcNiGw5Uk37m3vKeRHpz8N61jJPTOfJBxdo172aZXDjMA0brZ45HUOLalvv1uGHkdqgYfZzizjhBIoMLHW04vbQLbAc9RJtp+tgavHsoyo4bBd6/aO5Z7+OwAHkBarzJL2cermxBIH2rGOb8zS6KTx++yPw+HgwMIhgiCIN2N7AdWdyOv3NQS5wMQdEF9K6i0jCy+njbwt8TXeaBJWKC7xK0jyi9jLIDYA/wqbgD4VT87zgRRmJSBLMEHd2WOLV7ijxNjeuPNllKVHVhxJIs6Y4xxh0JuWYIp5tY8/Icz8qsnDPFsOJAUNZrlbHmGHNT5/esSxXETakXUTu63J5XQFSPVT8qiYM+ZXaWJiD2iufEHlq9L7+Qq3x3kjtdE5oQlryeqKKSwjEohbmVUn42pWvXPLCiiigCiiigCqjxNj8JjA+XDF6He4kEdi2kC7KSQQu3Xyq04nEKilnYKBfc1meZ8Z4PB4lnMAaca4ndbaujht7DQQbX2NwBvQEFxtlqZe8Vr3ClYlSyqUW27m+otqIPqdxyqsZLhywIudQtpH7ifjUfn/EsuKxTYh2J3PZg8kT9IH3+NS/DebJYAqNam4O+5J636Ab15/y5Sa0dOCk9mtcJ4ApCpcDWRvtb4A251B8S9tmGJky3DERrFGrzSsL7tyUD4VK5Dngk0rqF+Vhf6VxlcHYZvNJ/2eKw6m/QPHt9Vt8jXL8dwbpnRLkm2jOM39miYRGYyPK29zsAPQVR8XiHjIDLuuw1jp5HnavQfFssXYvI7DSQd77ehrLMXi8DiI3UCRWAshYGxe221rgHzrq5vk72joUIuCrTEcsOHxMVwRHI0bowvtq5g+RDAH50xyjiOTCYpo8QCgaQFz+xxazA+BA9QajYcC8UTvtsxBA6bWv8L29Ke46L8REsrC5AC6uthbn5r9jVEopvyvsQ3J17+56PyzGLIqsGDBgCrA3BFUr2w8ILiYBjEFpsL3z/ABxDdlPmLXHqOtV32T4pwjw9odCAyRg/oZT3l81YE7dK2DuyxkHdXWxHkRvU45NOjjyQ4STfRkPtczOZlhiRysegMQo3YkLa58r1miYnGIpcSSBVIFmPU+R51tfEeSBY1Mt3UDRuB3NOwBI5g+JrPswyWAHVq7oudIbUT5Dwq0claZ2wxqUU4sruaY6VoYm12uSdttxt6czUXl+BDt3nCjqW3rb+HuHopMsSFo9jdr23uTe4v4X+lVuLhyJZyGw/fU76CNLeYV/dvzsNq1UuKIeNTe/BBcK4adZl7IG52VlU2tcC/LYVovFfChZsNIjEOgcarAkyHSQWvtbnueVSuRwkNrYAHTpVV5KvW5/Ux+VWWXBCXQWvZTewJAPk1uY62NYyV3RTJl4NDfA5eyRRo7anAAZuVz1NNcfjAJ28EVF8vevf4jep2YhVJOwG5rN8RnaYgyqrFJlJsji3LdTbqDpI2/dWEk4J0YYnzlbHPDk+qOU6SAJJJCfAFmJF/Ii/wNZRntyzMDfSCSfsK1fE4JsPExDxiGfTrDgsNxYgW+G1ZdxTCgnCYZu0BtdLG+ryC9KmOJ2mdaaSZUZZiCtzvZPmP9Ca6U6WueR29Dzp3n2As4EgKNyIPSlclymV2jREMhMgAVdyfGxPlvXapLiczTUnZ6ywvuL/AHV+1K0xyIOMPEJAQ4RQwPO4Fjy8bXp9XSnaOB6YUUUVJAUUVGcSZvHhMNLiJDZUXpa5J2AW+17kUBV+I+I8O002HmLCNEGotZVV7gqf3HcAgjYWv0rCeMWIxTAMzKyKS0m8jXOrvHruAenStbzPLA2E/HFlMzKh7SYhT2dwQveHInTc2vcjwFZzifZ3mD/mq0WILgNdZV1MSOXesLjlz6VWTJSKirmp3hpjrNgSdJ2FN8ZkE0DaMVFJh2PumRfy28gy3F/WpvhHAMJRqXlvqBuCPjXJnklBm2KDckXThbCv2iGxGxJ+2/hU1xLhjq7Qk2QIbXIuAdwbb2IJqSwECwgO5te21dZ1mmGkibS41WtptvevGd7le/R6WJNSVK0RHtEyaOLAIsPuGUMoFzYMCevS9U/KgNAUxB2Hu3FtPxHWr7lmJixOHODkVXaPeMObAgdLjw3HwqoTFo7ooXbZStyD53PMV3TmpRUl0zXBHi2pdr7eCqYhtMzxPazggjpq32+BBI+VQmDnkgkeK/dPaXB6jSQCfQj5VIZqA84S+y3MjHy3PrtUNmE5knZx0Fh5qBb52roxRtV9Dmzz3a9lk4HzV4cT3FLkMO70YG4Kn4i/rW/5FOpQBAQvKzc1I6G/I15Ky3HyRyAoxBuBXovJ+I2iy1sbI6OQukW2YyclRh1N+vO1RlxuM0zHl+LCvJOZjh2H4hDurHtU9QAw9GW/+Ks1zIDcGw8aqWB40xOGxwxU0jyrJdZVZiRpJBIUHZbWuAPCrpn+AWZBLFJ3HGtGU8wfCss0Wmn4Oz4z4NwfZHtxvjo0MSKhHJXCbgdNhtTpMyJTXiZm7ba0jWHwACgC1UnFRBSQ+JnHwqWyHJ8NIL9m72/VISflvat+Nx2zTp6RqfCeYdooJO/3q64J7gjwrLeH8UuHVm6DZV+wp/H7QocLC3bH8+TUyK3dRiNve30ioxT3Rw/Kjeyye0XMOxwclmClhzLAWUbsf/isM4yxK4lUxuFkN4mCSMv6RtpY9dN7CoDjPPMXiZTNige8e7Y3jA6KhXukVE5Lmr4eUSJuDs6H3XQ81YdRXV+H5ONTpUbtwRxXHmODOHmKriI/eQ7a1tbUo6+YrvK5IIJn1RiGFBftSm7uTyvzCgb3rFMYxhkWaImykFXHO2xFyORsbVonEebv2AcSxgyIpClCWsRvY3t9KOXGmjt+PLkmmR3G80U2NlMZDL3QCORsOYpHhniRcHmGFVlGjUNZPTXdQfK170y4RyWbFzdnEo1AFja+kKOreG+3xqo4l7zt24Nw7BwDvsbWHwtWUIOeRyf8ZX5OSo8V2/se0ga+1U/ZdnRxWXQuxJeMGJyeZKbAnzZCjf4qtldZ54UUUUAVl/t0xRMOHwodUEkqs7MQLKCBcA+9ux28q1Csd9sONSfFQ4aJQ0kFpJNVlUJcE95tttiaAhvaVmAjyrDwCUz9pIpWZiN1UXtZdre7sazHBZ3NEdUUjIf4TYH4jkatvGOcYTFSRRSl4uxjCao11IGJ3OkgEry22NVbMcgkjXtFKzQk7TRHUn+LrGfJgKq68lkmXHKPaFPp04kLLE2xVxdT/IH61b+HcPh5yHwkqpvvHITt/dPUeRrDEBFSmAxrxkMjEEdRXPlwKSN8WSmeksRmEKBYmkHabf3SPX13ppmWTLIwYX0kCwUbfMCqfwjmAmiUzKH3I1K3eB/rpWh5DmcSdwXAv+o7eleRJKWTjLR6LTxx5QtkE/DZjZXRmUqdQJHUVGcSiadtRJDnZQB9h/OtHxGZR2Nxv/W9U3PF7T8uI2MhCkki9id/Tyq85Rg+MZWRhySm7kqMuxnD0akrJilDMfdiVpWJ/wAJ3NNsZwi8IEiO2o3AjxELwM9wQRGZO6xN+VxW4w4aHCaI4UUGxLHbUel2bnzqk+0niMqqxEK0cqsrrz38RfcEcweYIrsU5LVlIwU3aWvZjeC4cneQRsvZDq835aKvUkvYH0q85lgEjgEWEPbIrBnZHEmpgpGohTse8Ry5WpvwvnySqcNiI1mG7IG94gDvaG5q+1/A2NOs1yRFWOXCSdpG99CvYNfnZX/d5N86tlyNupDDCGN2iq4iNXBU/wBf5VxkPE0uDDQm7Rk3Cn9J6keR6/CnePcOvePeBsSQQ6N4P4ioTGYcnY860glJVLojPJ3yj2WEcWJe+kHyIH86Um43JGlFAqiOtjY11DLpN/vWywxS0cz+ZkemXvKOJGY2fkeVRnHc+swb3sr/AHFN8K67Ouyt08D1X+Y8qb8T31x7bdncHx3N7fKso41HLotknyxH3K8V3SBdG6leRH8aHusPSnTYGOVykiKjg2LRnT66G2O3gag+1JOrrT8YgsVY8xsT4126o5Bxi4nwhCNaWF+TAEeGxB5EW5VaMnxKSYGb838uAF1RdJcAjkQ24Gra/S9ROdNfLj1tiEN/AaGH+lVfKMzlw0qzQtpZfkR1DDqD4VzuHNGscjxyPQHsxxsUcnYwL3GsHa92L2vdiPoOVZl7Zcs/C5pIUFllCzr56tiD5alarL7OoY8diO1wzLhypDzRAWN/3REc1J20nkT51L/7QmVK8eFxB20O8TEWvZl1LcnwKH/mqMb4uiuV8tif+z9noaTE4UbJpWRB53Ib1N7+gra68r+xTH9lm8A6SB4/mpP/ALa9UVuYhRRRQBWE8TZqsOdSSGPtgSsbgrqCRkAOwHK4Hj41u1YNmPEsIxWMw0kOgyzyRSYkW7sfaAarmxDKLW5i9qAzHiMRjFSiF2eMNZWb3iABz873pvgsfJC2qJyp625EeDDkw+NKZqFWaZR3gJZACedg7AHbra1MTUdk9EnPjo5TdkCNfcp7p/w/p9KkcHkEkqloSrgcwpBPoOf0qtg06w8rKQykqw5EGx+YqkovwWjL2WfJlmjYoNQC/p5d47Dar7lePsAurVbZm8W628hy9KrMeeH/AHYBKP7TJMVjkPvNCACWbrZSSoNd5Apf8JGDb8VNJY/wIQv1Oo/KuL5GByVnpYJ0jSYMZ3NXTkD0vUZmDq9weltx0rv2i41MO8WHj2CRkkeZtb1sPrVAm4jZdQ56gBXl/wDkkps6YZYuPIm8yz3HZewbWsisto3PeAHO1juPgaigZ8zL4jG+6gWNdHcbUxFivQ2v+rY8qhsy4kZgobfSALHxpLAcVP2qlz3AQSB1sQR9QK9OEMih0Qni5bYx4hySXLMWiltQ2eNxtcX6joehqbyLGhllw5OzHWnkedh4X3+Qppx/nq4s4Yg3KiTUT5tsPhaoPLsUVIYdD/O4+9buLnBN9nEnwm4rokMRiTI5DH81QRf968wG8TbkaYysSbda+Zk3fDjrrB9LEf8AqpAy3IPwqYx0VlPwN51DciL/AB/kaZEU9xuG71x1+9Nm8+ddEXo5Zrex7lLk6oup7yj+Ib29RcVZMxzXBy4FISJDOgOmybhrnmb8vGqarEEEGxBBBHQ1fcuzESKjOoQuBaVR3SeRDgct+vnVMi8kwm6oo1ipswsRzFPIZRaw8fWlOKIGWdtSgXsbj3W8waikatYy0U6ZcZ5f7MIzyeOdiP7oDKf+ZaR4QyZZD3gNVtS3FwRyPqDb50wxOIIKKekJH/MpqzcHgiFZL7rIWX+6oAceoP0rF6Ro9sneH4PweZYeaIaY5A6SrvpD33A9LHerJ7X8yjly6WO41Axut+tmF7el6RzHDoWUNcK6iVWHMPHz+aH5A1lfFeYSNJIjNfTdR4WvcfSqRTbLtRSdkTwvjjFjIJhzWVDsL9d9hzr2Wp2FeKYHKyRul1OoEWJ2INtj18fWvasXuj4Cuk5jqiiigCvMXGGMaHM8VIlxaWRdMi3VwTvz5eX+tena8ue04yRY/GQszaHm7RQdxuAbg8x1FvKgKXiJCzsx5lmJ2tzJ6dKTr4pv866oAp1g4e0kVL2DMAT4Dr9KaipjIYAS7N7qgEnwF97eZAt61BpjjylRMhO2Y2FmlAigT9sYJUMfiQ7HyUmrBw0VlzvCYeI/kYRAqnyVCzsfMu258qrmImZYZcTytaJPJj72m3RVsg/xHrUl7IccsT43GSgN2eHJ36ljyrPezsnKlx9/9LD7Xc7jvFHpH4iQtMzdUhbaNPiVUE/61l2Ixt70jmuaSYiaSeVtTyMST9gPAAWAHgKZk3qVBdnO8rqkKNiDSRkrg18vV6MnJioanWHay+tMQacI1Q0WhLY5xMlwB5n7AUm5sa4LcvKuJHuahIs2SOoHY0hjILrqHvD3vMeNII1PYJDe9Uacdo0VSVMihVm4ZzURwsjJrUPcgcwCP8xVfxEWhyOh3HwNO8lxPZyE9CrbeNt/5GrvaOeqY74nxEcmloy236WBB/yqGwkJd1UdTv8ADrTvMMX2n6bUM4ij0j33G58BUx0qHbOcVPqZmHLkPhyFXHg6UB8HGfdImkf4EW+9UvBRa2CDm2w+PSrLwjidAfEuLrDCY0HXtGK2+QJqs+iy7NLwzFsKh21YeXSb+CsVN/8AAR86zT2kYYR4yQKNKsiMAemxFvmprRcOw04hBb8yGOYW6lgUb6xofWqD7VpL4pT44eL7vVIdl59FLwx7yj+IfevbUXuj4CvGXDuC7bFQxAE65EG3PmL2r2egsAPKtznPtFFFAFee/bpk8gxxxCgaDHGT3u8W3BsPQbivQlZF/tDYM9hBOoXZzGWNwRfcW6bkGgMBHM7W8q6tX2dQCLG/j5evWgChKOkSrBlcdsNO/O0mHFvH/rLfXTUJGKnMiGt48PfSsk8TMfJA+3qSPlVGzowqmNuLsSF0YRD3IRdj++Zt3Y/C9h60i+K/D4RoAfzMQVaUftjG6qfMncjwt40/zGCH8bK9h2OHAJsbhmHS/UlzVWxU5d2dubEk+tSnZOZtSb/wv0X8oTvS8K3VjbcW3pvTjCN7y32I+1WOZdiRrmuyK4NAwFKK1JV0KBMVDV8NcivtQWsWhp1Eaj704ixPj86rJGkJpdi+LS4v4U1iaxBp2JQaZsLehpH0MlXaOyfkKbu5JuedKTnpekRVzJjrBSFWUjmGX708gd2m7JDYGYtt4g8z8BTLDDcfEUuZSkjldmJKg+AJsfWqsnwa1gceJMREwPcKSxXHIiyMPqDVI9qp/tij/goPkzinmXZnplw6LYaVLP8ARfTa9RPHuKSbHPd7KiBQbE7gXt82NZY1s0m/yjz2NYHtc2w+1whaQ/AKf5kV6srAv9m/KtU+IxJGyIsanzY3P0Fb7W5gFFFFAFVn2k5J+My3EwhbvoLxjrrTvKB5m2n1qzUUB4mChgfK/wDpy+9dxbgGrv7WuGGweObSLxS65o/4QSdY+AY8z4iqVgyC9jYX5fGol0Wh3Q4iWnCyFTcGxsbGp/h7hVsVfspF1DmpBuPPbp50yzrLfw8vZyFSye94DyN+e1j61gsibo61GkVfEOQNFzYnU3mel/gPuabVtXD+Q4SbAS4p8NFrj1gd3YlVBBPxvWNTOXcsFA1EnSosB5ADkK0x5OV6ObJGhKlMOe8PjXAF9hV7ybgiRMJNjJAS6KOzjXc62Nu9bqAb26datKSj2Vim2UyZLbfOm5qwycOTJPFDiBo7RVkvzOg/D9Xl51omcez2GaTCQROsUSQsGcW1PIxBA8Sd+Z/nVHlii7g30Y1XcBXUNd9Nxe3O3W3nS2ZYJ4JXhkFmjZlPxB6eXWmwrUyNTTgjA/h48SO0aOQKVOux36EW9K6w/CWV4hmw8MrJiApIUk8wOVzzqU4SAkyXDgn3J2X5yj+TVEcPRiPiJkUbAuvh+kVx3Lk1b0dOuKdGcZjg2hkaJxupt8R0PqKRStH9rWXIAkwFmErxbdV7zC/w/mazla6Mc+cbMpR4yo7AtXxjTrAYN5nEcalmPT7k+AFSnEWWCGNUW7BW3a3M6dz5Cjkk0ia1ZXHNcippMm/sTYp9ruFjHiBbUfhuBUMKummZtC0LWPrXb4k6iR1J5+FN6c4LDFtTkHQg1MbegHqaMkfZU5F5b6QgI35HrYedRMzljrbcsSfHr1pTETtIQLbLeygbKOv+pqd9nmQNjsdFAL6Cby2//GN2v5Hl60SIbPQfsYyH8LlcWoWecmd/8VtI/wCQLt4k1eq5RAAANgAAPhXVSQFFFFAFFFFAVX2j8OfjMI4RQZVU6NhcrcFkva4uB06gV5SniKOVAIKsQLjvXBtYjx2r2vXnb2ycDSYbE/i8PHqglJZgo2jk5m9uQbcg+Nx4XAlfYwC3auRbuWPx1CqJ7VsR/wBIToP3At8hYelXz2My3WS5BuGO1/3LvvvWc+09T/vLEn+MfYVyYl/UZ0Tk+NmqcOXGUYjle83/APNKpWSRxQYJcdGwQq4AvY3YKL6rbliTsOlWrIcdGmVzRyOAzNKFXqbogFhWaYLI8fNA2HRAYo27ZtTKoU6SL3cgWteqQSaab8lpNp2kTHGGUB4I83wg0CQ2mRf0SdWXyN7+t6sWQG2UYuUEhlSNrgkc1QtcDne5rjKTr4fxKnmgHz0p4fCuuGQWybHKLn+zx/SMH7CrN2kn7KrT16I/N8cJIcCxBE0Sslz+pNJsfPkKtXFucR4bE4Z5Tpj/AAqObe8WQrZVHVje316VkOCxryzh3Yk6SB0AFuSjoK0b2ixxti8CJVDqcKe6fEAH7A0cKdP0Td9GZcUZucXipcSVCdo19I6CwAv52FNcVls0YBkhkQEAgsjAWPI3I5VavaZkMWHxEMeHQBJIkZbXuxPMn50vxrJ+GwOFwIvqb86XfyIRfhuTb4GuhT6S8mLj3ZdeEMGIcqliLhizJiIuhKMIyPXUrDaq3kRf/f6uwPeY/VKsnC7drkkZO5UMo8RpkI2PwAqGwXE0WHmOtgvYjeIgWm1C6tqI7rIdj4gjwrl5PnI3pcEMfa3iWaUxDcCW4A56iG/0qrZXwzNMyxgWdgSFPOw6t+wfGrxwtnMeOx9nW8gDyRvYaVPUWIuwseZqBhnvjxDcq00pRnU7gF2AA8OQq8ZSiuKRDSbsZcJq64uLDtdVkcBypILDwuN/SrHxjhY0mRGlEMTkrISCSFCrsvPvG53+dIy4IQZrhohySZBfxugufnem/tbf87T4H7qv+VRfOaf0D1FolfaLloihiit2cQUhRcd0XXz3vVHwuRfltiHYdivuAkBpPMLz089/KtA9sbfkw/8Adj/2VG59hR/u3DA926Dfb9rcySPvSEmor6siSt/4K/xLwh2KRzxSq8MunS3IC/ieg638j4Va58ijwuCig0h+2liMjsQA3NvRO6KiI84j/wB0PhZW1MvuMOVr3G/juVFr8/I1OcYS2y3DHe113HMDs33HmOdJSk6T9kxS2/oVL2gZKsEgtpvzsostrgaV8QLi3xNbF7CuEjhcKcXKtpsSBYEbrEPdHxb3vhp8KpHB+XSZ7jxLKpGDwwUNf9dt1TzJN2I8OfMV6FVQAANgNhXTjTUaZhNpvR9oooq5UKKKKAKKKKAKqvHOB1hHdTJhxdZ4wTspvaQAc9JsTttYHkDVqoNRJWqJTpmLcB5OuBxOIiEwkTTqR7jdSwIJ/i3sfhVY4iyDtcdiMVKyrh9erc+8FA++4rQsZk8AzPEp2Q0NDGSlu6CSLkDofhVU4r4OnMkcMaP2M0jntBuFUqtlIG9gVPPqTXHFSlkaTOhtKKY6wDRzZXiZREq7zlOpXupaxPKmXDyI+TYxkFmKlb33sI0t9zTvh/DkZXPENzqnWw6kBRt8qqHB/Ev4bDYjDyxEhxpbcLoIBXvavK3yqkVp14ZLe1fosHCkV8kxY/4YP/g/0rrgLvZdjF//AFwP/JNQeA4hXC4NkVtSMoXRYd/Yjn4EHe1MeGOMfw4dFieSORAjqFANgum4IY6TbyNX4tp0vJFpfsVnJGtIDa9lJrQ/apidOJy9/CL6HSPsaziOYRMbISL7B7htN9r29L08xucy4nson02Q9zb3R1APRdr2reULlfgzT1Rps8cGOhy+Yt38PqEvgFXofMkXHlc1lnFGaficVLN+ksQn9wbL9KtmfY38NlyQKAHnLMf3BTz+Y29TVAIquBX+b9icno1v2eZiBlMgb9EzqPUIw+rGqDxob4okX3Vefr4VdMtw8UOWHRe85gkCkn3hbUAem29Z5mkuph4qCp9Ga30tVcSvJKSLT1BIsXsqxSx5ghc2DKy+ptaktVs0i8sUg/8AN/1qCyfHdhPHMF1dmwax61PTyI+MhxaECMyrK3PukOGZSPG97eRHppJVK/oVXRaOKG/6ZiP/ABo/tUD7VD/a38O5/wCgUtPnK4rM4pFFgZ1sP4RsL+Z5286b+1GS+Kf/AAj/AMC3rLGqlG/ReX9rLL7XD/Z8P/3QP0SkeMTbLMOv8HT+5f8AlS3tbN8NhiOXZj5WSqjlWcxyYSTC4ltLBfyZDy2/SfM3Iv4E1EU3FNeGQ5bf6FcfAOI1mKnQxsD4ne/2rXMZlhxWCwOGDBTLJEgY8gGSTeqfk2ElxojwWHUaUQmWQm0cY6uxG1/Lryq/Q4hIpMBF2gJTFQ87AlQHFyL7cx86vkbbjfsiCVS/Q1nhrIocFh0w0C2RBz6s3Vm8SalKKK6TAKKKKAKKKKAKKKKAKKKKAoOZf/c5zf8A7CLb5VcMDGGgUHqpG3nVSzHgnFNi2xkWPVWbbs2huhX9rWe55DerG+LbC4V3xGjuA27PUQfDYi979N654QcZuTNZSTikjMuFQBhJgxIHbzgnrbUBe/jaqNxnksEkz6ZdLxxAuzgkub9AALkje9WnhTPYVEiSB427ZpAJEIRwSDpDEWBuDzq58Wez+DHxtPhWWOaXSwc3ZNvAA902FttvKo+PpysnN4PM+KwrIbNyBt/Q6VcOEoUOFl7N0/EtYKrnSLeNzsbeFc8R8H4vA2OKU6GNtQsw5+PL4VWJVUE6A23UHbT0v51tOPJUZxlTJrGcG5ge+YTJfqrBvsa74WyBzMO1UoBqvqHJV96/0X1qNizeePdWIHMEMyXHkAbfSlZuKMQyOutzqXSxZtVlJ3tsLX5etZyWRqtF1KN2IcS5p+InZh7i91B/COvrz+VRdciuq1SSVIo3bs0LKZS+WQ73McxT6sR9Gt6VRcUO+/8Aeb71ZuHsxtgmh1BbYpZGYi+3Zna3xSq3jtpH3/UayxxqUjWTuKEK7Vjyua5HiASPHpQisfdHj9BetilpCschUhlNiCCCOYI5EUtiseJU0vfWLkN4+RpfARxLE7SqWkYflXNl+PnyPltzr5kfDGKxbhMNC0l99Q90C9rs3Jfgd9qjiuyHPwP814pfFokUpCiNFQWHdNrDfqL2qd4E9npzDn+Wt93GogJ4i+xJ6DyJNX3gn2JQxFZcwYTOLEQrtED/ABnnJ8Nh43rXYYVQBVUKALAAWAHpUKCXRHK+yJ4c4Yw2CgGHgjAT9WrdnPi56mm+P4Iy+Y6pMJFqvfUq6Wv4hlsQasNFXoqN8FhezXQGdgOWttRA8Lnc+tOKKKAKKKKAKKKKAKKKKAKKKKAK+EV9ooDgxL+0fIV0qgbAWr7RQCeIgR1KOqspFirAEEeYNZ5xF7GcvxF2h14Vzz7I3jPxRtgPJSBWj0UB51zn2JY+L/qHjnUeJ0t8LH+RqmZhwjmOHYlsFOl+iKzgeq3+pr17RQHiGaJlNnUqfBhY/WpLLMKhdLslupcd0f3vEfCvYOKyyCS/aQxvfnrRW+4pt/8ATmD2H4TD2G4/Jj2+G1AecsRgIcNGpkhUxs4Y2kB1KQQu622BDWB8TUPJhVLtJbSCuuOONNRZSdl1AXDWtz3r07i+HcOXgH4eHs07TudmmnceFrc96kosuhW2mGNbcrIo+wqEtslnmDLOEcRMeyGCxRGsm42SxGx1OBqIv0O486vWX+yfE4j8zFFE5gK4XWwsLFzEBbccrn43rb6Kkgz3LvZFgQwkxAacgWEZJWBN72jQG4FyTYseZq9YLBRwoI4o0jQbBUUKo+AFOKKAKKKKAKKKKAKKKKAKKKKAKKKKAKKKKAKKKKAKKKKAKKKKAKKKKAKKKKAKKKKA+GvtFFAFFFFAFFFFAFFFFAFFFFAFFFFAFFFFAFFFFAf/2Q=="><span>On his 11th birthday, <b>Harry</b> receives a letter inviting him to study magic at the Hogwarts School of Witchcraft and Wizardry. <b>Harry</b> discovers that not only is he a wizard, but he is a famous one. He meets two best friends, Ron Weasley and Hermione Granger, and makes his first enemy, Draco Malfoy.</span>' ]
];
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: data,
columns: [
{ type:'text', width:'200px', title:'Title' },
{ type:'html', width:'400px', title:'HTML' },
],
minDimensions:[2,2],
}]
});
</script>
</html>
HTML editor with a custom toolbar
How to customize the toolbar of the HTML editor
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YzI2NjExNGIxZDM1MDVlNjU0OWQ4MjJkM2ZjNWUzMzk0MTA5MjRlOWNlMjM5NjVhYjIzNTkxMzA4YmZlYjdlYTY3NzllYzhkYWMyNzU2MzdlODI4MmE1YjM5M2UxNWYyOGUzODU1NDBlOWExN2I3OTc2MTEzMDViOWYwZDA4MzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16VXdOak0yTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let data = [
[ 'Text', '<b>text</b>' ]
];
jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
toolbar: true,
worksheets: [{
minDimensions: [8,8],
columns: [{
type: 'html',
options: {
toolbar: {
bottom: true,
items: [{
content: 'undo',
onclick: function() {
document.execCommand('undo');
}
},
{
content: 'redo',
onclick: function() {
document.execCommand('redo');
}
},
{
type:'divisor'
},{
type:'select',
width: '140px',
options: [ 'Verdana', 'Arial', 'Courier New' ],
bottom: true,
render: function(e) {
return '<span style="font-family:' + e + '">' + e + '</span>';
},
onchange: function(a,b,c,d) {
document.execCommand('fontName', false, d);
}
},
{
type: 'select',
width: '48px',
content: 'format_size',
options: ['X-small','Small','Medium','Large','X-large'],
bottom: true,
render: function(e) {
return '<span style="font-size:' + e + '">' + e + '</span>';
},
onchange: function(a,b,c,d,e) {
document.execCommand('fontSize', false, e+1);
}
},
{
type: 'select',
width: '50px',
options: ['format_align_left','format_align_center','format_align_right','format_align_justify'],
bottom: true,
render: function(e) {
return '<i class="material-icons">' + e + '</i>';
},
onchange: function(a,b,c,d) {
if (d == 'format_align_left') {
document.execCommand('justifyLeft');
} else if (d == 'format_align_center') {
document.execCommand('justifyCenter');
} else if (d == 'format_align_right') {
document.execCommand('justifyRight');
} else if (d == 'format_align_justify') {
document.execCommand('justifyFull');
}
}
}
]
}
}
}]
}],
});
</script>
</html>