javascript - textareaがdiv変換から戻ったときに「/n」文字を返します

Question

私は別のstackoverflow投稿からのスクリプトを試しています。誰かがテキストを入力できるtextarea要素があります。それをダブルクリックすると、divに変換され、改行が保持されます。divをdblclickしてtextareaに戻ると、<br />sはそのままになります。

ここでjsfiddleを見ることができますhttp://jsfiddle.net/QUFZJ/

brを付けずに、改行を付けたままテキストを元に戻すにはどうすればよいですか？

score 1 · Accepted Answer

実験する気があるなら、おそらくcontenteditable要素を扱うのにもっと満足のいく時間を過ごすことができると思います。これは、それがどのように機能するかを示すために私が作成した短いデモです。

HTMLセクションに表示されていないことに気付くでしょう。ブロックを見下ろすと、$.ready()実際に2つの異なるを切り替えることがわかります。（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/

score 1 · Accepted Answer

あなたは使用する必要があります

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の例

javascript - textareaがdiv変換から戻ったときに「/n」文字を返します

2 に答える 2

Related

Reference