HTML DOMのcontentEditableプロパティを使用して1、
コンテンツ編集可能なdivのを作るために（Description要素を編集することができます）
2、execCommand文書は方法
コマンドが操作要素を操作することを可能にするコンテンツ領域を編集することができます。contentEditableは、execCommand（）を呼び出すときに編集可能な要素の現在の活動に影響を与えます。あなたが見ることができます使用方法execCommandMDN対応するマニュアルを参照して
以下は、完全なコードリッチテキストエディタです。
<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>
ブラウザに表示されインタフェース：
