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 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 ง่าย ๆ ภายใต้ตัวอย่าง 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
บทนำสู่สถาปัตยกรรมเซิร์ฟเวอร์ Wiz-Editor
การสาธิตท้องถิ่น
การสาธิต CDN
แถบเครื่องมือลอยตัวแบบกำหนดเอง
ตอบสนองต่อเหตุการณ์บรรณาธิการ
ส่งข้อความที่กำหนดเอง
