本文使用的是:summernote编辑器
官网地址:https://summernote
文档地址:https://summernote/deep-dive/#initialization-options
github:https://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>
更多推荐
H5 移动端富文本编辑器
发布评论