How to use jeditable with a wysiwyg editor like Summernote?

[miltonreg]

Hi,

Currently, I'm using jeditable and autogrow to edit the records within a html table in a master-detail on MVC .net. It works perfectly. Congrats and thank you so much for such nice solution.

However, I've been requested to handle formatted text (Bold, Italics, Bulleted and Numbered lists) in one of the detail's fields.

I've found a simple wysiwyg editor, Summernote (https://summernote.org) and I would like to know if you could give me some North about how to make them work together, or perhaps using any other editor you've already used in the past.

I'll appreciate any suggestion or guidance.

Thanks & Regards.

[NicolasCARPi]

Hello,

Sorry I don't have too much time on my hands right now but I'll try to see about it soon :)

[miltonreg]

Hi,

I've found a way to use TinyMCE through the code specified in this link (jquery.jeditable.tinymce.js). It displays the editor when I double click the text I want to edit, and returns the text to the table preserving the given format when I click Ok.

However, when I double click on a text already formatted, jeditable removes the format. It looks like it removes all html tags that give format to the text, leaving just the plain text. It even removes the line breaks.

Here is the code I'm using:

        var theCallback = function (v, s) {
            console.debug("Element", this);
            console.debug("New value:", v);
            console.debug("Setting object:", s);
            var cell = table.cell(this);
            cell.data(v).draw();
            return v;
        };

        table.$('#col1').editable(theCallback, {
            "callback": function (sValue, y) {
                console.log("Updating Table");
                var aPos = table.fnGetPosition(this);
                table.fnUpdate(sValue, aPos[0], aPos[1]);
            },
            data: function (string) { return $.trim(string) },
            tooltip: "Double Click to Edit...",
            event: "dblclick",
            type: 'mce',    //Using TinyMCE editor.
            cancel: 'Cancel',
            submit: 'Ok',
            cssclass: 'form form-group col-md-10',
            width: '780',
            inputcssclass: 'form-control',
            cancelcssclass: 'btn btn-sm btn-danger',
            submitcssclass: 'btn btn-sm btn-success',
            onblur: 'ignore',
        });

I believe it's something related with the 'data:' setting, but I've not be able to figure it out.

Thanks in advance.

[NicolasCARPi]

jeditable removes the format.

By default it doesn't do anything like that. So it must happens somewhere else. Maybe the table.fnUpdate()?