am editor
@aomao
ที่นี่เรามีตัวแก้ไขข้อความที่หลากหลายชื่อว่า Editable ซึ่งไม่ได้ใช้คุณสมบัติการแก้ไขแบบดั้งเดิม
เป็นที่ชื่นชอบแต่ใช้ตัวแสดงผลแบบกำหนดเองแทน วิธีการนี้ช่วยให้เราสามารถควบคุมพฤติกรรมของตัวแก้ไขได้ดีขึ้น
ตัวแก้ไขข้อความที่หลากหลายที่รองรับการแก้ไขการทำงานร่วมกันคุณสามารถใช้ React, Vue และไลบรารีทั่วไปอื่น ๆ ได้อย่างอิสระเพื่อขยายและกำหนดปลั๊กอิน
ดูตัวอย่าง · เอกสาร · ปลั๊กอิน
Vue2
Vue3
React
Vue2 Demo
Vue2 Nuxt Demo
| บรรจุุภัณฑ์ | รุ่น | ขนาด | คำอธิบาย |
|---|---|---|---|
@aomao/toolbar | แถบเครื่องมือเหมาะสำหรับ React | ||
@aomao/toolbar-vue | แถบเครื่องมือเหมาะสำหรับ Vue3 | ||
am-editor-toolbar-vue2 | แถบเครื่องมือเหมาะสำหรับ Vue2 | ||
@aomao/plugin-alignment | การจัดตำแหน่ง | ||
@aomao/plugin-embed | URL ฝัง | ||
@aomao/plugin-backcolor | สีพื้นหลัง | ||
@aomao/plugin-bold | ตัวหนา | ||
@aomao/plugin-code | รหัสอินไลน์ | ||
@aomao/plugin-codeblock | Codeblock เหมาะสำหรับ React | ||
@aomao/plugin-codeblock-vue | codeblock เหมาะสำหรับ Vue3 | ||
am-editor-codeblock-vue2 | CodeBlock เหมาะสำหรับ Vue2 | ||
@aomao/plugin-fontcolor | สีตัวอักษร | ||
@aomao/plugin-fontfamily | ครอบครัวแบบอักษร | ||
@aomao/plugin-fontsize | ขนาดตัวอักษร | ||
@aomao/plugin-heading | หัวเรื่อง | ||
@aomao/plugin-hr | กฎแนวนอน | ||
@aomao/plugin-indent | การเยื้อง | ||
@aomao/plugin-italic | ตัวเอียง | ||
@aomao/plugin-link | ลิงค์เหมาะสำหรับ React | ||
@aomao/plugin-link-vue | ลิงค์เหมาะสำหรับ Vue3 | ||
am-editor-link-vue2 | ลิงค์เหมาะสำหรับ Vue2 | ||
@aomao/plugin-line-height | ความสูงของเส้น | ||
@aomao/plugin-mark | เครื่องหมาย | ||
@aomao/plugin-mention | กล่าวถึง | ||
@aomao/plugin-orderedlist | รายการที่สั่งซื้อ | ||
@aomao/plugin-paintformat | รูปแบบจิตรกร | ||
@aomao/plugin-quote | blockquote | ||
@aomao/plugin-redo | ทำซ้ำ | ||
@aomao/plugin-removeformat | ลบรูปแบบ | ||
@aomao/plugin-selectall | เลือกทั้งหมด | ||
@aomao/plugin-status | สถานะ | ||
@aomao/plugin-strikethrough | การตี | ||
@aomao/plugin-sub | ส่วนย่อย | ||
@aomao/plugin-sup | จีบ | ||
@aomao/plugin-tasklist | รายการงาน | ||
@aomao/plugin-underline | ขีดเส้นใต้ | ||
@aomao/plugin-undo | เลิกทำ | ||
@aomao/plugin-unorderedlist | รายการที่ไม่ได้เรียงลำดับ | ||
@aomao/plugin-image | ภาพ | ||
@aomao/plugin-table | โต๊ะ | ||
@aomao/plugin-file | ไฟล์ | ||
@aomao/plugin-mark-range | ช่วงเครื่องหมาย | ||
@aomao/plugin-math | สูตรทางคณิตศาสตร์ | ||
@aomao/plugin-video | วิดีโอ |
ตัวแก้ไขประกอบด้วย engine toolbar และ plugins engine ช่วยให้เรามีความสามารถในการแก้ไขหลัก
ใช้ npm หรือ yarn เพื่อติดตั้งแพ็คเกจเครื่องยนต์
$ npm install @aomao/engine
# or
$ yarn add @aomao/engineเราจะเริ่มต้นด้วยการส่งออก "Hello World!" ข้อความตามปกติ
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 ; นำเข้าปลั๊กอิน @aomao/plugin-bold Bold
import Bold from '@aomao/plugin-bold' ; เพิ่มปลั๊กอิน Bold ลงในเครื่องยนต์
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ; การ์ดเป็นพื้นที่ที่กำหนดแยกต่างหากในตัวแก้ไขโดยมี UI และตรรกะสำหรับการแสดงเนื้อหาที่กำหนดเองภายในการ์ดโดยใช้ React , Vue หรือ Libraries ส่วนหน้าอื่น ๆ ก่อนที่จะติดตั้งเข้ากับตัวแก้ไข
แนะนำ @aomao/plugin-codeblock ปลั๊กอินบล็อกรหัสที่มีแบบเลื่อนลงภาษาที่แสดงผลโดยใช้ React ซึ่งแยกความแตกต่างจาก Vue3 โดยใช้ @aomao/plugin-codeblock-vue
import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ; เพิ่มปลั๊กอิน CodeBlock และส่วนประกอบการ์ด CodeBlockComponent ลงในเอ็นจิ้น
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ CodeBlock ] ,
cards : [ CodeBlockComponent ] ,
} ) ; ปลั๊กอิน CodeBlock รองรับ markdown โดยค่าเริ่มต้น คุณสามารถทริกเกอร์ได้โดยการพิมพ์ไวยากรณ์บล็อกรหัสที่จุดเริ่มต้นของบรรทัดในตัวแก้ไขตามด้วยพื้นที่และชื่อภาษาเช่น `` `JavaScript
ในการจัดการโหนดที่สะดวกยิ่งขึ้นและลดความซับซ้อนตัวแก้ไขนามธรรมคุณสมบัติโหนดและฟังก์ชันการทำงานและกำหนดสี่ประเภทของโหนด: mark , inline , block และ card พวกเขาประกอบด้วยคุณลักษณะที่แตกต่างกันสไตล์หรือโครงสร้าง HTML และถูก จำกัด อย่างสม่ำเสมอโดยใช้สคีมา
schema ง่าย ๆ มีลักษณะเช่นนี้:
{
name : 'p' , // node name
type : 'block' // node type
}นอกจากนี้ยังสามารถอธิบายคุณสมบัติรูปแบบ ฯลฯ ได้เช่น:
{
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 : '*'
}
}ประเภทของโหนดต่อไปนี้สอดคล้องกับกฎข้างต้น:
< 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 > แต่ยกเว้นว่าสีและการทดสอบได้ถูกกำหนดไว้ใน schema คุณลักษณะอื่น ๆ (พื้นหลังสี, test1) จะถูกกรองโดยตัวแก้ไขในระหว่างการประมวลผล
โหนดในพื้นที่ที่แก้ไขได้มีโหนดรวมสี่ประเภทของ mark , inline , บล็อก , and การ์ด through the rule. They are composed of different attributes, styles or สคีมา rule. They are composed of different attributes, styles or โครงสร้าง html` มีการกำหนดข้อ จำกัด บางประการเกี่ยวกับการทำรัง
นำเข้าแถบเครื่องมือ @aomao/toolbar เนื่องจากการโต้ตอบที่ซับซ้อนแถบเครื่องมือจะแสดงผลโดยใช้ส่วนประกอบ React + Antd UI ในขณะที่ Vue3 ใช้ @aomao/toolbar-vue
ยกเว้นการโต้ตอบ UI ส่วนใหญ่ของแถบเครื่องมือส่วนใหญ่เป็นเพียงการเรียกใช้เอ็นจิ้นเพื่อเรียกใช้คำสั่งปลั๊กอินที่เกี่ยวข้องหลังจากเหตุการณ์ปุ่มที่แตกต่างกันจะถูกเรียกใช้ ในกรณีที่มีข้อกำหนดที่ซับซ้อนหรือจำเป็นต้องปรับแต่ง UI อีกครั้งมันง่ายกว่าที่จะแก้ไขหลังจากส้อม
import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ; เพิ่มปลั๊กอิน ToolbarPlugin และส่วนประกอบการ์ด ToolbarComponent ลงในเครื่องยนต์ซึ่งช่วยให้เราสามารถใช้คีย์ทางลัด / ในตัวแก้ไขเพื่อปลุกแถบเครื่องมือการ์ด
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ ToolbarPlugin ] ,
cards : [ ToolbarComponent ] ,
} ) ;แถบเครื่องมือการแสดงผลแถบเครื่องมือได้รับการกำหนดค่าด้วยปลั๊กอินทั้งหมดที่นี่เราต้องผ่านชื่อปลั๊กอินเท่านั้น
return (
...
{
engine && (
< Toolbar
engine = { engine }
items = { [
[ 'collapse' ] ,
[
'bold' ,
] ,
] }
/>
)
}
...
)สำหรับการกำหนดค่าแถบเครื่องมือที่ซับซ้อนยิ่งขึ้นโปรดตรวจสอบเอกสาร https://editor.aomao.com/config/toolbar
ห้องสมุดโอเพนซอร์ซนี้ฟังการเปลี่ยนแปลงในโครงสร้าง HTML ของพื้นที่แก้ไข (โหนดรูทที่เป็นที่พอใจ) ใช้ MutationObserver เพื่อย้อนกลับโครงสร้างข้อมูลและเชื่อมต่อและโต้ตอบกับ YJS ผ่าน WebSocket
ตัวแก้ไขแต่ละตัวในฐานะไคลเอนต์สื่อสารและโต้ตอบกับเซิร์ฟเวอร์ผ่านฟังก์ชั่น WebSocket ในปลั๊กอิน @aomao/plugin-yjs-websocket
@aomao/yjs ใช้การแปลงข้อมูลตัวแก้ไขและ Yjs@aomao/plugin-yjs-websocket ให้ฟังก์ชั่นไคลเอนต์ WebSocket ของตัวแก้ไขและ Yjs@aomao/plugin-yjs-websocket/server ให้บริการ WebSocket Server ของ Yjs เขียนใน node.js และรองรับการจัดเก็บข้อมูลโดยใช้ MongoDB และ LevelDBไอคอน
ก่อนที่จะใช้ไลบรารีโอเพนซอร์ซนี้คุณต้องติดตั้งการพึ่งพาในไดเรกทอรีรากของโครงการ
yarn install
lerna bootstrap
หลังจากติดตั้งการอ้างอิงคุณจะต้องดำเนินการคำสั่งต่อไปนี้ในไดเรกทอรีรูทเพื่อเริ่มโครงการ:
yarn start
โครงสร้างไดเรกทอรีการพัฒนาของห้องสมุดโอเพนซอร์ซนี้มีดังนี้:
packages มีรหัสที่เกี่ยวข้องกับเครื่องยนต์และแถบเครื่องมือplugins มีปลั๊กอินทั้งหมดapi ให้การเข้าถึง API ที่จำเป็นโดยปลั๊กอินบางตัวและใช้ https://editor.aomao.com เป็นบริการ API เริ่มต้นyjs-server มีรหัสเซิร์ฟเวอร์ที่ทำงานร่วมกันซึ่งสามารถเริ่มต้นได้โดย yarn devตัวอย่าง am-editor vue
ขอบคุณยินดี、 elena211314、 ZB201307、 Cheon สำหรับการบริจาค
https://paypal.me/aomaocom
