<!DOCTYPE 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="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="exif.min.js"></script> <!--debug--> <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> <script src="zx-editor.js"></script> <script src='../../public/js/jquery.min.js'></script> <style> .zx-editor .zx-editor-toolbar-wrapper.border-top.in { top:0; } </style> <script> // 实例化 ZxEditor var zxEditor = new ZxEditor('#editorContainer', { editable: true, bottom:0, toolbarBeenFixed:true, isSeesionStorage:'seesionStorage', toolbarHeight:100, autoSave:1000, cursorColor: 'red', customPictureHandler:false, //自定义图片处理，即不使用默认插入图片逻辑。 imageMaxWidth:300, //正文中插入图片的最大宽度 mainColor:'#f00', // imageSectionTemp:'true' }) // zxEditor.storage.set('content', {content: '内容',title: '标题'}) // 实例化 VConsole // new VConsole() // console.log(debug) console.log('实例化 ZxEditor', zxEditor); zxEditor.on('change', function () { console.log('change input') }) zxEditor.on('paste', function (e) { console.log('paste', e) }) zxEditor.on('keydown', function () { // console.log('keydown') }) zxEditor.on('keyup', function () { // console.log('keyup') }) zxEditor.on('selectPictureInputChange', function (file, ze, e) { console.log(file) }) zxEditor.on('error', function (e, methodName) { console.log(methodName) console.error(e) }) zxEditor.on('windowResize', function () { console.error('windowResize', window.innerHeight) }) zxEditor.on('add-link', next => { // hybrid模式开发时，此处可以调用原生App提供的接口，访问剪贴板是否有url地址数据 // 获取到url地址、及其文档title // 将链接添加至编辑器中 next(url, title) }) const customPanel = new zxEditor.ExpansionPanel({ body: '这是一个文本' }, zxEditor) zxEditor.dialog.alert('这是alert提示框', function () { // do something ... }) </script> </body> </html>