<!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. wx: wx.showModal 回调函数中调用自定义方法

    一.在回调函数中调用自定义方法: 回调函数中不能直接使用this,需要在外面定义 var that = this 然后 that.自定义的方法.如下: //删除 onDelete: function ...

  2. linux - mysql 异常：/usr/bin/which: no mysql in

    问题描述 运行:which mysql 报错:/usr/bin/which: no mysql in (/usr/lib64/qt-3.3/bin:/usr/local/sbin:/usr/local ...

  3. [ C++ ] 常用位运算技巧

    1.除以二 a >> 1 2.二的n次方 1 << n 3.十进制转2进制 x&(1<<i) 持续更新

  4. Oracle登录报错-ORA-00119

    报错 如果配置监听没有问题了,但是连接时又出现ORA-00119问题: ORA-00119: invalid specification for system parameter LOCAL_LIST ...

  5. HashMap，ConcurrentHashMap原理。Collection（list，set，map集合区别）。和CAS

    collection里面有什么子类?(list和set是实现了collection接口的.) List: 1.可以允许重复的对象(可重复,有序集合).2.可以插入多个null元素.3.常用的实现类有 ...

  6. 谷歌浏览器安装apizza

    接口测试是卡发中不可缺少的一环,那么常用的postman是英文就很不方便一些小伙伴的使用,所以此工具和postman功能相同且升级并且是中文模式 安装: 链接:https://pan.baidu.co ...

  7. error C2825: '_Iter': 当后面跟“::”时必须为类或命名空间 -- 原因可能是参数错误或者自定义函数名和库函数名冲突

    今天运行程序的时候遇到了下面这个bug > B1020.cpp >e:\vs2013\vs2013_rtm_ult_chs\data\vc\include\xutility(): erro ...

  8. 升级openssh编译报错“configure: error: *** working libcrypto not found, check config.log”的解决办法

    问题描述 在linux上,欲将OpenSSH_6.4p1编译升级到OpenSSH_8.0p1时,执行了./configure --prefix=/usr --sysconfdir=/etc/ssh - ...

  9. 2-第一个Django程序

    第一个Django程序 从本章节开始将通过实现一个投票应用程序,来让用户逐步的了解Django.这个程序由两步分组成: 公共站点,允许用户访问进行投票,和查看投票. 站点管理,允许添加,删除,修改投票 ...

  10. JavaScript HTML DOM 关系层级（父子兄弟姐妹关系）

    通过 HTML DOM,您能够使用节点关系来导航节点树. DOM 节点 根据 W3C HTML DOM 标准,HTML 文档中的所有事物都是节点: 整个文档是文档节点 每个 HTML 元素是元素节点 ...