我想使用粗体和斜体选项制作内容可编辑的div,以使用相同的选项在键盘上显示另一个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;
}
最佳答案
您可以添加两个类,一个是粗体
,另一个是斜体
,设置它们的样式并在单击按钮时切换它们以激活/停用粗体/斜体(您可以运行下面的代码片段,也可以找到更新后的 jsfiddle here ):
更新
在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>
关于jquery - 带有粗体选项的 Contenteditable div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41056605/