1

我正在尝试另一个 stackoverflow 帖子中的脚本。我有一个 textarea 元素，有人可以输入文本。通过双击它，它会转换为 div 并保持换行符。当您在 div 上 dblclick 以返回到 textarea 时，<br />s 将保持原样。

你可以在这里看到 jsfiddle http://jsfiddle.net/QUFZJ/

如何在没有 br 的情况下取回文本但保留换行符？

4

2 回答 2

1

你应该使用

boxText = $(this).html().replace(/<br\s?\/?>/g,"\n");

代替

$(this).val().replace(/<br\s?\/?>/g,"\n");

您需要为 boxText 分配新值，因为您像这样设置文本区域值

$(this).replaceWith( '<textarea form="HTML" class="BoxText">' + boxText + '</textarea>' );

jsFiddle 示例

于 2012-09-15T13:55:44.767 回答
1

contenteditable如果您愿意尝试，我认为您可能会在使用元素时获得更令人满意的时间。这是我设计的一个简短演示，向您展示它是如何工作的。

您可能会注意到在HTML部分中看不到任何内容。在$.ready()块中向下看，你会看到我实际上在两个不同的 s 之间切换，因为 (AFAICT)一旦它被添加到 DOM，div你就无法更改它。contenteditable所以我的解决方案是换掉我需要的东西。有人让我知道是否也有办法做到这一点，以防我忽略了什么。

请注意，这并不完整，虽然它（似乎）在大多数浏览器中都有效，但我知道 Opera 有一些问题，而且我并没有真正向它抛出那么多可变文本。它似乎在 Chrome 和 Firefox 中效果最好。当您与contenteditable.

这是一个开始。看看吧，看看你的想法。

HTML

<div class="boxtext" class="editable">Text Text Text...</div>

CSS

body, html {
    margin: 5px;
    padding: 15px 5px 5px 0;
}
.boxtext,
.boxtext .editable,
.boxtext .uneditable,
.boxtext pre.text {
    display: block;
    width: 500px;
    padding: 5px;
    margin: 0 auto;
}
.boxtext .uneditable {
    background: #ddd;
    border: 1px solid #ccc;
}
.boxtext .editable,
.boxtext .uneditable {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.boxtext .editable {
    border: 1px solid #5794BF;
    border-right-color: #C3D4E0;
    border-bottom-color: #C3D4E0;
}
.boxtext pre.text {
    white-space: pre-wrap;
    margin-top: -3px;
    background: #444;
    border: 1px solid black;
    color: white;
    font-family: monospace;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
h1, h2, h3, h4 {
    font-weight: bold;
}​

Javascript

(function ready($, win, doc, _c, _l, copies) {
    var $editable = $('<div class="editable" contentEditable="true">'),
        $uneditable = $('<div class="uneditable">'),
        $div = $('<div>'),
        $pre = $('<pre class="text">'),
        $doc = $(doc),
        $body,
        $boxes;

    $doc.ready(setup);

    function setup() {
        $body = $('body', doc);
        $boxes = $('.boxtext');

        $boxes.wrapInner($div.clone()).wrapInner($uneditable.clone());

        while (copies--) {
            $body.append($boxes.clone());
        }

        $boxes = $(".boxtext");

        $doc.on('click', $body, not);

        $boxes
            .on('dblclick.editable', '.editable, .uneditable', edit)
            .on('paste.editable', '.editable', paste);
    }

    function not(e) {
        !!$boxes.has(e.target).length || close.call(doc, e, true);
    }

    function close(e, call) {
        if (call) {
            $boxes.find('.editable').not(this).trigger('dblclick.editable');
        }
    }

    function edit(e) {
        var $this = $(this),
            $box = $boxes.has($this),
            $shim = $uneditable,
            type = '.uneditable';

        close.call(this, e, true);

        if ($this.is(type)) {
            $shim = $editable;
            type = '.editable';
        }

        $shim = $this.wrapInner($shim.clone()).find(type);

        $box.empty().append($shim);

        if (type == '.uneditable') {
            text.call($box[0]);
        }
    }

    function paste(e) {
        var $this = $(this),
            $target = $(e.target);

        (function a(th, ev) {
            function f(){clean.call(th, ev);}

            setTimeout(f, 1);
        })(this, e);
    }

    function clean(e) {
        var $this = $(this),
            $pres = [];

        $this.find('div > p').not(':empty').unwrap();
        $this.find(':empty').remove();
        $this.find('pre').each(function r(i, el) {
             $pres[i] = $(el).html();
        });
        $this.find('*')
            .not('h1, h2, h3, h4, p, div, br, pre, code')
            .children().unwrap();
        $this.html($.trim($this.html().replace(/(\r\n|\n|\r)/gm, ' ')));
        $this.html($.trim($this.html().replace(/>[ ]{1,}</gm, '><')));
        $this.find('pre').each(function r(i, el) {
              $(el).html($pres[i]);
        });
        $this.find('h1, h2, h3, h4, div, p, pre').after('<br/>');
        $this.find('br:last').remove();
    }

    function text(e) {
        var $this = $(this),
            $uneditable = $this.find('.uneditable').clone(),
            $text = $pre.clone();

        $uneditable.find('div > br').unwrap();
        $uneditable.find('div, p, br').after('\n');

        $text.text('Plaintext\n---------\n' + $uneditable.text());

        $this.append($text);
    }

    function log() {
        !_c || !_l.apply || _l.apply(_c, arguments);
    }

})(jQuery, window, document, console, console.log, 5);

​http://jsfiddle.net/userdude/76agk/

于 2012-09-15T22:42:59.437 回答