H5 移动端富文本编辑器

本文使用的是：summernote编辑器

官网地址：

文档地址：/deep-dive/#initialization-options

github:/summernote/summernote/(找大神的链接)

以下为使用步骤

1.引入所需要的文件

<link href="./public/css/bootstrap.css" rel="stylesheet"><link href="./public/css/summernote.css" rel="stylesheet"><script src="./public/js/jquery.js"></script> <script src="./public/js/bootstrap.js"></script> <script src="./public/js/summernote.js"></script><script src="./public/js/summernote-zh-CN.js"></script>//汉化文件

2.html代码

<div id="summernote"><!-- <p>Hello Summernote</p> --></div>

3.js代码

<script type="text/javascript">$(document).ready(function() {$('#summernote').summernote({lang: 'zh-CN',//语言placeholder : '请输入内容', // 提示 height:250,//高度width:'auto',//宽度toolbar: [//工具栏配置['style', ['bold', 'italic', 'underline']],//加粗、斜体、下划线['fontsize', ['fontsize']],//字体大小['fontname', ['fontname']],//字体['insert', ['link', 'picture']],//链接、图片['para', ['paragraph']],//文本水平位置['codeview',['codeview']],//查看html代码['undo',['undo']], //撤销['redo',['redo']], //取消撤销],callbacks : { // 回调函数// 上传图片时使用的回调函数 因为我们input选择的本地图片是二进制图片，需要把二进制图片上传服务器，服务器再返回图片url，就需要用到callback这个回调函数onImageUpload : function(files) { var form=new FormData();form.append('myFileName',files[0]) //myFileName 是上传的参数名，一定不能写错$.ajax({type:"post",url:"接口地址", //上传服务器地址dataType:'json',data:form,processData : false,contentType : false,cache : false,success:function(data){console.log(data);$('#summernote').summernote('editor.insertImage',图片路径]); }})}}});});</script>