am editor
@aomao
هنا ، لدينا محرر نصي غني جديد يسمى Exable ، والذي لا يستخدم الخاصية القابلة للتحرير الأصلي
قابلة للاستمتاع، ولكن بدلاً من ذلك يستخدم عارضًا مخصصًا. يتيح لنا هذا النهج التحكم بشكل أفضل في سلوك المحرر.
محرر نصية غني يدعم التحرير التعاوني ، يمكنك استخدام 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 | 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 .
import Bold from '@aomao/plugin-bold' ; أضف البرنامج المساعد Bold إلى المحرك.
//Instantiate the engine
const engine = new Engine ( ref . current , {
plugins : [ Bold ] ,
} ) ; البطاقة هي منطقة محددة بشكل منفصل في المحرر ، مع واجهة المستخدم ومنطقها لتقديم محتوى مخصص داخل البطاقة باستخدام React أو Vue أو مكتبات أمامية أخرى قبل أن يتم تركيبها على المحرر.
قدم @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 ، وسيتم ترشيح سمات أخرى (لون الخلفية ، اختبار 1) من قبل المحرر أثناء المعالجة.
تحتوي العقد في المنطقة القابلة للتحرير على أربعة أنواع من العقد المدمجة من mark ، inline ، والكتل , and والبطاقة through the rule. They are composed of different attributes, styles or هياكل html`. يتم فرض قيود معينة على التعشيش.
استيراد شريط أدوات شريط @aomao/toolbar . نظرًا للتفاعل المعقد ، يتم تقديم شريط الأدوات بشكل أساسي باستخدام مكونات React + Antd واجهة المستخدم ، بينما يستخدم Vue3 @aomao/toolbar-vue
باستثناء تفاعل واجهة المستخدم ، فإن معظم أعمال شريط الأدوات هي فقط استدعاء المحرك لتنفيذ أوامر البرنامج المساعد المقابل بعد تشغيل أحداث زر مختلفة. في حالة المتطلبات المعقدة أو الحاجة إلى إعادة توصيل واجهة المستخدم ، من الأسهل تعديلها بعد الشوكة.
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 من Yjs ، مكتوب في node.js ، ويدعم تخزين البيانات باستخدام MongoDB و LevelDB .iconfont
قبل استخدام مكتبة مفتوحة المصدر هذه ، تحتاج إلى تثبيت تبعيات في دليل جذر المشروع.
yarn install
lerna bootstrap
بعد تثبيت التبعيات ، تحتاج فقط إلى تنفيذ الأمر التالي في دليل الجذر لبدء المشروع:
yarn start
هيكل دليل التطوير لهذه المكتبة مفتوحة المصدر هو كما يلي:
packages على الكود المتعلق بالمحرك والأدواتplugins تحتوي على جميع الإضافاتapi وصول API المطلوب من بعض الإضافات ، ويستخدم https://editor.aomao.com كخدمة واجهة برمجة التطبيقات الافتراضيةyjs-server على رمز خادم تعاوني ، والذي يمكن أن يبدأ بواسطة yarn dev .am-editor vue مثال
شكرا سعيدا 、 ELENA211314 、 ZB201307 、 CHEON للتبرع
https://paypal.me/aomaocom
