wiz editor
1.0.0
Wiz-Editor es una edición de texto rica en la página web que admite la edición colaborativa en tiempo real en varias personas.
Nota: El contenido de las demostraciones en línea se vaciará automáticamente regularmente debido a problemas reglamentarios, por lo que no los use para la liberación de contenido.
Demostración de video
Registro de actualización de Wiz-Editor
Weizhi Notes Refactored Edition, Weizhi Notes Lite ha utilizado completamente el editor.
Wiz-Editor está especialmente desarrollado para documentos en línea y ha brindado servicios integrados a muchas empresas. Wiz-Editor proporciona potentes capacidades de expansión y puede integrar negocios empresariales en documentos. Por ejemplo, la integración de recordatorios, tareas, calendarios, etc. convencionales puede integrarse con los sistemas IM y tareas dentro de la empresa. Al mismo tiempo, utilizando las capacidades de la plantilla, se pueden generar rápidamente varios documentos, como contratos, informes semanales, etc.
Al mismo tiempo, Wiz-Editor puede integrar a la perfección usuarios y permisos dentro de la empresa, sin requerir que múltiples usuarios inicien sesión.
Aprovechando la característica de editor de Wiz de la edición colaborativa en tiempo real de varias personas, los documentos compartidos dentro de la empresa no necesitan preocuparse por los conflictos de versión, por lo que los documentos siempre seguirán siendo la última versión.
Wiz-Editor puede reemplazar a los editores web tradicionales, como editores para varios blogs, etc. Incluso si varias personas no necesitan colaborar en tiempo real, puede usar solo el cliente de editor Wiz (no es necesario confiar en el servidor). Esto le permite hacer un uso completo de las potentes características de edición de Wiz-Editor.
Wiz-editor proporciona la función completa de Markdown y puede escribir directamente documentos utilizando la sintaxis de Markdown. También admite la función de importación/exportación de Markdown.
Contiene el servidor del editor, que se puede ejecutar directamente en la máquina local.
Descargue directamente el código de Git Clone o descárguelo y descárgalo al disco.
Nota: se requiere NodeJS 13 o superior
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 ) ;
} ) ( ) ;A través del código anterior, puede crear un editor colaborativo en tiempo real de múltiples jugadores en su propia aplicación. En el código anterior, puede ver el efecto ejecutando NPM Ejecutar simple bajo el ejemplo H5.
Ver código fuente
Wiz-editor-reaccion
< 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 > Estructura del editor
Función de recordatorio de inserción agregada
Responder a los mensajes de comentarios
Instrucciones de caja personalizada
Botones de bloque personalizados/menú
Estilos de texto personalizados
Plantillas de documentos personalizados
Estructura del editor
Bloque de tipo de incrustación personalizado
Bloque de tipo complejo personalizado
Adaptación del servidor Wiz-Editor
Introducción a la arquitectura del servidor de editor wiz
demostración local
Demostración de CDN
Barra de herramientas flotante personalizada
Responder a los eventos del editor
Enviar mensajes personalizados
