1, with the HTML DOM contentEditable property
(Description element can be edited) to make the content editable div
2, execCommand document the method
which allows commands to manipulate the operating element can edit the content area. When contentEditable, call execCommand () will affect the current activities of editable elements. How to Use You can view documentation corresponding execCommandMDN
The following is the complete code Rich Text Editor:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>富文本编辑器G</title>
<link href="/static/assets/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body{
padding: 100px 200px;
}
#editor {
height:500px;
margin: 30px;
}
</style>
</head>
<body>
<div id="editparent">
<!-- 编辑器控制按钮 -->
<div id='editControls' style='text-align:center; padding:5px;'>
<div class='btn-group'>
<a class='btn' data-role='bold' href='#'><b>Bold</b></a>
<a class='btn' data-role='italic' href='#'><em>Italic</em></a>
<a class='btn' data-role='underline' href='#'><u><b>U</b></u></a>
<a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a>
</div>
</div>
<!-- 编辑器可输入内容处 -->
<div id='editor' class='form-control' contenteditable>
<h3>在这里输入内容</h3>
</div>
</div>
<script src="/static/assets/vendors/jquery/jquery.js"></script>
<script>
$(function() {
$('#editControls a').click(function(e) {
document.execCommand($(this).data('role'), false, null);
})
});
</script>
</body>
</html>
Interface displays in a browser:
