Question

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

您可以在此处查看jsfiddle http://jsfiddle.net/QUFZJ/

如何在不使用br的情况下取回文本但保留换行符？

Answer 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 example

Answer 2

如果您愿意进行实验，我认为使用contenteditable元素可能会更令人满意。这是一个简短的演示，我努力向您展示它是如何工作的。

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

注意，这是不完整的，虽然它在大多数浏览器中都可以工作（貌似），但我知道Opera有一些问题，而且我并没有真正抛出那么多变量文本。它似乎在Chrome和Firefox中效果最好。当你与<div class="boxtext" class="editable">Text Text Text...</div>进行交互时，肯定会有一些混合尝试解释粘贴的标记并平滑每个主要浏览器解释的不同方式。

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

<强> HTML

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;
}

<强> CSS

(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);

<强>的Javascript

{{1}}

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

当textarea从div转换返回时返回“/ n”个字符

2 个答案: