wiz editor
1.0.0
wiz-editor是一個支持多人實時協同編輯的網頁富文本編輯。
注意：在線演示的內容，因為監管問題，會定期自動清空，請勿用於內容髮布。
視頻演示
wiz-editor升級日誌
為知筆記重構版，為知筆記Lite已經全面使用該編輯器。
wiz-editor專門為在線文檔而開發，已為多家企業提供集成服務。 wiz-editor提供了強大的擴展能力，可以將企業的業務集成到文檔裡面。 例如，常規的提醒，任務，日曆等整合，可以和企業內部的IM，任務系統進行整合。同時利用模版能力，可以快速的生成各種文檔，例如合同， 週報等。
同時，wiz-editor可以無縫的和企業內部的用戶和權限進行整合，無需用戶多次登錄。
利用wiz-editor多人實時協同編輯的特點，企業內共享的文檔，無需擔心版本衝突的問題，讓文檔永遠保持最新版本。
wiz-editor可以替換傳統的網頁編輯器，例如各種博客的編輯器等。即使不需要多人實時協同編輯， 也可以單獨使用wiz-editor客戶端（無需依賴服務端）。這樣可以充分利用wiz-editor強大的編輯功能。
wiz-editor提供了完整的markdown功能，可以利用markdown語法直接編寫文檔。同時支持markdown導入/導出功能。
包含編輯器服務端，可以直接在本機測試運行。
直接從git clone或者下載代碼，解壓縮到磁盤。
注意：需要nodejs 13或者更高的版本
cd h5
npm install
npm start localhost:9000
cd h5
# 完整的自定义扩展例子，包含外部工具栏，各种自定义组件等
npm run custom
# 极简编辑器，无外部UI
npm run simple
# 各种自定义box
npm run calendar
npm run date
npm run mention
npm run labelnpm i wiz-editor import {
createEditor ,
Editor ,
} from 'wiz-editor/client' ;
// 定义AppID，AppSecret, AppDomain。在自带的测试服务器中，下面三个key不要更改
const AppId = '_LC1xOdRp' ;
const AppSecret = '714351167e39568ba734339cc6b997b960ed537153b68c1f7d52b1e87c3be24a' ;
const AppDomain = 'wiz.cn' ;
// 初始化服务器地址
const WsServerUrl = window . location . protocol !== 'https:'
? `ws:// ${ window . location . host } `
: `wss:// ${ window . location . host } ` ;
// 定义一个用户。该用户应该是由应用服务器自动获取当前用户身份
// 编辑服务需要提供用户id以及用户的显示名。
const user = {
userId : ` ${ new Date ( ) . valueOf ( ) } ` ,
displayName : 'test user' ,
avatarUrl : 'xxx' ,
} ;
// 设置编辑器选项
const options = {
serverUrl : WsServerUrl ,
} ;
// 从应用服务器获取一个AccessToken。应用服务器需要负责验证用户对文档的访问权限。
// accessToken采用jwt规范，里面应该包含用户的userId，文档的docId，以及编辑应用的AppId。
// 下面是一个演示例子。在正常情况下，AccessToken应该通过用户自己的应用服务器生成。
// 因为在前端使用JWT加密规范的时候，必须在https协议下面的网页才可以使用。为了演示，
// 我们自带的测试服务器会提供一个虚拟的token生成功能。（启动服务的时候，需要指定--enable-fake-token-api 参数）
// 请勿在正式服务器上面，启用这个参数。
async function fakeGetAccessTokenFromServer ( userId : string , docId : string ) : Promise < string > {
//
const data = {
userId ,
docId ,
appId : AppId ,
} ;
const fromHexString = ( hexString : string ) => {
const parts = hexString . match ( / .{1,2} / g ) ;
assert ( parts ) ;
const arr = parts . map ( ( byte ) => parseInt ( byte , 16 ) ) ;
return new Uint8Array ( arr ) ;
} ;
//
const key = fromHexString ( AppSecret ) ;
try {
const accessToken = await new EncryptJWT ( data )
. setProtectedHeader ( { alg : 'dir' , enc : 'A256GCM' } )
. setIssuedAt ( )
. setIssuer ( AppDomain )
. setExpirationTime ( '120s' )
. encrypt ( key ) ;
return accessToken ;
} catch ( err ) {
const res = await fetch ( `http:// ${ window . location . host } /token/ ${ AppId } / ${ docId } / ${ userId } ` ) ;
const ret = await res . json ( ) ;
return ret . token ;
}
}
// 文档id
const docId = 'my-test-doc-id' ;
( async function loadDocument ( ) {
// 验证身份，获取accessToken
const token = await fakeGetAccessTokenFromServer ( user . userId , docId ) ;
// 生成编辑服务需要的认证信息
const auth = {
appId : AppId ,
userId : user . userId ,
displayName : 'name' ,
avatarUrl : 'xxx' ,
docId ,
token ,
permission : 'w' ,
} ;
// 创建编辑器并加载文档
const editor = createEditor ( document . getElementById ( 'editor' ) as HTMLElement , options , auth ) ;
} ) ( ) ;通過上面的代碼，就可以在自己的應用中，創建一個多人實時協同編輯器。 上面的代碼，可以通過在h5例子下面，運行npm run simple來查看效果。
查看源碼
wiz-editor-react
< script src =' https://cdn.jsdelivr.net/npm/[email protected]/client/src/index.js ' charset =" utf-8 " > </ script >
< script >
const {
Editor ,
createEditorPromise ,
assert ,
BlockElement ,
blockUtils ,
containerUtils ,
CommandItemData ,
MenuItem ,
domUtils ,
getEditor ,
AuthMessage ,
OnProgress ,
EditorOptions ,
SelectionDetail ,
EditorDoc ,
} = window . WizEditor ;
</ script > 編輯器結構
增加插入提醒功能
響應評論消息
自定義box說明
自定義block按鈕/菜單
自定義文字樣式
自定義文檔模版
編輯器結構
自定義Embed類型block
自定義Complex類型block
wiz-editor 服務端適配
wiz-editor 服務端架構介紹
local demo
CDN demo
自定義浮動工具欄
響應編輯器事件
發送自定義消息
