<!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. Wannafly Camp 2020 Day 2I 堡堡的宝藏 - 费用流

    感谢这道题告诉我KM求的是 完备 最大权匹配 :( #include <bits/stdc++.h> using namespace std; #define reset(x) memse ...

  2. C++面向对象编程实例

    实例一.四位运算符操作 main.cpp. #include <iostream> #include "operator_1.h" #include <stdio ...

  3. 关于List比较好玩的操作

    作为Java大家庭中的集合类框架,List应该是平时开发中最常用的,可能有这种需求,当集合中的某些元素符合一定条件时,想要删除这个元素.如: public class ListTest { publi ...

  4. 理解 Oracle 多租户体系中（12c,18c,19c）创建用户作用域范围

    本篇探讨以下几个问题:你可提前猜测下面6个场景语句中,哪几个可以成功创建用户? 1. 在CDB级别中创建公共用户,不带 container 子句的效果: 2. 在CDB级别中创建公共用户,带 cont ...

  5. Python的特点

    简单易学. 免费开源. 跨平台. 解释性.不需要编译就可以直接运行,使用更加简单,移植性更强. 面向对象.arcgis也支持面向对象编程.

  6. "const char *" 类型的值不能用于初始化 "char *" 类型的实体

    用vs2019发现会出现这样的问题 最后发现只要设置一下就解决了,解决方案如下: 右击该项目,选择属性->c/c++->语言->将符合模式改为否就行了... 设置之后程序没有再报错, ...

  7. jQuery的12种选择器

    jQuery的12种选择器  1.#id : 根据给定的ID匹配一个元素 显示(用加粗的代替颜色): 这是第一个p标签 2.* : 匹配所有元素,多用于结合上下文来搜索 显示 : 这是p标签 这是di ...

  8. python3练习100题--024

    因为过生日,好几天没做题了,有点松懈. 我要更加加油啦-为了打败现在每天都厌恶的生活! 原题链接:http://www.runoob.com/python/python-exercise-exampl ...

  9. 【NOIP2001普及组】最大公约数和最小公倍数问题

    P1029 最大公约数和最小公倍数问题 最大公约数用辗转相除法: 最小公倍数:两个数的乘积=他们的最大公约数*最小公倍数,既然两个数的乘积及其最大公约数已知,那么最小公倍数也可以求了. #includ ...

  10. C语言数据结构——第四章 串

    四.串 4.1-串的基本概念 串的定义 串是由数字.字母或其他字符组成的有限序列,一般记为 StringName = “a[0]a[1]a[2]···a[i]···a[n-1]”(n>0,0&l ...