富⽂本编辑器...quill的使⽤放...
移动端 quill 时候⽤的是 div ⽽不是
引⼊ dom
<link href="//cdn.quilljs/1.3.6/quill.snow.css" rel="stylesheet">
<script src="//cdn.quilljs/1.3.6/quill.min.js"></script>
js..注意要重写图⽚预览⽅法!!..如果不重写的话，会使⽤默认的base64 来处理..那样会造成⽂本太长!!! //初始化富⽂本..
var quill = new Quill('#introduce', {
theme: 'snow',
modules: {
toolbar: [
[{header: [1, 2, 3, false]}],
['bold', 'italic', 'underline'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'align': []}],
[{'font': []}],
[{'color': []}, {'background': []}],
['image', 'video']
]
}
});
//重写编辑器的图⽚预览⽅法
var toolbar = Module('toolbar');
toolbar.addHandler('image', function () {
var fileInput = ainer.querySelector('input.ql-image[type=file]');
if (fileInput == null) {
fileInput = ateElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
fileInput.classList.add('ql-image');
fileInput.addEventListener('change', function () {
if (fileInput.files != null && fileInput.files[0] != null) {
var formData = new FormData();
formData.append('file', fileInput.files[0]);
$.ajax({
url: '/home/upload/uploadFormImg',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function (res) {
//你的图⽚上传成功后的返回值...所以格式由你来定!
console.log(res);
var range = Selection(true);
quill.insertEmbed(range.index, 'image', res.data[0]);
quill.setSelection(range.index + 1);
}).fail(function (res) {
优秀的富文本编辑器});
}
});
}
fileInput.click();
});
<('text-change', function (delta, oldDelta, source) {
/
/监听⽂本变化..将值赋给 vue 的shop 对象...
/*  if (source == 'api') {
console.log("An API call triggered this change.");
} else if (source == 'user') {
}*/
t.shop.introduce = ainer.firstChild.innerHTML;
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。