How to make selected text bold/italic/underlined in javascript?

后端未结

关注

 3  1743

I\'m trying to work on a webpage that allows users to write their own notes for a school project, and my idea was to let them bold/italicize/underline their text using butto

相关标签:

3条回答

傲寒

2020-12-31 19:22

With textarea you cannot achieve that, use divs instead, so you can do something like this:

$(document).ready(function(){
$('.boldText').click(function(){
   $('.container').toggleClass("bold");
});
$('.italicText').click(function(){
  $('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
  $('.container').toggleClass("underline");
});



});

div.container {
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
    padding: 5px;
}
.bold{
  font-weight:bold;
}
.italic{
  font-style :italic;
}
.underline{
 text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" contentEditable></div><br/>
<input type="button" class="boldText" value="Bold">
<input type="button" class="italicText" value="Italic">
<input type="button" class="underlineText" value="Underline">

0 讨论(0)

天涯浪人

2020-12-31 19:37

You can use execCommand(). This API was meant for developing text editors. The 3 buttons utilize the very versatile execCommand() and the writing element is a plain div enabled with the attribute contenteditable.

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    body {
      font: 400 16px/1.4 'serif';
      }
    #editor1 {
      border: 3px inset grey;
      height: 100px;
      width: 381px;
      margin: 10px auto 0;
     }
    fieldset {
      margin: 2px auto 15px;
      width: 358px;
    }
    button {
      width: 5ex;
      text-align: center;
      padding: 1px 3px;
    }
  </style>
</head>

<body>

  <div id="editor1" contenteditable="true">
     The quick brown fox jumped over the lazy dog.
  </div>
  <fieldset>
    <button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
    </button>
    <button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
    </button>
    <button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
    </button>
  </fieldset>

0 讨论(0)

小蘑菇

2020-12-31 19:47

Textarea does not allow such things. I would suggest you to use something like ckeditor. It will do the job for you neatly. But if you still want to do it yourself, you need to use a div with contenteditable tag.

Good Luck !

0 讨论(0)
发布评论:

提交评论
- 加载中...