1, con el DOM HTML contentEditable propiedad
(Descripción del elemento se puede editar) para hacer el div contenido editable
2, execCommand documentar el método
que permite a los comandos para manipular el elemento de mando puede editar el área de contenido. Cuando contentEditable, llame execCommand () afectará a las actividades actuales de los elementos editables. Cómo utilizar Puede consultar la documentación correspondiente execCommandMDN
El siguiente es el código de editor de texto enriquecido completo:
<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>
Interfaz muestra en un navegador:
