ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。

可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发。

源码地址:https://github.com/capricornc...

本地运行 Build Setup

# 安装依赖
npm i # 运行开发模式
# 通过 `http://localhost:9001` 可以访问
npm run dev # 生成项目文件
npm run build

使用 Use

  • npm
  npm install zx-editor --save-dev
  • html
<div id="editorContainer">
<!-- 编辑器容器 -->
</div>
<script src="./dist/js/zx-editor.min.js"></script>
<script>
// 初始化ZX编辑器
var zxEditor = new ZxEditor('#editorContainer', {
fixed: true
})
// 详见index.html文件
</script>

注意:添加照片时,判断照片方向,并自动旋转需要依赖插件 exif.js

  • ES6+
import { ZxEditor } from 'zx-editor'
// import { ZxEditor } from './src/js/zx-editor/index.js'

参数 options

  • autoSave: Number,自动保存编辑内容至localStorage,单位秒。等于0则不自动保存编辑内容。
  • bottom: Number,底部距离。
  • fixed: Boolean,编辑器是否绝对定位,默认为false。
  • imageMaxSize: Number,图片文件最大尺寸限制,单位MB,默认20
  • padding: Number,编辑器左右内边距,默认15像素,
  • showToolbar: Array|Boolean,是否显示底部工具栏(图片、标签、连接添加等图标)。

    默认为true,显示全部图标。

    Array可选值:['pic', 'emoji', 'text', 'link'],数组中元素顺序,决定按钮的显示顺序。

  • top: Number,顶部距离,绝对定位时,相对于WebView顶部的距离。

属性 property

  • dialog: Object 消息提示框

    alert、confirm、loading对话框

    方法 说明
    alert(msg, callback) msg:提示消息, callback():回调函数
    confirm(msg, callback) msg:提示消息, callback(true或false):回调函数
    loading(msg) msg:提示消息,默认loading...
    removeLoading() 移除loading元素节点
    zxEditor.dialog.alert('这是alert提示框', function () {
    // do something ...
    })
  • storage: Object 本地存储

    localStorage/sessionStorage

    方法 说明
    set(key, data, isSessionStorage) key:存储键名,会自动加默认前缀, data:需要存储的数据
    get(key, isSessionStorage) key:存储键名,返回null或data
    remove(key, isSessionStorage) 删除key对应的本地数据

    isSessionStorage,可选参数。默认值为false。

    zxEditor.storage.set('content', {title: '标题', content: '内容'})

方法 methods

  • on(notifyName, callback)

    监听编辑器部分通知

    notifyName callback(参数) 说明
    add-link next() 点击底部添加连接图标时触发。监听此通知,将阻止编辑器默认处理逻辑执行
    debug messge 消息通知
    error {code: 1, msg: 'message'} 错误异常通知
    select-picture - 点击底部选择图片图标时触发。监听此通知,将阻止编辑器默认处理逻辑执行
    show-emoji - 点击底部emoji图标时触发
    show-textstyle - 点击底部文字样式图标时触发

    例子:

    // 自定义选择图片
    zxEditor.on('select-picture', _ => {
    // hybrid模式开发时,此处可以调用原生App提供的接口,访问图片文件选择列表
    // 执行图片文件数据获取,
    // 或者获取由原生App处理并上传完成的图片url
    zxEditor.addImage('图片url地址或base64图片数据')
    // 其他操作...
    })
    // 自定义添加链接
    zxEditor.on('add-link', next => {
    // hybrid模式开发时,此处可以调用原生App提供的接口,访问剪贴板是否有url地址数据
    // 获取到url地址、及其文档title
    // 将链接添加至编辑器中
    next(url, title)
    })
  • addFooterButton(option)

    底部工具栏添加按钮,option: Object|Array

    // 底部工具栏添加一个“导语”按钮
    zxEditor.addFooterButton({
    name: 'summary',
    // 按钮外容器样式名称
    class: 'demo-summary-button',
    // 按钮内i元素样式名
    icon: '',
    // 需要注册的监听事件名
    on: 'summary-button'
    }) // 或者
    zxEditor.addFooterButton(
    [
    {
    name: 'summary',
    class: 'demo-summary-button',
    icon: '',
    on: 'summary-button'
    }
    ]
    )
  • addImage(src|base64)

    向正文焦点处添加一张图片,支持图片url地址或base64数据

  • addMedia(url, type)

    向正文焦点处添加图片/音频/视频

    图片url地址或base64数据

    音频/视频只支持url地址

    url: String url地址

    type: String, img|audio|video

  • getBase64Images()

    获取正文中所有base64数据的图片,返回一个数组

    @return array

      [
    {
    id: 'zxEditor_img_1500001511111',
    base64: 'data:image/jpeg;base64,/9j4AAQSkZJDAAkGB+wgH....',
    blob: 'Blob数据,可以用于直接上传,或通过方法toBlobData(base64)转换'
    }
    ]
  • insertElm($el, tag)

    向正文焦点处添加任意dom元素$el

    $el: HTMLElement

    tag: String, 可选参数,dom元素标签,如img/div/h2等

  • toBlobData(base64)

    将图片base64转换为原始数据类型Blob(),该数据和表单中提交上传的数据同类型,故可以直接上传

    @return new Blob() 返回Blob()数据

  • setImageSrc(imgId, imgUrl)

    将ID为imgId的图片base64地址,替换为新的imgUrl。需配合getBase64Images()方法使用。

    @return boolean

  • getContent(isInnerText)

    获取正文内容html。

    @params 'isInnerText'可选,默认为false,获取编辑器innerHTML。否则获取innerText。

  • setContent(innerHTML)

    设置编辑器内容,可用于初始化编辑器数据。

  • stopAutoSave()

    开启自动保存时有效。停止自动保存编辑数据。

  • save()

    保存编辑器内容

  • removeSave()

    移除本地存储的content内容

  • filesToBase64(files, opts, callback)

    图片文件数据转为base64/blob

    参数 类型 说明
    files 文件类型 文件数据数组
    opts Object 图片压缩或裁剪参数{width:100,height:100,clip:true}
    callback(errorArray, dataArray) errorArray:`null Array, dataArray:null Array` 文件处理完成回调函数

    dataArray

    null
    // 或者
    [
    {
    // 处理完成的dom节点对象
    element: 'canvasElement|imageElement',
    // 文件类型
    type: 'image/png',
    // 处理完成的图片宽度,根据传入的参数定
    width: 100,
    // 处理完成的图片高度
    height: 100,
    // blob数据
    data: 'blob数据',
    // base64数据
    base64: 'base64',
    // 文件大小B
    size: 15455,
    // blob url地址
    url: 'blobUrl',
    // 原始图片数据参数
    rawdata: {}
    }
    ]

源码地址:https://github.com/capricornc...

本文转载于:zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发

zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发的更多相关文章

  1. Squire – 简洁的 HTML5 富文本编辑器

    Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示      源码下载 您可能 ...

  2. 移动端富文本编辑器artEditor

    摘要: 由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少.artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,后续完善其他功能. 插件地址:https ...

  3. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  4. 10个免费的javascript富文本编辑器(jQuery and non-jQuery)

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

  5. Android - 富文本编辑器

    Android富文本编辑器(一):基础知识 目前主流的基于Android富文本开发方式思路如下: 基于TextView图文混排 使用方式: TextView textView = new TextVi ...

  6. wangEditor富文本编辑器使用及图片上传

    引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...

  7. 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...

  8. 移动端强大的富文本编辑器richeditor-android

    代码地址如下:http://www.demodashi.com/demo/14883.html 一.运行效果图 二.代码具体实现 1.引入richeditor-android richeditor-a ...

  9. 如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

    我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...

随机推荐

  1. LeetCode-020-有效的括号

    有效的括号 题目描述:给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺 ...

  2. git--新建分支&提交代码

    本地文件都删除后,本地分支也随之被删除了: 重新clone:git clone - (-为代码在git上的地址,不同协议会有不同形式的地址,例如:HTTPS.SSH,我用HTTPS) 进入克隆完成的代 ...

  3. Azure DevOps (三) 实现和Jenkins的联动

    上一篇文章中,我们通过azure 的webhook实现了和钉钉机器人的联动,实现了通过钉钉机器人告知大家刚才谁动了仓库. 在文章开篇的时候我们举例说了jenkins也可以实现和azure联动,今天我们 ...

  4. springCould注解和配置以及pom依赖

    SpringCloud注解和配置以及pom依赖说明 在本文中说明了pom依赖可以支持什么功能,以及支持什么注解,引入该依赖可以在application.properties中添加什么配置. 1.Spr ...

  5. Laravel-Auth认证

    1.建立数据表 admins 2.找到config下的auth.php 文件,加入如下代码 <?php return [ /* |-------------------------------- ...

  6. Java基础——方法重写

    什么是方法重写? 子类中出现和父类中完全一样的方法声明 什么时候可以进行方法重写? 在子类需要父类的功能的同时,功能主体子类有自己的特有内容时,可以重写,一面沿袭了父类的功能一面又定义了子类特有的内容 ...

  7. linux 下载源

    Cenos7 Nginx [nginx-stable]name=nginx stable repobaseurl=http://nginx.org/packages/centos/$releaseve ...

  8. 如果一个service服务出现异常,无响应,如何定位,定位过程

    假设一个service服务出现异常,要如何定位

  9. 3、Lambda表达式

    Lambda表达式 Lambda表达式(lambda expression),是一种匿名函数,即没有函数名的函数. Lambda表达式不仅在C#中使用,在Java.Phtyon.C++ 中都有使用. ...

  10. 请解释Spring Bean的生命周期?

    首先说一下Servlet的生命周期:实例化,初始init,接收请求service,销毁destroy: Spring上下文中的Bean生命周期也类似,如下: (1)实例化Bean: 对于BeanFac ...