MS Wordの列のように書くことができるようにテキストエリアをカスタマイズする方法

Question

私はユーザーが2つ以上の列として書くことができるページを作成しようとしています。

いくつかの列を持つ編集可能な新聞記事のようになりたい。最初の列が14行すべてで満たされたら、余分な単語を自動的に他の列に移動したい。

私はそれがあまりにもペーストで作業する必要があるので、私はラインの数は、私は行数

ために、このコードを使用していますちなみに14

を超えたときに、私はちょうど最後の単語を転送することはできませんだと思います

$(window).on("change paste keyup",function(){ 
    var taLineHeight = 30; // This should match the line-height in the  CSS 
    var taHeight = article_content.scrollHeight; // Get the scroll height of the textarea 
    article_content.style.height = taHeight; // This line is optional, I included it so you can more easily count the lines in an expanded textarea 
    var numberOfLines = Math.floor(taHeight/taLineHeight); 
    if (numberOfLines > 14){ 
    //Do something 
    } 
}); 

私はこの時点で立ち往生していますか？進歩する方法がわからない、または私が正しい道を歩いている場合は？

Answer 1

あなたはCSS3や編集可能なDIVを使用することができます。

#col { 
 
-moz-column-count: 2; 
 
-webkit-column-count: 2; 
 
column-count: 2; 
 
}

<div id="col" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

フィドル： "14本のライン" についてhttps://jsfiddle.net/qy7jxd36/

- あなたはDIVの高さで再生する必要があります、このフィドルを参照してください：https://jsfiddle.net/qy7jxd36/1/

Answer 2

1つを分割することはできませんtextareaを2つの列に変換します。したがって、divまたはspanを2つ並べてtextareaと組み合わせて使用​​してください。 ckeditorのようなRich Text Editorを使用してください。これは、多くの機能を備えたMSワードとまったく同じです。