wiz editor
1.0.0
Wiz-Editor ist eine webseitenreiche Textbearbeitung, die die kollaborative Echtzeit-Bearbeitung von Echtzeit unterstützt.
Hinweis: Der Inhalt von Online -Demonstrationen wird aufgrund von regulatorischen Problemen automatisch regelmäßig geleert. Verwenden Sie sie daher nicht für die Veröffentlichung von Inhalten.
Video Demo
Wiz-Editor-Upgrade-Protokoll
Weizhi Notes Refactored Edition, Weizhi Notes Lite hat den Herausgeber vollständig verwendet.
Wiz-Editor ist speziell für Online-Dokumente entwickelt und hat vielen Unternehmen integrierte Dienste bereitgestellt. Wiz-Editor bietet leistungsstarke Expansionsfunktionen und kann Unternehmensgeschäfte in Dokumente integrieren. Beispielsweise kann die Integration herkömmlicher Erinnerungen, Aufgaben, Kalender usw. in die IM- und Task -Systeme innerhalb des Unternehmens integriert werden. Gleichzeitig können verschiedene Dokumente mit den Vorlagenfunktionen schnell generiert werden, z. B. Verträge, wöchentliche Berichte usw.
Gleichzeitig kann Wiz-Editor Benutzer und Berechtigungen nahtlos in das Unternehmen integrieren, ohne dass sich mehrere Benutzer anmelden müssen.
Wenn Dokumente, die im Unternehmen geteilt werden, die Wiz-Eduitor-Funktion der kollaborativen Echtzeit-Kollaboration in Echtzeit nutzen, müssen sich keine Sorgen um Versionskonflikte machen, sodass Dokumente immer die neueste Version bleiben.
Wiz-Editor kann herkömmliche Webeditoren ersetzen, wie z. B. Redakteure für verschiedene Blogs usw. Selbst wenn mehrere Personen nicht in Echtzeit zusammenarbeiten müssen, können Sie den Wiz-Eduitor-Client allein verwenden (müssen Sie sich nicht auf den Server verlassen). Auf diese Weise können Sie die leistungsstarken Bearbeitungsfunktionen von Wiz-Eductor voll ausnutzen.
Wiz-Editor bietet eine vollständige Markdown-Funktion und kann Dokumente mit Markdown-Syntax direkt schreiben. Es unterstützt auch die Markdown -Import-/Exportfunktion.
Es enthält den Editorserver, der direkt auf der lokalen Maschine ausgeführt werden kann.
Laden Sie den Code direkt von Git Clone herunter oder laden Sie ihn herunter und entpacken Sie ihn auf die Festplatte.
Hinweis: NodeJS 13 oder höher ist erforderlich
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 ) ;
} ) ( ) ;Über den obigen Code können Sie in Ihrer eigenen Anwendung einen Multi-Player-Echtzeit-Collaborative-Editor erstellen. Im obigen Code können Sie den Effekt anzeigen, indem Sie NPM -Ausführen einfach unter dem H5 -Beispiel ausführen.
Quellcode anzeigen
Wiz-Editor-Reaktion
< 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 > Herausgeberstruktur
Insertions -Erinnerungsfunktion hinzugefügt
Antworten Sie auf Kommentarnachrichten
Anweisungen für benutzerdefinierte Box
Benutzerdefinierte Blocktasten/Menü
Benutzerdefinierte Textstile
Benutzerdefinierte Dokumentvorlagen
Herausgeberstruktur
Benutzerdefinierter Einbettentypblock
Benutzerdefinierte komplexe Typblock
Anpassung der Wiz-Editor Server
Einführung in die Wiz-Eduitor Server Architecture
Lokale Demo
CDN -Demo
Benutzerdefinierte schwimmende Symbolleiste
Beantworten Sie die Herausgeber -Ereignisse
Senden Sie benutzerdefinierte Nachrichten
