Contenteditable div with bold option

Question

I want to make contenteditable div with bold and italic options to display content in another div on keyup with the same options. I managed to display text, but not options. Please help

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

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

Geriatrics

17anchi, please see my answer below. I hope that is what you need. – Melanochroi

Answer 1

You can add two classes, one let's say bold and the other italic, style them and toogle them on click of the buttons to activate/deactivate the bold/italic (You can run the code snippet below or you can also find the updated jsfiddle here):

UPDATE

After the OP's comment, as he wanted to add the bold and italic only to selected text, I've updated my answer a little bit.

The updated jsfiddle.

And the updated code:

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

Melanochroi

Is there a way to apply options on selected text only? tnx – Geriatrics

Yes there is. See my updated answer. You can use document.execCommand('bold'); for example. – Melanochroi

It works! That is exactly what i need. Thank you so much! – Geriatrics

Awesome. I'm glad it helped you. – Melanochroi

This only works on a button. What if i am not using a button like this: <span id='bold_btn'> B </span> – Dipietro

document.execCommand is deprecated. any alternative? – Dufresne

Answer 2

You have to use CSS font-style and font-weight to convert your output text to bold and italic as below,

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

Update - To make selected text bold or italic you need to make use of document.execCommand as suggested by @Ionut,

When an HTML document has been switched to designMode, the document object exposes the execCommand method which allows one to run commands to manipulate the contents of the editable region.

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

$(".itl").on('click',function(){
	document.execCommand('italic');
  var a = $("#textarea").html();
	$('#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>

Gusto

Is there a way to apply options on selected text only? tnx – Geriatrics

@Geriatrics You mean to add bold and italic right, so that's working fine over-here on clicking b or i button which is option to user. Or are you asking something else. – Gusto

Ionut found the solution. Thank you for your help :) – Geriatrics

@Geriatrics Welcome :-) – Gusto