Question

我正在通过使用内容可编辑div创建带有文本字段的表单。想法是在我按下粗体按钮并第二次单击该按钮时添加粗体标签，它应保留粗体标签，并且文本应正常。

这是我的代码，

      $('.btn-bold').click(function(){
            $('.btn-bold').css({'background-color':'white'});
            $('.container-main').append('<b>Text</b>');
      });

.container{
            width: 400px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            border: 1px solid #dddddd;
            box-shadow: 0 0 2px 2px #00000010;
            border-radius: 5px;
      }
      
      .container-top{
            float: left;
            width: 100%;
            height: auto;
      }
      
      .container-main{
            float: left;
            width: 96%;
            height: 100px;
            background-color: aliceblue;
            font-family: sans-serif;
            font-size: 15px;
            outline: none;
            padding: 10px 2% 10px 2%;
      }
      
      .btn{
            float: left;
            width: auto;
            height: 40px;
            border: none;
            outline: none;
            margin: 2px;
            padding: 10px;
            background-color: antiquewhite;
            font-size: 20px;
      }

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title> Demo
    </title>
</head>

<div class="container">
      <div class="container-top">
            <button class="btn btn-bold material-icons"> format_bold </button>
      </div>
      
      <div class="container-main" contenteditable="true"></div>
</div>

为了正确实现此目的，我应该在脚本中进行哪些更改？

注意-如果以前在堆栈溢出中有此问题，请告诉我。我添加了此内容是因为找不到正确的答案。

Answer 1

我对其进行了更改，因此白色是一个css类，可以对其进行切换，具体取决于是否启用了该类

$('.btn-bold').click(function(){
  $(this).toggleClass('white');
  if($(this).hasClass('white')){
    $('.container-main').append('<b>Test</b>');
  }else{
    $('.container-main').append('Test');
  }
});

.container{
            width: 400px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            border: 1px solid #dddddd;
            box-shadow: 0 0 2px 2px #00000010;
            border-radius: 5px;
      }
      
      .container-top{
            float: left;
            width: 100%;
            height: auto;
      }
      
      .container-main{
            float: left;
            width: 96%;
            height: 100px;
            background-color: aliceblue;
            font-family: sans-serif;
            font-size: 15px;
            outline: none;
            padding: 10px 2% 10px 2%;
      }
      
      .btn{
            float: left;
            width: auto;
            height: 40px;
            border: none;
            outline: none;
            margin: 2px;
            padding: 10px;
            background-color: antiquewhite;
            font-size: 20px;
      }
      .white {
        background-color: white;
      }

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title> Demo
    </title>
</head>

<div class="container">
      <div class="container-top">
            <button class="btn btn-bold material-icons"> format_bold </button>
      </div>
      
      <div class="container-main" contenteditable="true"></div>
</div>

Answer 2

      $('.btn-bold').click(function () {
        $('.btn-bold').css({'background-color': 'white'});
        if (!$('.container-main').hasClass('bold')) {
            $('.container-main').addClass('bold');
        } else {
            $('.container-main').removeClass('bold');
        }
    });

.bold {
           font-weight: bold;
 }
.container{
            width: 400px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            border: 1px solid #dddddd;
            box-shadow: 0 0 2px 2px #00000010;
            border-radius: 5px;
      }
      
      .container-top{
            float: left;
            width: 100%;
            height: auto;
      }
      
      .container-main{
            float: left;
            width: 96%;
            height: 100px;
            background-color: aliceblue;
            font-family: sans-serif;
            font-size: 15px;
            outline: none;
            padding: 10px 2% 10px 2%;
      }
      
      .btn{
            float: left;
            width: auto;
            height: 40px;
            border: none;
            outline: none;
            margin: 2px;
            padding: 10px;
            background-color: antiquewhite;
            font-size: 20px;
      }

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title> Demo
    </title>
</head>

<div class="container">
      <div class="container-top">
            <button class="btn btn-bold material-icons"> format_bold </button>
      </div>
      
      <div class="container-main" contenteditable="true"></div>
</div>

第二次单击转义<b>标记

2 个答案: