Quill自定义上传图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Quill-Demo</title>
<link href="https://cdn.bootcss.com/quill/1.3.6/quill.snow.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/quill/1.3.6/quill.bubble.css" rel="stylesheet">
<style>
body {
padding: 10px 30px;
}
#editor {
min-height: 180px;
}
</style>
</head>
<body>
<form method="POST" action="test.php">
<div>
<!--当toolbar以container的形式注册时需要显式地写出这些标签-->
<div id="editor_header" style="display: none;">
<!--字体大小-->
<select class="ql-size">
<option value="small"></option>
<!-- 默认按钮 -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<!--加粗按钮-->
<button class="ql-bold"></button>
<!--上标、下标按钮-->
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<!--自定义按钮-->
<button id="my_button"></button>
</div>
<div id="editor" class="showContent">
<!--回显的内容，库中查出来的放这-->
<!--可以直接在指定元素内加入文本或者html标签-->
Quill自定义上传图片
</div>
<input type="hidden" id="richText" name="richText" style="display: none;" value="" /> <!--用于form表单提交-->
</div>
<form enctype="multipart/form-data" id="imgFrom">
<!-- this.files[0] 图片列表的第0项，也就是当前选择的图片 -->
<input name="imgData" type="file" οnchange="updateImg(this.files[0])" id="imgData" style="display: none;">
</form>
<br />
<input type="submit" value="提交" id="su" οnclick="submitData()" /> <!--id用于form表单时，将富文本编辑器的值，赋给隐藏域-->
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/quill/1.3.6/quill.js"></script>
<script>
/* 编辑器操作条选项 */
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], //开关按钮
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], //自定义按钮值
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // 上标/下标
[{'indent': '-1'}, {'indent': '+1'}], // 减少缩进/缩进
[{'direction': 'rtl'}], // 文本方向
[{'size': ['small', false, 'large', 'huge']}], // 自定义下拉
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], //使用主题的默认下拉
[{'font': []}],
[{'align': []}],
['clean'], //移除格式化
['image'],
['video'],
['formula'] //需要加载cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
];
/* 实例化编辑器 */
var quill = new Quill('#editor', {
/*debug: 'info',*/
modules: {
//formula: true, //公式；需要加载cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
//syntax: true, //高亮；需要加载cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
/*toolbar: {
container:"#editor_header"
}*/ // 或者 toolbar :'#editor_header'
toolbar:toolbarOptions //指定编辑器操作条
},
theme: 'snow', //主题，有两种，snow和bubble
placeholder:'请输入',
readOnly: false
});
$('input[name="imgData"]').change(function(){
const range = quill.getSelection();
if (range) {
quill.insertEmbed(range.index, 'image',""+'http://m.dzrjia.cn/public/uploads/images/00358.jpg'); //将上传好的图片，插入到富文本的range.index（当前光标处）
}
})
//修改样式
var Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);
/* 传入布尔值，控制编辑器是否可用 */
quill.enable();
//quill.blur(); //失去焦点
//quill.focus(); //获得焦点
/* 事件的绑定；注意：text-change这个获取值放这的话是编辑器内容发生改变的时候才能获取到值,如果想每次提交都有值，要放到提交那 */
quill.on('text-change', function(delta, oldDelta, source) {
// console.log(delta); //当前输入的
// console.log(oldDelta); //上一次输入的
// console.log(source);
//res = quill.container.firstChild.innerHTML; //获取当前富文本编辑器实例的内容（带html标签）
//console.log(res);
});
/* 自定义按钮 */
var myBtn = document.querySelector("#my_button");
myBtn.addEventListener("click",function(){
//console.log('my-btn')
});
//【自定义上传图片1】通过addHander来监听image事件
let toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', () => {
document.getElementById('imgData').click();
});
//【自定义上传图片2】发送ajax处理好图片
function updateImg(file){
alert()
var formData = new FormData();
formData.append('avatar', file); //追加的自定义节点，第一个参数：php用$_FILES接收时的key；第2个参数：当前图片
console.log(formData.get("avatar")); //打印当前图片的信息
$.ajax({ //发送ajax
url:'index.php', //url
type:'post', //以post发送
data:formData, //要发送的数据。后端接收$_POST['user']
dataType:'json', //返回的数据类型
cache:false,
traditional: true,
contentType: false,
processData: false,
success:function(res){
console.log(res);
//图片上传成功之后的回调
const range = quill.getSelection();
if (range) {
quill.insertEmbed(range.index, 'image',""+res); //将上传好的图片，插入到富文本的range.index（当前光标处）
}
}
});
};
//form表单的提交
function submitData(){
res = quill.container.firstChild.innerHTML; //获取当前富文本编辑器实例的内容（带html标签）
console.log(res); //获取当前富文本编辑器实例的内容（带html标签）
$("#richText").val(res);
};
</script>
</body>
</html>