wiz editor
1.0.0
Wiz-Editor est un montage de texte riche en page Web qui prend en charge l'édition collaborative en temps réel multi-personnes.
Remarque: Le contenu des démonstrations en ligne sera automatiquement vidé régulièrement en raison de problèmes réglementaires, veuillez donc ne pas les utiliser pour la version de contenu.
Démo vidéo
Journal de mise à niveau de l'éditeur Wiz
Weizhi Notes Refactored Edition, Weizhi Notes Lite a pleinement utilisé l'éditeur.
Le rédacteur en chef est spécialement développé pour des documents en ligne et a fourni des services intégrés à de nombreuses entreprises. L'éditeur WIZ offre de puissantes capacités d'extension et peut intégrer l'entreprise dans les documents. Par exemple, l'intégration des rappels conventionnels, des tâches, des calendriers, etc. peut être intégré aux systèmes IM et Task au sein de l'entreprise. Dans le même temps, en utilisant les capacités du modèle, divers documents peuvent être générés rapidement, tels que des contrats, des rapports hebdomadaires, etc.
Dans le même temps, le rédacteur Wiz-Editor peut intégrer de manière transparente les utilisateurs et les autorisations au sein de l'entreprise, sans obliger plusieurs utilisateurs à se connecter.
En profitant de la fonctionnalité Wiz-Editor de l'édition collaborative en temps réel multi-personnes, les documents partagés au sein de l'entreprise n'ont pas à s'inquiéter des conflits de version, afin que les documents restent toujours la dernière version.
L'éditeur WIZ peut remplacer les éditeurs Web traditionnels, tels que les éditeurs pour divers blogs, etc. Même si plusieurs personnes n'ont pas besoin de collaborer en temps réel, vous pouvez utiliser le client de l'éditeur Wiz seul (pas besoin de compter sur le serveur). Cela vous permet d'utiliser pleinement les puissantes fonctionnalités d'édition de Wiz-Editor.
L'éditeur WIZ fournit une fonction de marque complète et peut écrire directement des documents à l'aide de la syntaxe de Markdown. Il prend également en charge la fonction d'importation / exportation de Markdown.
Il contient le serveur d'éditeur, qui peut être exécuté directement sur la machine locale.
Téléchargez directement le code à partir de Git Clone ou téléchargez-le et décompressez-le au disque.
Remarque: Nodejs 13 ou plus est requis
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 ) ;
} ) ( ) ;Grâce au code ci-dessus, vous pouvez créer un éditeur collaboratif en temps réel multi-joueurs dans votre propre application. Dans le code ci-dessus, vous pouvez afficher l'effet en exécutant NPM Run Simple sous l'exemple H5.
Afficher le code source
éditeur de Wiz
< 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 > Structure de l'éditeur
Ajout de la fonction de rappel d'insertion
Répondre aux messages de commentaires
Instructions de boîte personnalisée
Boutons de bloc personnalisés / menu
Styles de texte personnalisés
Modèles de documents personnalisés
Structure de l'éditeur
Bloc de type intégré personnalisé
Bloc de type complexe personnalisé
Adaptation du serveur Wiz-Editor
Introduction à l'architecture du serveur de rédacteur Wiz
démo local
Démo CDN
Barre d'outils flottants personnalisés
Répondre aux événements de l'éditeur
Envoyer des messages personnalisés
