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:
Stringurl地址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:
HTMLElementtag:
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:nullArray` 文件處理完成回調函數 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: {} } ]