のcontentEditableのdiv

Question

私は同じオプションを持つからkeyup上の別のdivのコンテンツを表示するには、大胆とイタリックオプションでのcontentEditableのdivを作りたいです。 テキストは表示できましたが、オプションは表示できませんでした。助けてください

HTML：

<button onclick="document.execCommand('bold');">B</button> 
<button onclick="document.execCommand('italic');">I</button> 
<div id="textarea" contenteditable></div> 
<div id="textarea-show"></div> 

jqueryの：

$('#textarea').keyup(function() { 
    $('#textarea-show').html($(this).text()); 
}); 

CSS：

#textarea { background-color: #fff; 
    border: 1px solid #ccc; 
    color: #555; 
    font-size: 14px; 
    height: 34px; 
    width: 450px; 
} 

    #textarea-show{font-size: 2rem; 
    color:#666; 
    height:50px; 
    border: 1px solid #ccc; 
    width: 450px; 
} 

例：あなたはを使用する必要がhttps://jsfiddle.net/gqmLtct7/1/

Answer 1

あなたは、スタイル、一つのはboldや他のitalicを言わせて、それらを2つのクラスを追加し、太字/イタリックを有効/無効にするためのボタンのクリックでそれらをtoogleすることができます（あなた以下のコードを実行することもできますし、また、更新jsfiddle here）を見つけることができます。

UPDATEを

OPのコメントの後、太字と斜体を選択したテキストにのみ追加したいので、私はちょっと答えを更新しました。

更新されたjsfiddleです。

そして、更新されたコード：

$('#textarea').keyup(function() { 
 
    $('#textarea-show').html($(this).text()); 
 
}); 
 

 
$('#bold_btn').on('click', function() { 
 
    //$('#textarea, #textarea-show').toggleClass('bold'); 
 
    document.execCommand('bold'); 
 
    var text = document.getElementById('textarea').innerHTML; 
 
    $('#textarea-show').html(text); 
 
}); 
 
$('#italic_btn').on('click', function() { 
 
    //$('#textarea, #textarea-show').toggleClass('italic'); 
 
    document.execCommand('italic'); 
 
    var text = document.getElementById('textarea').innerHTML; 
 
    $('#textarea-show').html(text); 
 
});

#textarea { 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    color: #555; 
 
    font-size: 14px; 
 
    height: 34px; 
 
    width: 450px; 
 
} 
 
#textarea-show { 
 
    font-size: 2rem; 
 
    color: #666; 
 
    height: 50px; 
 
    border: 1px solid #ccc; 
 
    width: 450px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='bold_btn'>B</button> 
 
<button id='italic_btn'>I</button> 
 
<div id="textarea" contenteditable></div> 
 
<div id="textarea-show"></div>

Answer 2

あなたはdocument.execCommandの使用を確認する必要があり、選択したテキストboldかをitalic作るために - 更新あなたoutput textに大胆し、以下のようにイタリック、

$('#textarea').keyup(function() { 
 
    $('#textarea-show').html($(this).text()); 
 
}); 
 
$(".bld").on('click',function(){ 
 
var a = $('#textarea-show').html($("#textarea").text()); 
 
$(a).css('font-weight','bold'); 
 
    $(a).css('font-style','normal'); 
 
}); 
 

 
$(".itl").on('click',function(){ 
 
var a = $('#textarea-show').html($("#textarea").text()); 
 
$(a).css('font-style','italic'); 
 
$(a).css('font-weight','normal'); 
 
});

#textarea { background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    color: #555; 
 
    font-size: 14px; 
 
    height: 34px; 
 
    width: 450px;} 
 
    
 
#textarea-show{font-size: 2rem; 
 
    color:#666; 
 
    height:50px; 
 
    border: 1px solid #ccc; 
 
    width: 450px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="bld">B</button> 
 
<button class="itl">I</button> 
 
<div id="textarea" contenteditable></div> 
 
<div id="textarea-show"></div>

を変換する10 font-styleとfont-weight@Ionutのように、

HTMLドキュメントがdesignModeに切り替えられたとき、ドキュメント オブジェクトは、コマンド を実行して編集可能領域の内容を操作できるexecCommandメソッドを公開します。

$('#textarea').keyup(function() { 
 
    $('#textarea-show').html($(this).text()); 
 
}); 
 
$(".bld").on('click',function(){ 
 
\t document.execCommand('bold'); 
 
    var a = $("#textarea").html(); 
 
\t $('#textarea-show').html(a); 
 
}); 
 

 
$(".itl").on('click',function(){ 
 
\t document.execCommand('italic'); 
 
    var a = $("#textarea").html(); 
 
\t $('#textarea-show').html(a); 
 
});

#textarea { background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    color: #555; 
 
    font-size: 14px; 
 
    height: 34px; 
 
    width: 450px;} 
 
    
 
#textarea-show{font-size: 2rem; 
 
    color:#666; 
 
    height:50px; 
 
    border: 1px solid #ccc; 
 
    width: 450px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="bld">B</button> 
 
<button class="itl">I</button> 
 
<div id="textarea" contenteditable></div> 
 
<div id="textarea-show"></div>