wiz editor
1.0.0
O Wiz-Editor é uma edição de texto rica em página da web que suporta edição colaborativa em tempo real em várias pessoas.
Nota: O conteúdo das demonstrações on -line será esvaziado automaticamente regularmente devido a problemas regulatórios; portanto, não os use para liberação de conteúdo.
Demoção de vídeo
Log de atualização do Wiz-Editor
Weizhi Notes Refatored Edition, Weizhi Notes Lite usou totalmente o editor.
O Wiz-Editor é desenvolvido especialmente para documentos on-line e prestou serviços integrados a muitas empresas. O Wiz-Editor fornece poderosos recursos de expansão e pode integrar negócios corporativos em documentos. Por exemplo, a integração de lembretes convencionais, tarefas, calendários etc. pode ser integrada aos sistemas de IM e tarefas na empresa. Ao mesmo tempo, usando os recursos de modelo, vários documentos podem ser gerados rapidamente, como contratos, relatórios semanais etc.
Ao mesmo tempo, o Wiz-Editor pode integrar perfeitamente usuários e permissões na empresa, sem exigir que vários usuários efetuem login.
Aproveitando o recurso Wiz-Editor da edição colaborativa em tempo real em várias pessoas, os documentos compartilhados na empresa não precisam se preocupar com conflitos de versão, para que os documentos sempre continuem sendo a versão mais recente.
O Wiz-Editor pode substituir os editores da Web tradicionais, como editores para vários blogs, etc. Mesmo que várias pessoas não precisem colaborar em tempo real, você pode usar o cliente Wiz-Editor sozinho (não é necessário confiar no servidor). Isso permite que você faça pleno uso dos poderosos recursos de edição do Wiz-Editor.
O Wiz-Editor fornece uma função de marcação completa e pode gravar diretamente documentos usando a sintaxe do Markdown. Ele também suporta a função de importação/exportação de marcação.
Ele contém o servidor editor, que pode ser executado diretamente na máquina local.
Faça o download diretamente do código do Git Clone ou faça o download e descompacte -o no disco.
Nota: Nodejs 13 ou superior é necessário
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 ) ;
} ) ( ) ;Através do código acima, você pode criar um editor colaborativo em tempo real de vários jogadores em seu próprio aplicativo. No código acima, você pode visualizar o efeito executando o NPM Run Simples sob o exemplo H5.
Veja o código -fonte
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 > Estrutura do editor
Função de lembrete de inserção adicionada
Responda a mensagens de comentários
Instruções de caixa personalizadas
Botões de bloco personalizado/menu
Estilos de texto personalizados
Modelos de documentos personalizados
Estrutura do editor
Bloco de tipo de incorporação personalizado
Bloco de tipo complexo personalizado
Adaptação do servidor Wiz-Editor
Introdução à arquitetura do servidor Wiz-Editor
Demoção local
Demo CDN
Barra de ferramentas flutuante personalizada
Responda aos eventos do editor
Envie mensagens personalizadas
