xeditable で改行が有効にならないときの解決法

2014年11月25日更新 view: 8 view
http://vitalets.github.io/x-editable/assets/img/bootstrap.png

xeditableの使い方

xeditableとは、俗にいうinplaceeditorの事。
http://vitalets.github.io/x-editable/

スポンサードリンク

改行がテキストエリアで有効にならない?

なぜか改行付きのコードを編集しようとすると全ての改行が消えてしまう。
ではどうすればよい?

解決法

//            指定要素を編集していく
            $('dd').editable({
                type: 'textarea',
                escape: false,
                success: function(response, newValue) {
//                    修正をokにしたら 改行コードを br に置き換える
                    v = newValue.replace(/\n/mg,"<br>");
                    return {newValue: v};
                },

                tpl : '<textarea style="width:700px !important;"></textarea>' // 幅を親要素に合わせます
            });

//            表示した時に改行コードを変更
            $('dd').on('shown', function(e, editable) {

//                改行 <br> を有効にしてから読み込む
                val = e.target.innerHTML.replace(/<br\s*\/?>/mg,"\n");
//                半角スペースのゴミ削除
                v = val.replace(/ /mg,"");
                editable.input.$input.val(v);
            });

//            修正エリアを閉じた時に実行。
            $('dd').on('hidden', function(e, reason) {
                $(".clone").remove();
            });

考え方

・表示した時に br を \n にする。
・修正成功後、 \n をbr にする。
・おまけとして、修正エリアを修正、キャンセル問わず閉じた時に実行する hidden メソッドもご紹介と。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

10月17日 ( 木 ) にアクセスが多かった記事はこちら!