wiz editor
1.0.0
Wiz-Editor-это редактирование текста с богатым веб-страницей, которое поддерживает многопользовательское совместное редактирование в реальном времени.
ПРИМЕЧАНИЕ. Содержание онлайн -демонстраций будет автоматически опустошено регулярно из -за проблем с регулированием, поэтому, пожалуйста, не используйте их для выпуска контента.
Видео демонстрация
Wiz-Editor
Weizhi Notes Refactored Edition, Weizhi Notes Lite полностью использовал редактор.
Wiz-Editor специально разработан для онлайн-документов и предоставил интегрированные услуги многим компаниям. Wiz-Editor предоставляет мощные возможности расширения и может интегрировать предприятие в документы. Например, интеграция традиционных напоминаний, задач, календарей и т. Д. Может быть интегрирована с IM и системами задач на предприятии. В то же время, используя возможности шаблона, могут быть быстро сгенерированы различные документы, такие как контракты, еженедельные отчеты и т. Д.
В то же время Wiz-Editor может плавно интегрировать пользователей и разрешения на предприятие, не требуя, чтобы несколько пользователей входили в систему.
Используя преимущества функции Wiz-Editor многопользовательского совместного редактирования в реальном времени, документы, разделенные на предприятии, не должны беспокоиться о конфликтах версий, чтобы документы всегда оставались последней версией.
Wiz-Editor может заменить традиционные веб-редакторы, такие как редакторы для различных блогов и т. Д. Даже если несколько человек не нужно сотрудничать в режиме реального времени, вы можете использовать клиент Wiz-Editor в одиночку (не нужно полагаться на сервер). Это позволяет вам в полной мере использовать мощные функции редактирования Wiz-Editor.
Wiz-Editor обеспечивает полную функцию разметки и может напрямую писать документы с использованием синтаксиса Markdown. Он также поддерживает функцию импорта/экспорта Markdown.
Он содержит сервер редактора, который можно запускать непосредственно на локальной машине.
Непосредственно загрузите код из клона GIT или скачать его и разкапливаться на диск.
Примечание: Nodejs 13 или выше требуется
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 ) ;
} ) ( ) ;Через приведенный выше код вы можете создать многопользовательский редактор в реальном времени в своем собственном приложении. В приведенном выше коде вы можете просмотреть эффект, запустив NPM запустить простое под примером H5.
Просмотреть исходный код
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 > Структура редактора
Добавлена функция напоминания о вставке
Ответьте на сообщения о комментариях
Пользовательские инструкции
Пользовательские кнопки/меню
Пользовательские текстовые стили
Пользовательские шаблоны документов
Структура редактора
Пользовательский блок встроенного типа
Пользовательский комплексный тип блока
Адаптация Wiz-Editor Server
Введение в архитектуру сервера Wiz-Editor
местная демонстрация
CDN Демо
Пользовательская плавая панель инструментов
Отвечать на события редактора
Отправить пользовательские сообщения
