div contenteditable avec option audacieuse

Question

Je veux faire contenteditable div avec gras et italiques options pour afficher le contenu dans un autre div sur keyup avec les mêmes options. J'ai réussi à afficher du texte, mais pas d'options. S'il vous plaît aider

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

exemple: https://jsfiddle.net/gqmLtct7/1/

Answer 1

Vous pouvez ajouter deux classes, on disons bold et l'autre italic, leur style et les toogle sur clic des boutons pour activer/désactiver le gras/italique (Vous peut exécuter l'extrait de code ci-dessous ou vous pouvez également trouver la mise à jour jsFiddle here):

MISE à jOUR

Après le commentaire de l'OP, comme il voulait ajouter le gras et l'italique seulement au texte sélectionné, j'ai mis à jour ma réponse un peu.

La mise à jour jsfiddle.

Et le code mis à jour:

$('#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

Vous devez utiliser CSSfont-style et font-weight pour convertir votre output text à gras et italic comme ci-dessous,

$('#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>

Mise à jour - Pour rendre le texte sélectionné bold ou italic vous devez utiliser document.execCommand comme suggéré par @Ionut,

Lorsqu'un document HTML a été basculé en mode conception, l'objet document expose la méthode execCommand qui permet d'exécuter les commandes pour manipuler le contenu de la région modifiable.

$('#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>