zx-editor 移動端（HTML5）富文本編輯器，可與原生App混合(hybrid)開發

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...