wiz editor
1.0.0
Wiz-Editor هي صفحة ويب تحرير نصية غنية تدعم التحرير التعاوني متعدد الأشخاص في الوقت الفعلي.
ملاحظة: سيتم إفراغ محتويات المظاهرات عبر الإنترنت تلقائيًا بانتظام بسبب المشكلات التنظيمية ، لذا يرجى عدم استخدامها لإصدار المحتوى.
عرض الفيديو
سجل ترقية Wiz-Editor
Weizhi Notes refacted refcted edition ، Weizhi Notes استخدم Lite المحرر بالكامل.
تم تطوير Wiz-Editor خصيصًا للوثائق عبر الإنترنت وقدم خدمات متكاملة للعديد من الشركات. يوفر Wiz-Editor قدرات توسع قوية ويمكنه دمج أعمال المؤسسات في المستندات. على سبيل المثال ، يمكن دمج دمج التذكيرات التقليدية والمهام والتقويمات وما إلى ذلك مع أنظمة IM وأنظمة المهام داخل المؤسسة. في الوقت نفسه ، باستخدام قدرات القالب ، يمكن إنشاء مستندات مختلفة بسرعة ، مثل العقود والتقارير الأسبوعية وما إلى ذلك.
في الوقت نفسه ، يمكن لـ Wiz-Editor دمج المستخدمين والأذونات بسلاسة داخل المؤسسة ، دون مطالبة العديد من المستخدمين بتسجيل الدخول.
الاستفادة من ميزة Wiz-Editor من التحرير التعاوني في الوقت الفعلي متعدد الأشخاص ، لا تحتاج المستندات المشتركة في المؤسسة إلى القلق بشأن تعارضات الإصدار ، بحيث تظل المستندات دائمًا أحدث إصدار.
يمكن لـ Wiz-Editor استبدال محرري الويب التقليديين ، مثل المحررين لمدونات مختلفة ، وما إلى ذلك. حتى لو لم يكن هناك العديد من الأشخاص الذين لا يحتاجون إلى التعاون في الوقت الفعلي ، يمكنك استخدام عميل Wiz-Editor وحده (لا حاجة إلى الاعتماد على الخادم). يتيح لك ذلك الاستفادة الكاملة من ميزات التحرير القوية لـ Wiz-Editor.
يوفر Wiz-Editor وظيفة تخفيض كاملة ، ويمكنه كتابة المستندات مباشرة باستخدام بناء جملة Markdown. كما يدعم وظيفة الاستيراد/التصدير.
يحتوي على خادم المحرر ، والذي يمكن تشغيله مباشرة على الجهاز المحلي.
قم بتنزيل الكود مباشرة من Git Clone أو قم بتنزيله وفك ضغطه على القرص.
ملاحظة: مطلوب 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 Run Simple تحت مثال H5.
عرض رمز المصدر
ويز- إحراق التفاعل
< 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 العرض التوضيحي
شريط أدوات عائم مخصص
الرد على أحداث المحرر
إرسال رسائل مخصصة
