<!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. yolov3 进化之路,pytorch运行yolov3,conda安装cv2,或者conda安装找不到包问题

    yolov3 进化之路,pytorch运行yolov3,conda安装cv2,或者conda安装找不到包问题 conda找不到包的解决方案. 目前是最快最好的实时检测架构 yolov3进化之路和各种性 ...

  2. 1.mysql卸载重新安装问题

    前言:在开发过程中,MySQL数据库是很频繁使用的数据库,但是有时候,数据库一单出错,或者其他原因,想要重装数据库,难免会遇到MySQL重装之后服务启不来,,下面我就跟大家讨论下如何干净的卸载MySQ ...

  3. Windows7下Docker的安装

    转自  https://blog.csdn.net/xiangxiezhuren/article/details/79698913 无法打开图3,打开属性.给其添加git路径 无法使用图2下载   h ...

  4. luogu P2158 [SDOI2008]仪仗队 （欧拉函数）

    欧拉函数裸题 可惜我太久没做题忘了欧拉函数是什么了... 注意判断一下n = 1的情况就好了 #include <cstdio> using namespace std; ; typede ...

  5. centos yum 安装openresty

    yum 安装openresty sudo yum install yum-utils -y sudo yum-config-manager --add-repo https://openresty.o ...

  6. 机器学习作业（五）机器学习算法的选择与优化——Matlab实现

    题目下载[传送门] 第1步:读取数据文件,并可视化: % Load from ex5data1: % You will have X, y, Xval, yval, Xtest, ytest in y ...

  7. PHP实现导出Excel文件

    实现代码: private function exportExcel($params) { $arr = $this->getExportData($params); // 获取需要导出的信息( ...

  8. DataGridView 调整列顺序为设计的顺序

    设置: dataGridView1.AutoGenerateColumns = false;

  9. python3练习100题——033

    链接:http://www.runoob.com/python/python-exercise-example33.html 题目:按逗号分隔列表. l=[1,2,3,4] k=1 for i in ...

  10. HCTF2018-admin[Unicode欺骗]

    看源码发现 在修改密码,登录,注册时都有都用strlower()来转小写 看了网上师傅的wp,经验之谈,python中自带转小写函数lower(),但这里使用strlower(),可能存在猫腻. 跟进 ...