<!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>

zxEditor的更多相关文章

  1. zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

    ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...

随机推荐

  1. The Softmax function and its derivative

    https://eli.thegreenplace.net/2016/the-softmax-function-and-its-derivative/  Eli Bendersky's website ...

  2. tk（三）按钮的事件绑定

    (三)按钮的事件绑定 ==1.普通的Button绑定事件== (1)说明: Button 使用 command=功能函数 来绑定 Button(win, text="确定", co ...

  3. 项目部署到tomcat，验证部署成功

    1.假设你已经知道打war包放上去了tomcat 下的webapps下 2. bin->启动startup.bat 3.浏览器中启动 http://ip:port    这个port是tomca ...

  4. 删除Eclipse中的SVN账号信息-SVN切换用户

    在eclipse中经常用到用svn进行代码版本控制,为了提交或更新代码的时候不反复地提示我们输入用户名和密码,于是我们就习惯把访问SVN的用户名密码自动保存起来. 以便下次自动使用,不要再次手工多次输 ...

  5. ECMAScript基本语法——⑤运算符 一元运算符

    ++自增 在前先自增,再运算 在后先运算,再自增 --自减 在前先自减,再运算 在后先运算,再自减 +正号,-负号.表示数字的正负 注意:在JavaScript中,如果运算数不是运算符要求的类型, 那 ...

  6. HandlerMethod解析

    api写HandlerMethod的作用: Encapsulates information about a handler method consisting of a method and a b ...

  7. 简单的Spring1.0小配置

    开始Spring AOP的小理解 拿一个小例子来说吧!    老师上课   这样的例子!    老师上课--就是一个核心的业务!     那么上课之前需要点名,天气太热,需要开空调! 这个时候,一个老 ...

  8. 基本程序单元Activity

    Activity的4种状态,运行状态,暂停状态,停止状态,销毁状态,下面就是生命周期的顺序图 手动创建Activity 1.创建继承自Activity的Activity 2.重写需要的回调方法 3.设 ...

  9. 快速ni

    代码: while(p>0)                   (mul(a,b)) = a*b; { 等同于二分 if(p%2==1) mul(ans,a); 目的是为了二分个基数的二次方乘 ...

  10. pytorch save model + Gmatch4py + jupyter debugger + community structure

    1. pytorch, 使用训练好的模型测试自己图片 2. [ pytorch ] ——基本使用:(2) 训练好的模型参数的保存以及调用 3. Gmatch4py 4. Network Analysi ...