can tablesorter contenteditable edit a field with carriage returns in it?

[Stephen-Hazel]

Not an issue. Just hoping there's some trick that'll let me edit multiline cells...?

I notice that when hitting return, another row of text is added to the cell. It looks great until I tab out of the cell and then everything gets jammed onto one line.

It'd be sooo cool to be able to edit text with carriage returns or even
or whatever in a cell.

any ideas?

again, thanks for a GREAT table editor.

[Mottie]

Hi @Stephen-Hazel!

Right now the editable widget only grabs the text (using jQuery .text()) of the table cell, so any HTML gets stripped out.

I'll go ahead and push an update to switch the widget to work with the contenteditable html (using jQuery's .html()) instead. Because of this change, if the user presses Enter, a <div> will be automatically inserted by the browser (the widget is not doing it) and any content entered will be added inside this "new line" div. If this is undesirable, use the editable_blur callback to modify the content.

Also, to enable a user to include carriage returns, the editable_enterToAccept option needs to be set to false (it is true by default).

[Stephen-Hazel]

That is awesome. THANK YOU!! So I just download the trunk again and it's there? Or master or whatever. Well, I'll give it a shot n see.

[Mottie]

Yes, the update is in the master branch, I have not push a version release yet.

[Stephen-Hazel]

ok cool. thanks again!

[Stephen-Hazel]

Hmmm, I'm having problems (sorry!) I'm pretty sure I've got the whole dist dir in there as it's latest revision. I make sure that trimContent is false and enterToAccept is false but tabbing out of a field still converts everything to one line. I think your demo still has trimContent at true. But I've got the below. as I enter returns, I do see firebug turning the div into one with kids of some sort, but when I scoot the mouse over to hit the plus, the thing blurs and the carriage returns are gone and firebug shows the ole single div thing... Rats...

   $("table thead th").data ("sorter", false);
   $(".tablesorter").each (function () {
     var ce = [], t = Number ($(this).attr ('id').substr (2));
      for (var i = 0;  i < ta [t][1];  i++)  ce [i] = i;
      $(this).tablesorter ({
         theme  : 'blue',
         widgets: ['editable'],/*, 'resizable'],*/
         initialized: function (table)      /* dont unblur */
            { table.config.$tbodies.off ('mouseleave.tseditable'); },
         widgetOptions: {
            editable_columns      : ce,
            editable_enterToAccept: false,
            editable_trimContent  : false,
            editable_autoAccept   : true,
            editable_autoResort   : false,
            editable_validate     : null,
            editable_focused      : function (txt, colInd, el) {
               el.addClass    ('focused');
            },
            editable_blur         : function (txt, colInd, el) {
dbg('ed blur txt='+txt);
               el.removeClass ('focused');
            },
            editable_selectAll    : function (txt, colInd, el) {return true;},
            editable_wrapContent  : '<div>',
            editable_noEdit       : 'no-edit',
            editable_editComplete : 'editComplete'
         }
      })
      .children ('tbody').on ('editComplete', 'td', function (ev, cfg) {
        var $th = $(this),
            tn = Number ($th.closest ('table').attr ('id').substr (2)),
            tr =         $th.closest ('tr'),
            co = this.cellIndex,
            ro = tr.index ();
         if (tn == 1) {                // autocalc curr mo,ytd timeliness perc

...etc etc

[Stephen-Hazel]

actually, that might be me. when I validate the cell with that editComplete function, I'm using .text on it instead of .html...

For now, assume it's me and sorry for buggin ya :)

[Stephen-Hazel]

ok, it turns out to be a bit tricky to handle these multiline cells what with the div that's usually there, sometimes not (readonly cells). But it seems to be workin for me.

When there are multiple lines, you get breaks in there, and spaces, greater than, and less than give you those ampersand thingies. nbspc lt, gt. I'm just gonna leave them as they are in the weirdo string and stuff em in the db that way. When I need to use the cell for a report or whatever, I'll turn the br and lt and nbsp junk into normal characters then.

Hopefully this change doesn't adversely affect others who don't need linebreaks, etc.

But things are werkin!

[Mottie]

You could use the validate function to replace the <, > etc (demo)*

editable_validate: function (txt, orig, columnIndex, $element) {
    txt = txt
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/\<div\>(.*)\<\/div\>/g, '<br>$1')
        .replace(/&nbsp;/g, ' ');
    return txt;
}

Note The demo is using the widget-editable file in the master branch.

Update: I had to make the replace function use regex for global replacing ;)

Update 2: So, instead of doing a global replace on <div> and </div>, the regex looks for the div wrapper, and replaces it with a <br>... it doesn't catch every instance, but it allows adding divs in the content editable... something like this:

123
456
<div class="ok">test</div>
<span class="focused">ok</span>
789

The span in that example will still be wrapped in a div, I guess because the (.*) in the regex doesn't capture the span as content. I'm not the best as regex, so I'm sure there is a better way.

[Stephen-Hazel]

got ya. I think I'm gonna just leave the html junk in, though. Thanks