9

我想使用粗体和斜体选项制作 contenteditable div，以便在具有相同选项的 keyup 上的另一个 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/

4

2 回答 2

6

您可以添加两个类，一个让我们说bold另一个，设置样式并通过单击按钮来激活/停用粗体/斜体（您可以运行下面的代码片段，或者您也可以在此处italic找到更新的 jsfiddle ）：

更新

在 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>

于 2016-12-09T09:23:54.847 回答
2

您必须使用CSS font-style并将font-weight您的转换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>

更新- 要制作选定的文本bold，或者italic您需要document.execCommand按照建议使用@Ionut，

当 HTML 文档切换到 designMode 时，文档对象会公开 execCommand 方法，该方法允许运行命令来操作可编辑区域的内容。

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

于 2016-12-09T09:20:53.143 回答