xnote

xnote

Xnote는 다원형 온라인 협업을 지원하는 헤드리스, 고성능 프레임 워크 독립적 인 리치 텍스트 편집기입니다. 풍부한 현대 문서 편집 기능을 제공합니다.

기본 Xnote는 오픈 소스 리치 텍스트 프레임 워크 TextBus 및 프론트 엔드보기 ViewFly에 의존합니다. 따라서이 기준으로 기능을 계속 확장 할 수 있습니다.

온라인 데모

온라인 데모

설치하다

 npm install @textbus/xnote katex

사용

 import 'katex/dist/katex.min.css'
import { Editor } from '@textbus/xnote'

const editor = new Editor ( )
editor . mount ( document . getElementById ( 'editor' ) ) . then ( ( ) => {
  console . log ( '编辑器准备完成。' )
} ) 

파일 업로드

파일 업로드를 구현하려면 FileUploader 인터페이스를 구현해야합니다.

 import { FileUploader } from '@textbus/xnote'

class YourUploader extends FileUploader {
  uploadFile ( type : string ) : string | Promise < string > {
    if ( type === 'image' ) {
      return 'imageUrl'
    }
    if ( type === 'video' ) {
      return 'videoUrl'
    }
  }
}

const editor = new Editor ( {
  providers : [ {
    provide : FileUploader ,
    useFactory ( ) {
      return new YourFileUplader ( )
    }
  } ]
} ) 

이미지 Base64를 URL에 붙여 넣습니다

 import { Commander } from '@textbus/core'
import { Injectable } from '@viewfly/core'
import { ImageComponent } from '@textbus/xnote'

@ Injectable ( )
class YourCommander extends Commander {
  paste ( slot : Slot , text : string ) {
    slot . sliceContent ( ) . forEach ( content => {
      if ( content instanceof ImageComponent ) {
        const base64 = content . state . url
        // base64 转 url，请自行实现
        content . state . url = 'https://xxx.com/xxx.jpg'
      }
    } )
    
    // 待图片转换完成后，可调用超类的 paste 方法
    super . paste ( slot , text )
    return true
  }
}

const editor = new Editor ( {
  providers : [ {
    provide : Commander ,
    useClass : YourCommander
  } ]
} ) 

HTML을 얻으십시오

 const html = editor . getHTML ( ) 

초기 HTML 설정

 const editor = new Editor ( {
  content : '<div>HTML 内容</div>'
} ) 

편집기 컨텐츠 업데이트

 editor . setContent ( '<p>你好！</p>' ) 

@ 사람들

문서에서 @ Human Function은 사용자 정보에 연결하려면 다음 인터페이스를 구현해야합니다.

 export abstract class Organization {
  abstract getMembers ( name ?: string ) : Promise < Member [ ] >

  abstract atMember ( member : Member ) : void
}

그런 다음 편집기가 초기화되면 구현을 통과합니다.

 const editor = new Editor ( {
  providers : [ {
    provide : Organization ,
    useValue : new YourOrganization ( )
  } ]
} ) 

협업 지원

TextBus는 당연히 협업을 지원합니다. 편집기 구성 항목에 협업 구성 정보 만 추가하면됩니다. 특정 구성은 https://textbus.io/guide/collab/를 참조 할 수 있습니다.

 const editor = new Editor ( {
  collaborateConfig : {
    userinfo : user , // 用户信息
    createConnector ( yDoc ) : SyncConnector {
      // 返回连接器
      return new YWebsocketConnector ( 'wss://example.com' , 'docName' , yDoc )
    }
  }
} )