xnote

Xnote

XNOTE هو محرر نصوص غير مقطوعة الرأس وعالي الأداء ومستقلة عن الإطار يدعم التعاون عبر الإنترنت متعدد الأشخاص. يوفر وظائف تحرير المستندات الحديثة الغنية.

يعتمد XNOTE الأساسي على TextBus النصي المفتوح المصدر والعرض في الواجهة الأمامية. لذلك ، يمكنك الاستمرار في توسيع قدراتك على هذا الأساس.

العرض التوضيحي عبر الإنترنت

العرض التوضيحي عبر الإنترنت

ثَبَّتَ

 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 ( )
    }
  } ]
} ) 

الصق قاعدة الصورة 64 إلى عنوان 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>' ) 

@ الناس

في المستند ، تحتاج وظيفة @ البشرية إلى تنفيذ الواجهة التالية للاتصال بمعلومات المستخدم

 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 )
    }
  }
} )