H5 移动端富文本编辑器

本文使用的是：summernote编辑器
官网地址：https://summernote.org
文档地址：https://summernote.org/deep-dive/#initialization-options
github:https://github.com/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>