储存quill与php,Quill自定义上传图片

Quill-Demo

body {

padding: 10px 30px;

}

#editor {

min-height: 180px;

}

Quill自定义上传图片

/* 编辑器操作条选项 */

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);

};