jspreadsheet/ce

The Sample "integrating-a-third-party-plugin-into-your-spreadsheet" throws error when I update the jexcel to v4.

Closed this issue · 1 comments

changkejun commented

I try to use the sample in v2 to my app which is using jexcel v4. And it throw some error.
https://bossanova.uk/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet
The operation is copy the customeditor cell and paste it.
It do work well in v2 but wrong in v4. would I get some advice?
image

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css" type="text/css" />

<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="my"></div>

<script>
var spectrumEditor = {
    // Methods
    closeEditor : function(cell, save) {
        // Get value
        var value = $(cell).find('.editor').spectrum('get').toHexString();

        // Set visual value
        $(cell).html(value);
        $(cell).css('color', value);

        // Close edition
        $(cell).removeClass('edition');

        // Save history
        return value;
    },
    openEditor : function(cell) {
        // Get current content
        var html = $(cell).html();

        // Create the editor
        var editor = document.createElement('div');
        $(cell).html(editor);
        $(editor).prop('class', 'editor');

        // Create the instance of the plugin
        $(editor).spectrum({ color:html, preferredFormat:'hex', hide: function(color) {
            // Close editor
            $('#' + $.fn.jexcel.current).jexcel('closeEditor', $(cell), true);
        }});

        // Run
        $(editor).spectrum('show');
    },
    getValue : function(cell) {
        return $(cell).html();
    },
    setValue : function(cell, value) {
        $(cell).html(value);
        $(cell).css('color', value);

        return true;
    }
}

data = [
    ['Google', '#542727'],
    ['Yahoo', '#724f4f'],
    ['Bing', '#b43131'],
];

$('#my').jexcel({
    data:data,
    colHeaders: [ 'Name', 'Custom color' ],
    colWidths: [ 300, 200 ],
    columns: [
        { type: 'text' },
        { type: 'text', editor:spectrumEditor },
    ]
});
</script>
</html>
changkejun commented

The problem is solved