<!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. 软件架构期末复习（Struts2+Spring+Hibernate）

    Struts2+Spring+Hibernate The Model-ViewController pattern in Struts2 is implemented with the followi ...

  2. 论文阅读笔记（三）【AAAI2017】：Learning Heterogeneous Dictionary Pair with Feature Projection Matrix for Pedestrian Video Retrieval via Single Query Image

    Introduction (1)IVPR问题: 根据一张图片从视频中识别出行人的方法称为 image to video person re-id(IVPR) 应用: ① 通过嫌犯照片,从视频中识别出嫌 ...

  3. Supervision meeting with Liu

    data stream;streampipe/nifi data flow:1. algorithm;;;; top-k pattern, motif and so on 2. implication ...

  4. 【动态规划】【C/C++】简单的背包问题

    简单的背包问题 背包问题动态规划中非常经典的一个问题,本文只包含01背包,完全背包和多重背包.更加详尽的背包问题的讲解请参考崔添翼大神的<背包九讲> 简单的01背包 问题导入:新年到了,m ...

  5. JS高级---遍历DOM树

    遍历DOM树  第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)  获取这个根节点的子节点  var children=根节点的.children  调用第二个函数  第二个 ...

  6. NVMe over Fabrics 协议Discovery服务交互过程跟踪

    Discovery服务过程跟踪 对于NVMe over Fabrics的subsystem,有两种类型:Discovery子系统和NVM子系统.这里介绍与Discovery子系统相关的交互内容(即:在 ...

  7. c#中的yield词法

    yield关键字的作用是将当前集合中的元素立即返回,实例: 通过断点可以看到,控制台每显示一个集合中的元素,都会到query方法中去取集合元素. 其实yield return是“语法糖”,其本质是生成 ...

  8. [NOI2015] 品酒大会 - 后缀数组,并查集,STL,启发式合并

    [NOI2015] 品酒大会 Description 对于每一个 \(i \in [0,n)\) 求有多少对后缀满足 LCP 长度 \(\le i\) ,并求满足条件的两个后缀权值乘积的最大值. So ...

  9. python 3.8 下安装 tensorflow 1.14

    pip install --upgrade https://storage.googleapis.com/tensorflow/mac/cpu/tensorflow-1.14.0-py3-none-a ...

  10. java 发送简单邮件（不带附件）

    引入依赖 邮件实体类 可用邮件服务器地址(网易为例) 邮件工具类 import com.me.beans.Mail; import lombok.extern.slf4j.Slf4j; import ...