xnote

Xnote

Xnote es un editor de texto rico sin cabeza, de alto rendimiento e independiente del marco que admite la colaboración en línea de varias personas. Proporciona ricas funciones de edición de documentos modernos.

La Xnote subyacente se basa en el Texwork Textwork de Textwork rico en código abierto y la vista de la vista frontal. Por lo tanto, puede continuar expandiendo sus capacidades sobre esta base.

Demostración en línea

Demostración en línea

Instalar

 npm install @textbus/xnote katex

usar

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

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

Carga de archivo

Para implementar la carga de archivos, debe implementar la interfaz 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 ( )
    }
  } ]
} ) 

Pega la imagen base64 a 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
  } ]
} ) 

Obtener html

 const html = editor . getHTML ( ) 

Configuración de HTML inicial

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

Actualizar contenido del editor

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

@ gente

En el documento, la función humana @ necesita implementar la siguiente interfaz para conectarse a la información del usuario

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

  abstract atMember ( member : Member ) : void
}

Luego pase su implementación cuando se inicialice el editor

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

Apoyo colaborativo

TextBus naturalmente admite la colaboración. Solo necesita agregar información de configuración de colaboración al elemento de configuración del editor. Para una configuración específica, puede consultar https://textbus.io/guide/collab/

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