am editor Download - am editor Sumber Code Unduh

am editor

Sumber daya lainnya

@aomao

Unduh

Di sini, kami memiliki editor teks kaya baru yang disebut Edited, yang tidak menggunakan properti asli yang dapat diedit ~~dapat diisi ulang~~ , tetapi menggunakan renderer khusus. Pendekatan ini memungkinkan kita untuk mengontrol perilaku editor dengan lebih baik.

AM-editor

Editor teks kaya yang mendukung pengeditan kolaboratif, Anda dapat menggunakan dengan bebas React, Vue dan perpustakaan umum front-end lainnya untuk memperluas dan mendefinisikan plugin.

Pratinjau · Dokumen · Plugin

Vue2

Vue3

React

Vue2 Demo

Vue2 Nuxt Demo

Fitur

? Solusi out-of-the-box dengan puluhan plugin kaya untuk memenuhi sebagian besar kebutuhan
Sangat dapat diperluas, selain plugin dasar untuk tipe Mark, Inline, dan Block, kami juga menyediakan komponen kartu yang dikombinasikan dengan pustaka front-end seperti React and Vue to Render Plugin UI
? Dukungan multimedia yang kaya, tidak hanya mendukung gambar dan audio/video, tetapi juga mendukung penyematan konten multimedia
Mendukung sintaks markdown
? Mendukung internasionalisasi
Mesin ditulis murni dalam javascript, tanpa mengandalkan perpustakaan front-end, plugin dapat diterjemahkan menggunakan perpustakaan front-end seperti React and Vue. Dapat dengan mudah menangani arsitektur yang kompleks
Solusi pengeditan kolaboratif bawaan, konfigurasi ringan untuk digunakan
Kompatibel dengan browser seluler terbaru

Plugin

Kemasan	Versi	Ukuran	keterangan
`@aomao/toolbar`			Toolbar, cocok untuk `React`
`@aomao/toolbar-vue`			Toolbar, cocok untuk `Vue3`
`am-editor-toolbar-vue2`			Toolbar, cocok untuk `Vue2`
`@aomao/plugin-alignment`			Penyelarasan
`@aomao/plugin-embed`			Embed URL
`@aomao/plugin-backcolor`			Warna latar belakang
`@aomao/plugin-bold`			Berani
`@aomao/plugin-code`			Kode inline
`@aomao/plugin-codeblock`			CodeBlock, cocok untuk `React`
`@aomao/plugin-codeblock-vue`			CodeBlock, cocok untuk `Vue3`
`am-editor-codeblock-vue2`			CodeBlock, cocok untuk `Vue2`
`@aomao/plugin-fontcolor`			Warna font
`@aomao/plugin-fontfamily`			Keluarga Font
`@aomao/plugin-fontsize`			Ukuran font
`@aomao/plugin-heading`			Menuju
`@aomao/plugin-hr`			Aturan horizontal
`@aomao/plugin-indent`			Lekukan
`@aomao/plugin-italic`			Miring
`@aomao/plugin-link`			Tautan, cocok untuk `React`
`@aomao/plugin-link-vue`			Tautan, cocok untuk `Vue3`
`am-editor-link-vue2`			Tautan, cocok untuk `Vue2`
`@aomao/plugin-line-height`			Tinggi garis
`@aomao/plugin-mark`			Tanda
`@aomao/plugin-mention`			Menyebutkan
`@aomao/plugin-orderedlist`			Daftar yang dipesan
`@aomao/plugin-paintformat`			Format Painter
`@aomao/plugin-quote`			Blockquote
`@aomao/plugin-redo`			Mengulangi
`@aomao/plugin-removeformat`			Hapus format
`@aomao/plugin-selectall`			Pilih semua
`@aomao/plugin-status`			Status
`@aomao/plugin-strikethrough`			Strikethrough
`@aomao/plugin-sub`			Sub
`@aomao/plugin-sup`			Sup
`@aomao/plugin-tasklist`			Daftar tugas
`@aomao/plugin-underline`			Menggarisbawahi
`@aomao/plugin-undo`			Membuka
`@aomao/plugin-unorderedlist`			Daftar yang tidak dipesan
`@aomao/plugin-image`			Gambar
`@aomao/plugin-table`			Meja
`@aomao/plugin-file`			Mengajukan
`@aomao/plugin-mark-range`			Rentang tanda
`@aomao/plugin-math`			Formula Matematika
`@aomao/plugin-video`			Video

Memulai

Instalasi

Editor terdiri dari engine , toolbar , dan plugins . engine memberi kita kemampuan pengeditan inti.

Gunakan npm atau yarn untuk menginstal paket mesin.

$ npm install @aomao/engine
# or
$ yarn add @aomao/engine

Penggunaan

Kami akan mulai dengan mengeluarkan "Hello World!" pesan seperti biasa.

 import React , { useEffect , useRef , useState } from 'react' ;
import Engine , { EngineInterface } from '@aomao/engine' ;

const EngineDemo = ( ) => {
	//Editor container
	const ref = useRef < HTMLDivElement | null > ( null ) ;
	//Engine instance
	const [ engine , setEngine ] = useState < EngineInterface > ( ) ;
	//Editor content
	const [ content , setContent ] = useState < string > ( '<p>Hello world!</p>' ) ;

	useEffect ( ( ) => {
		if ( ! ref . current ) return ;
		//Instantiate the engine
		const engine = new Engine ( ref . current ) ;
		//Set the editor value
		engine . setValue ( content ) ;
		//Listen to the editor value change event
		engine . on ( 'change' , ( ) => {
			const value = engine . getValue ( ) ;
			setContent ( value ) ;
			console . log ( `value: ${ value } ` ) ;
		} ) ;
		//Set the engine instance
		setEngine ( engine ) ;
	} , [ ] ) ;

	return < div ref = { ref } /> ;
} ;
export default EngineDemo ;

Plugin

Impor plugin tebal @aomao/plugin-bold .

 import Bold from '@aomao/plugin-bold' ;

Tambahkan plugin Bold ke mesin.

 //Instantiate the engine
const engine = new Engine ( ref . current , {
	plugins : [ Bold ] ,
} ) ;

Kartu

Kartu adalah area yang ditentukan secara terpisah di editor, dengan UI dan logika untuk memberikan konten khusus di dalam kartu menggunakan React , Vue , atau perpustakaan front-end lainnya sebelum dipasang ke editor.

Memperkenalkan @aomao/plugin-codeblock , plugin blok kode dengan drop-down bahasa yang diberikan menggunakan react, yang membedakannya dari vue3 menggunakan @aomao/plugin-codeblock-vue .

 import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ;

Tambahkan plugin CodeBlock dan komponen kartu CodeBlockComponent ke mesin.

 //Instantiate the engine
const engine = new Engine ( ref . current , {
	plugins : [ CodeBlock ] ,
	cards : [ CodeBlockComponent ] ,
} ) ;

Plugin CodeBlock mendukung markdown secara default. Anda dapat memicu dengan mengetikkan sintaks blok kode di awal baris di editor, diikuti oleh ruang dan nama bahasa, seperti `` JavaScript.

Kendala Node

Untuk mengelola node lebih nyaman dan mengurangi kompleksitas, editor mengabstraksi properti dan fungsionalitas simpul dan mendefinisikan empat jenis node: mark , inline , block , dan card . Mereka terdiri dari berbagai atribut, gaya, atau struktur HTML yang berbeda, dan secara seragam dibatasi menggunakan skema.

schema sederhana terlihat seperti ini:

 {
  name : 'p' , // node name
  type : 'block' // node type
}

Selain itu, properti, gaya, dll juga dapat dijelaskan, misalnya:

 {
  name : 'span' , // node name
  type : 'mark' , // node type
  attributes : {
    // The node has a style attribute
    style : {
      // Must contain a color style
      color : {
        required : true , // must contain
        value : '@color' // The value is a color value that conforms to the css specification. @color is the color validation defined in the editor. Here, methods and regular expressions can also be used to determine whether the required rules are met
      }
    } ,
    // Optional include a test attribute, its value can be arbitrary, but it is not required
    test : '*'
  }
}

Jenis node berikut sesuai dengan aturan di atas:

 < span style =" color:#fff " > </ span >
< span style =" color:#fff " test =" test123 " test1 =" test1 " > </ span >
< span style =" color:#fff;background-color:#000; " > </ span >
< span style =" color:#fff;background-color:#000; " test =" test123 " > </ span >

Tetapi kecuali bahwa warna dan tes telah didefinisikan dalam schema , atribut lain (latar belakang-warna, test1) akan disaring oleh editor selama pemrosesan.

Node di area yang dapat diedit memiliki empat jenis node gabungan mark , inline , Block , and Card through the rule. They are composed of different attributes, styles or struktur html. Kendala tertentu dikenakan pada bersarang.

Toolbar

Impor bilah alat @aomao/toolbar . Karena interaksi yang kompleks, bilah alat ini pada dasarnya diterjemahkan menggunakan komponen React + Antd UI, sedangkan Vue3 menggunakan @aomao/toolbar-vue

Kecuali untuk interaksi UI, sebagian besar pekerjaan bilah alat hanyalah menghubungi mesin untuk menjalankan perintah plugin yang sesuai setelah berbagai peristiwa tombol dipicu. Dalam hal persyaratan yang rumit atau kebutuhan untuk menaati kembali UI, lebih mudah untuk memodifikasi setelah garpu.

 import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ;

Tambahkan komponen kartu ToolbarPlugin dan komponen kartu ToolbarComponent ke mesin, yang memungkinkan kami menggunakan kunci pintasan / di editor untuk membangunkan bilah alat kartu

 //Instantiate the engine
const engine = new Engine ( ref . current , {
	plugins : [ ToolbarPlugin ] ,
	cards : [ ToolbarComponent ] ,
} ) ;

Rendering Toolbar, toolbar telah dikonfigurasi dengan semua plugin, di sini kita hanya perlu meneruskan nama plugin

 return (
    ...
    {
        engine && (
            < Toolbar
                engine = { engine }
                items = { [
                    [ 'collapse' ] ,
                    [
                        'bold' ,
                    ] ,
                ] }
            />
        )
    }
    ...
)

Untuk konfigurasi toolbar yang lebih kompleks, silakan periksa dokumen https://editor.aomao.com/config/toolbar

Pengeditan kolaboratif

Perpustakaan open-source ini mendengarkan perubahan dalam struktur HTML dari area pengeditan (node root yang dapat diedit), menggunakan MutationObserver untuk merekayasa balik struktur data, dan menghubungkan dan berinteraksi dengan YJS melalui WebSocket untuk mencapai pengeditan kolaboratif multi-pengguna.

Mode interaktif

Setiap editor, sebagai klien, berkomunikasi dan berinteraksi dengan server melalui fungsi WebSocket di plugin @aomao/plugin-yjs-websocket .

@aomao/yjs mengimplementasikan konversi data editor dan Yjs
@aomao/plugin-yjs-websocket menyediakan fungsi klien WebSocket dari editor dan Yjs
@aomao/plugin-yjs-websocket/server menyediakan server WebSocket Yjs , ditulis dalam node.js, dan mendukung penyimpanan data menggunakan MongoDB dan LevelDB .

Ikon Proyek

Iconfont

Perkembangan

Bereaksi

Sebelum menggunakan pustaka open-source ini, Anda perlu menginstal dependensi di direktori Root Proyek.

 yarn install

lerna bootstrap

Setelah menginstal dependensi, Anda hanya perlu menjalankan perintah berikut di direktori root untuk memulai proyek:

 yarn start

Struktur direktori pengembangan perpustakaan open-source ini adalah sebagai berikut:

packages berisi kode yang berhubungan dengan mesin dan bilah alat
plugins berisi semua plugin
api menyediakan akses API yang diperlukan oleh beberapa plugin, dan menggunakan https://editor.aomao.com sebagai layanan API default
yjs-server berisi kode server kolaboratif, yang dapat dimulai dengan yarn dev .