市面上大多数免费的富文本编辑器,都不支持手机端。我找到了一款免费的自适应手机端的富文本编辑器,就是HandyEditor编辑器。
使用起来也很简单,只要引入一个js就可以使用。
首先下载HandyEditor的源码
然后把HandyEditor.min.js引入到项目中
使用案例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HandyEditor编辑器</title>
</head>
<body>
<textarea name="editor" id="editor" cols="30" rows="10"></textarea>
<button id="btn">提交</button>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="./HandyEditor.min.js"></script>
<script>
var he = HE.getEditor('editor');//其中的editor是文本输入框(textarea)的id
$('#btn').click(function(){
console.log(he.getHtml());//获取html代码
console.log(he.getText());//获取纯文本
he.sync();//将编辑器里面的内容同步到文本输入框(textarea)
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HandyEditor编辑器</title>
</head>
<body>
<textarea name="editor" id="editor" cols="30" rows="10"></textarea>
<button id="btn">提交</button>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="./HandyEditor.min.js"></script>
<script>
var he = HE.getEditor('editor');//其中的editor是文本输入框(textarea)的id
$('#btn').click(function(){
console.log(he.getHtml());//获取html代码
console.log(he.getText());//获取纯文本
he.sync();//将编辑器里面的内容同步到文本输入框(textarea)
});
</script>
</body>
</html>