zx-editor
Version:
ZxEditor is a HTML5 rich text editor
57 lines (52 loc) • 1.6 kB
HTML
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<title>自定义图片文件上传</title>
<link href="../dist/css/zx-editor.css" rel="stylesheet">
</head>
<body>
<div id="editorContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<!--exif获取照片参数插件-->
<script src="./libs/exif.min.js"></script>
<!--debug-->
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script src="../dist/js/zx-editor.js"></script>
<script>
// 实例化 ZxEditor
var zxEditor = new ZxEditor('#editorContainer', {
editable: true,
// placeholder: '自定义placeholder',
// lineHeight: 1,
// padding: '0 0 30px',
// placeholderColor: 'red',
cursorColor: 'red',
// 禁用图片自动处理
customPictureHandler: true
})
console.log(zxEditor)
zxEditor.on('selectPictureInputChange', function (file, ze, e) {
//console.log(file, ze, e)
uploadFile(file).then(function (url) {
var img = new Image()
img.src = url
zxEditor.insertElm(img)
})
})
function uploadFile(file) {
return new Promise(function (resolve, reject) {
// 模拟图片上传
console.log(file)
setTimeout(function () {
// 上传成功后的url地址
var url = '//tuchong.pstatp.com/1000000/f/616286279.jpg'
resolve(url)
}, 300)
})
}
</script>
</body>
</html>