wiz editor
1.0.0
Wiz-Editor adalah pengeditan teks kaya halaman web yang mendukung pengeditan kolaboratif real-time multi-orang.
Catatan: Isi demonstrasi online akan dikosongkan secara otomatis secara teratur karena masalah peraturan, jadi jangan gunakan untuk rilis konten.
Demo video
Log Upgrade Wiz-Editor
Weizhi Notes Edisi refactored, Weizhi Notes Lite telah sepenuhnya menggunakan editor.
Wiz-Editor dikembangkan secara khusus untuk dokumen online dan telah memberikan layanan terintegrasi kepada banyak perusahaan. Wiz-Editor menyediakan kemampuan ekspansi yang kuat dan dapat mengintegrasikan bisnis perusahaan ke dalam dokumen. Misalnya, integrasi pengingat konvensional, tugas, kalender, dll. Dapat diintegrasikan dengan IM dan sistem tugas dalam perusahaan. Pada saat yang sama, menggunakan kemampuan templat, berbagai dokumen dapat dengan cepat dihasilkan, seperti kontrak, laporan mingguan, dll.
Pada saat yang sama, wiz-editor dapat dengan mulus mengintegrasikan pengguna dan izin dalam perusahaan, tanpa mengharuskan beberapa pengguna untuk masuk.
Mengambil keuntungan dari fitur wiz-editor dari pengeditan kolaboratif real-time multi-orang, dokumen yang dibagikan dalam perusahaan tidak perlu khawatir tentang konflik versi, sehingga dokumen akan selalu tetap menjadi versi terbaru.
Wiz-Editor dapat menggantikan editor web tradisional, seperti editor untuk berbagai blog, dll. Bahkan jika banyak orang tidak perlu berkolaborasi secara real time, Anda dapat menggunakan klien Wiz-Editor saja (tidak perlu mengandalkan server). Ini memungkinkan Anda untuk memanfaatkan fitur pengeditan yang kuat dari Wiz-Editor.
Wiz-Editor menyediakan fungsi penurunan harga lengkap, dan dapat secara langsung menulis dokumen menggunakan sintaks markdown. Ini juga mendukung fungsi impor/ekspor penurunan harga.
Ini berisi server editor, yang dapat dijalankan langsung pada mesin lokal.
Langsung unduh kode dari klon git atau unduh dan unzip ke disk.
Catatan: NodeJs 13 atau lebih tinggi diperlukan
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 ) ;
} ) ( ) ;Melalui kode di atas, Anda dapat membuat editor kolaboratif real-time multi-pemain di aplikasi Anda sendiri. Dalam kode di atas, Anda dapat melihat efeknya dengan menjalankan NPM Run Simple di bawah contoh H5.
Lihat Kode Sumber
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 > Struktur editor
Menambahkan fungsi pengingat penyisipan
Tanggapi pesan komentar
Instruksi kotak khusus
Tombol/menu blok khusus
Gaya teks khusus
Templat dokumen khusus
Struktur editor
Blok tipe embed khusus
Blok tipe kompleks khusus
Adaptasi Server Wiz-Editor
Pengantar Arsitektur Server Wiz-Editor
demo lokal
Demo CDN
Toolbar mengambang khusus
Menanggapi acara editor
Kirim pesan khusus
