BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
هذا هو مكون محرر Markdown لـ Blazor Webassembly و Blazor Server مع .NET8. يعتمد المكون على Easymde الإصدار 1.0.x لإنشاء المحرر. قررت إنشاء مستودعك لمكتبة JavaScript لأنني أردت التحكم في التحديثات والتغييرات. المكون عبارة عن غلاف حول مكتبة JavaScript وهو مكون من Blazor يتيح لك استخدام محرر Markdown في تطبيق Blazor.
لمزيد من الوثائق ومساعدة هذا المكون ، تفضل بزيارة المنشور الذي أنشأته هنا.
جرب Markdown Editor Online (التحميل غير ممكّن)
أضف المحرر إلى _Imports.razor
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
ثم ، في index.html أو host.html أو App.razor أضف تلك الخطوط:
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
تذكر أن jQuery مطلوب أيضا. يحتوي المكون على الإصدار 1.0.x من Easy Markdown Editor Script والذي يحتفظ بنفسي أيضًا. يمكنك إضافة هذا البرنامج النصي في مشروعك ولكن إذا كنت تستخدم البرنامج النصي في المكون ، فأنت متأكد من أنه يعمل بشكل جيد ويتم اختبار جميع الوظائف.
يحتوي CSS markdowneditor.css على نمط نفس العلامات الجديدة التي أضفتها في محرر Markdown مثل att و note و tip و warn و video .
في صفحة Razor ، يمكننا إضافة المكون مع هذه الخطوط
<div class="col-md-12">
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged" />
<hr />
<h3>Result</h3>
@((MarkupString)markdownHtml)
</div>
@code {
string markdownValue = "#Markdown EditornThis is a test";
string markdownHtml;
Task OnMarkdownValueChanged(string value)
{
return Task.CompletedTask;
}
Task OnMarkdownValueHTMLChanged(string value)
{
markdownHtml = value;
return Task.CompletedTask;
}
}
إن الأمر الرئيسي المختلف بين value و ValueHTMLChanged هو أن Value تُرجع النص المكتوب في المحرر كسلسلة ، بينما تقوم ValueHTMLChanged بإرجاع رمز HTML المقدم للنص. يتضمن ValueHTMLChanged رمز عرض الرسوم البيانية لحورية البحر في علامة SVG .
والنتيجة هي محرر تخفيض رائع كما في لقطة الشاشة التالية. هذه لقطة شاشة من العرض التوضيحي في هذا المستودع.
في محرر Morddown ، أضف الرمز التالي
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false"
CustomButtonClicked="@OnCustomButtonClicked">
<Toolbar>
<MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
<MarkdownToolbarButton Separator Name="Custom button"
Value="@("Hello from your custom Toolbar Button")"
Icon="fa fa-star"
Title="A Custom Button" />
<MarkdownToolbarButton Separator Name="https://github.com/erossini/BlazorMarkdownEditor"
Icon="fa fab fa-github" Title="A Custom Link" />
</Toolbar>
</MarkdownEditor>
@code {
// omitted code...
Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs)
{
Console.WriteLine("OnCustomButtonClicked -> " + eventArgs.Value);
buttonText += "OnCustomButtonClicked -> " + eventArgs.Value + "<br />";
return Task.CompletedTask;
}
}
في علامة MarkdownEditor ، يمكنك إضافة Toolbar Tab الجديد الذي يحتوي على واحد أو أكثر من MarkdownToolbarButton .
يمكن أن يكون لكل MarkdownToolbarButton أحد Action الافتراضية (انظر الجدول أدناه) أو قيمة مخصصة على سبيل المثال رابط لموقع ويب. إذا كنت ترغب في عرضه قبل MarkdownToolbarButton خط رأسي ، فأضف Separator الممتلكات في MarkdownToolbarButton .
في نفس الحالات ، تريد تحديث محتوى محرر Markdown بعد البداية الأولى ، على سبيل المثال لأن تطبيقك يجب أن يقرأ القيمة من واجهة برمجة التطبيقات ويستغرق وقتًا. لذلك ، يجب عليك إضافة ref إلى MarkdownEditor ثم استخدامه لاستدعاء خاصية SetValueAsync ، كما في الكود التالي
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
من أجل إضافة المزيد من الوظائف إلى المكون ، فإنه يتضمن إصدار Mermaid.js 10.2.1 الذي يسمح بإضافة مخططات مثيرة للإعجاب ومخطط في مكون Markdown Like
لإضافة هذه الوظيفة إلى محرر Markdown ، يكفي إضافة index.html هذا البرنامج النصي
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >سيقوم البرنامج النصي بالتحقق مما إذا كانت هذه المكتبة تسمى. إذا تمت إضافتها إلى الصفحة ، فسيقوم محرر Markdown تلقائيًا بإضافة زر في شريط الأدوات لإدراج علامة Mermaid. تلك العلامة
```mermaid
```
باستخدام هذا البرنامج النصي في المكون
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
أو CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
لن يعمل عرض حورية البحر. الخطأ هو
E.Replace ليست وظيفة
لذلك ، أوصي بترقية البرنامج النصي مع النصي الجديد كما أصف في الفقرة التالية.
يتطلب استخدام الإصدار الجديد من Mermaid من 10.9.1 إضافة هذا الرمز في index.html أو host.html أو App.razor
<script type="module">
import mermaid
from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
في الوقت الحالي ، أحاول إيجاد طريقة لتضمين هذا البرنامج النصي في markdownEditor.js لكنني لست متأكدًا من أنه سيعمل.
### An example of the mermaid graphs
A ** Sequence diagram ** is an interaction diagram that shows how processes operate with one another and in what order .Sequencediagram Alice->> جون: مرحبًا جون ، كيف حالك؟ جون->> أليس: عظيم! أليس) جون: أراك لاحقًا!
A **Gantt chart** is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
عنوان Gantt A Gantt Dateformat Yyyy-MM-DD قسم القسم المهمة: A1 ، 2014-01-01 ، 30D مهمة أخرى: بعد A1 ، القسم 20D مهمة أخرى في ثانية: 2014-01-12 ، 12D مهمة أخرى: 24D مهمة أخرى
An **entity–relationship model** (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types).
عميل Erdiagram ||-O {Order: أماكن ترتيب ||-| {خطاب: يحتوي على عميل} |
## Add Highlight.js
This script is not included in the component but the component can detect if _Highlight.js_ is loaded. In this case, the Markdown Editor renders also the code in one of the supported languages.
To enable this function, add the script in your project and then in the `index.html` add the following lines
إذا تم تحميل كلا المكتبتين في index.html ، فلن يعمل عرض حورية البحر.
في Markdown ، هناك بعض العلامات المفقودة لعرض بعض المعلومات المفيدة على الصفحة مثل ملاحظة تسليط الضوء أو نصيحة أو تحذير أو رسالة اهتمام. لذلك ، أضفتهم في محرر التخفيضات هذا. مثال على نتيجة هذا التنفيذ في لقطة الشاشة التالية.
لإضافة الرسالة ، انقر فوق الرموز الموجودة في شريط الأدوات في المحرر أو إضافة تلك الأوامر:
| يأمر | لون | وصف |
|---|---|---|
| `` `att | أحمر | عرض رسالة الانتباه |
| ملاحظة | أزور | أضف ملاحظة في المستند |
| نصيحة | أخضر | يعرض رسالة نصيحة |
| تحذير | البرتقالي | هذه رسالة تحذير |
في مكون محرر Markdown ، يوجد CSS لهم يسمى alert.css ويمكنك إضافته إلى index.html markdowneditor.css
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
بشكل افتراضي ، يحفظ محرر Markdown النص في التخزين المحلي للمتصفح.
AutoSaveEnabled True ويتم إعداد AutoSaveSubmitDelay حتى 5000 ميلي ثانية. هذا يعني أن النص يتم حفظه كل 5 ثوان.
إذا كنت ترغب في تنظيف النص المحفوظ ، فيمكنك استخدام الكود التالي
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
في محرر Markdown ، يمكنك إضافة مقطع فيديو في النص. يمكن أن يكون الفيديو من YouTube أو Vimeo أو أي مزود فيديو آخر. يتم عرض الفيديو في المحرر وفي رمز HTML المقدم.
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
يحتوي محرر Markdown لـ Blazor على مجموعة من الخصائص لتعيين جميع الوظائف في إصدار JavaScript. في هذا المستودع ، هناك مشروعان:
Index.razor حيث أظهر كيفية استخدام المكون مع الوظائف الأساسية Upload.razor . لاختبار التحميل ، يجب MarkdownEditorDemo.Api المشروع| اسم | وصف | يكتب | تقصير |
|---|---|---|---|
| AutoSaveEnabled | يحصل أو تعيين الإعداد لحفظ تلقائي. يحفظ النص الذي يتم كتابته وسيقوم بتحميله مرة أخرى في المستقبل. سوف ينسى النص عندما يتم تقديم النموذج الموجود فيه. موصى به لاختيار معرف فريد لمحرر Markdown. | بول | خطأ شنيع |
| Autosaveid | يحصل أو تعيين معرف حفظ التلقائي. يجب عليك تعيين معرف سلسلة فريد بحيث يمكن للمكون تلقائيًا. شيء يفصل هذا عن الحالات الأخرى للمكون في مكان آخر على موقع الويب الخاص بك. | خيط | القيمة الافتراضية |
| Autosavedelay | التأخير بين الحفظ ، بالميلي ثانية. الافتراضات إلى 10000 (10s). | int | 10000 (10s) |
| AutoSavesubmitdelay | التأخير قبل افتراض أن تقديم النموذج فشل وحفظ النص ، بالمللي ثانية. | int | 5000 (5S) |
| AutoSavetext | نص للشفاء التلقائي | خيط | المحاصرة الذاتية: |
| AutoSavetimeFormatlocale | اضبط تنسيق DateTime لعرضه. لمزيد من المعلومات ، راجع مثيلات DateTimeFormat JavaScript | خيط | en-us |
| AutoSavetimeFormatyear | حدد التنسيق لهذا العام | خيط | رقمية |
| AutoSavetimeFormatmonth | حدد تنسيق الشهر | خيط | طويل |
| AutoSevetimeFormatday | اضبط التنسيق لهذا اليوم | خيط | 2 رقمين |
| AutoSevetimeFormathour | اضبط التنسيق للساعة | خيط | 2 رقمين |
| AutoSevetimeFormatminute | اضبط التنسيق للدقيقة | خيط | 2 رقمين |
| AutoDownloadFontawesome | إذا تم ضبطه على True ، فإن Force Downloads Font Awesome (المستخدمة في الرموز). إذا تم ضبطه على خطأ ، يمنع التنزيل. | منطقي؟ | باطل |
| أحرف STATUSTEXT | قم بتعيين الكلمات لعرضها في شريط الحالة لعد الشخصية | خيط | characters: |
| custombuttoncked | يحدث بعد النقر فوق زر شريط الأدوات المخصص. | EventCallback | |
| CustomImageUpload | يعين معالج تحميل الصور المخصص | ||
| اتجاه | RTL أو LTR. يغير اتجاه النص لدعم لغات اليمين إلى اليسار. الإعدادات الافتراضية إلى LTR. | خيط | LTR |
| خطوط | الأخطاء المعروضة للمستخدم ، باستخدام خيار ErrorCallback ، حيث سيتم استبدال Image_Name و Image_size و Image_Max_Size بقيم كل منهما ، والتي يمكن استخدامها للتخصيص أو التدويل. | marmdownerrormessages | |
| المخبوونات | مجموعة من أسماء الأيقونات للاختباء. يمكن استخدامها لإخفاء أيقونات محددة تظهر افتراضيًا دون تخصيص شريط الأدوات تمامًا. | خيط[] | "جنبًا إلى جنب" ، "ملء الشاشة" |
| Imageaccept | قائمة مفصولة بفاصلة من أنواع MIME المستخدمة للتحقق من نوع الصورة قبل التحميل (ملاحظة: لا تثق أبدًا ، تحقق دائمًا من أنواع الملفات في جانب الخادم). الإعدادات الافتراضية إلى Image/PNG ، Image/JPEG ، Image/JPG ، Image.gif. | خيط | Image/PNG ، Image/JPEG ، Image/JPG ، Image.gif |
| Imagecsrftoken | الرمز المميز CSRF لتضمين مع مكالمة AJAX لتحميل الصورة. على سبيل المثال ، يستخدم مع خلفية Django. | خيط | |
| خيالي | الحد الأقصى لحجم الصورة بالبايت ، تم فحصه قبل التحميل (ملاحظة: لا تثق أبدًا في العميل ، تحقق دائمًا من حجم الصورة في جانب الخادم). الإعدادات الافتراضية إلى 1024 * 1024 * 2 (2 ميجابايت). | طويل | 1024 * 1024 * 2 (2MB) |
| ImagePathabsolute | إذا تم ضبطها على TRUE ، فسيتعامل مع ImageUrl من ImageUploadFunction و FilePath من ImageUploadendPoint باعتباره مسارًا مطلقًا بدلاً من المسار النسبي ، أي عدم وجود window.location.origin إلى ذلك. | خيط | |
| Imagetexts | سيتم استبدال النصوص المعروضة للمستخدم (بشكل رئيسي على شريط الحالة) لميزة Import Image ، حيث سيتم استبدال Image_Name و Image_size و Image_max_size بقيم كل منهما ، والتي يمكن استخدامها للتخصيص أو التدويل. | MarmdownImagetexts | باطل |
| ImageUploadauthenticationschema | إذا كانت هناك حاجة إلى مصادقة لـ API ، فقم بتعيين المخطط لاستخدامه. Bearer هو الشائع. | خيط | فارغ |
| ImageUploadaUthenticationToken | إذا كانت هناك حاجة إلى مصادقة لواجهة برمجة التطبيقات (API) ، فقم بتعيين الرمز المميز لهذه الخاصية | خيط | فارغ |
| الكتان | إذا تم ضبطه على TRUE ، فإن تمكين أرقام الخط في المحرر. | بول | خطأ شنيع |
| linessatustext | قم بتعيين الكلمات لعرضها في شريط الحالة لعد الخط | خيط | lines: |
| lineWrapping | إذا تم ضبطه على ملف تعريف الخط الخاطئ. الافتراضات إلى صواب. | بول | خطأ شنيع |
| Marmdownurl | تعيين عنوان URL لدليل تخفيض الطلب. | رابط إلى دليل التخفيض | |
| maxheight | يضبط ارتفاع ثابت لمنطقة التكوين. سيتم تجاهل خيار minheight. يجب أن تكون سلسلة تحتوي على قيمة CSS صالحة مثل "500px". الإعدادات الافتراضية إلى غير محددة. | خيط | |
| maxuploadimagemessagesize | يحصل أو تعيين حجم الرسالة الأقصى عند تحميل الملف. | طويل | 20 * 1024 |
| مينهايت | يحدد الحد الأدنى للارتفاع لمنطقة التكوين ، قبل أن تبدأ النمو التلقائي. يجب أن تكون سلسلة تحتوي على قيمة CSS صالحة مثل "500px". الإعدادات الافتراضية إلى "300px". | خيط | 300 بكسل |
| مواطنيوشيكير | تمكين (صواب) أو تعطيل (خطأ) فحص الإملائي في المحرر | بول | حقيقي |
| عنصر نائب | إذا تم تعيينه ، يعرض رسالة مخصصة لمكافأة نائبة. | خيط | باطل |
| SegmentFetchTimeout | يحصل أو تعيين مهلة جلب القطاع عند تحميل الملف. | تايمز | 1 دقيقة |
| Showicons | مجموعة من أسماء الأيقونات لإظهار. يمكن استخدامها لإظهار أيقونات محددة مخبأة افتراضيًا دون تخصيص شريط الأدوات تمامًا. | خيط[] | "الكود" ، "الجدول" |
| مدقق الإملائي | تمكين (صواب) أو تعطيل (خطأ) فحص الإملائي في المحرر | بول | حقيقي |
| TabSize | إذا تم تعيينه ، فقم بتخصيص حجم علامة التبويب. الإعدادات الافتراضية إلى 2. | int | 2 |
| سمة | تجاوز الموضوع. الافتراضات إلى Easymde. | خيط | إيميمي |
| شريط الأدوات | [اختياري] يحصل أو تعيين محتوى شريط الأدوات. | Renderfragment | |
| أدوات الأدوات | إذا تم ضبطه على نصائح زر شريط الأدوات الخاطئة. الافتراضات إلى صواب. | بول | حقيقي |
| تحميل | إذا تم تعيينه على TRUE ، فإنه يتيح وظيفة تحميل الصورة ، والتي يمكن تشغيلها بواسطة drag-drop ونسخ النسخ ومن خلال نافذة ملف تصفح (تم فتحه عندما ينقر المستخدم على رمز صورة التحميل). الإعدادات الافتراضية إلى خطأ. | بول | خطأ شنيع |
| قيمة | يحصل أو يحدد قيمة التخفيض. | خيط | باطل |
| valueHTML | يحصل على HTML من قيمة التخفيض. | خيط | باطل |
| WordsStatustext | قم بتعيين الكلمات لعرضها في شريط الحالة لعد الكلمة | خيط | words: |
| اسم | وصف | يكتب |
|---|---|---|
| errorcallback | وظيفة رد الاتصال المستخدمة لتحديد كيفية عرض رسالة خطأ. الافتراضيات إلى (errormessage) => التنبيه (errormessage). | Func <String ، Task> |
| ImageUploadChanged | يحدث في كل مرة تتغير فيها الصورة المحددة. | func <fileChangedeventArgs ، Task> |
| limageUploended | يحدث عند انتهاء تحميل الصورة الفردية. | func <filedendeventargs ، Task> |
| ImageUploadendpoint | نقطة النهاية حيث سيتم إرسال بيانات الصور ، عبر طلب نشر غير متزامن. من المفترض أن يحفظ الخادم هذه الصورة ، وإرجاع استجابة JSON. | خيط |
| ImageUploadprogressed | يخطر تقدم الصورة التي يتم كتابتها إلى دفق الوجهة. | func <fileProgressedEventArgs ، Task> |
| ImageUploadStarted | يحدث عند بدء تحميل الصورة الفردية. | func <filestartedeventargs ، Task> |
| valuechanged | حدث يحدث بعد تغير قيمة التخفيض. | EventCallback |
| valueHtmlChanged | حدث يحدث بعد تغيير قيمة تخفيض الطلب ويتوفر رمز HTML الجديد. | EventCallback |
يمكن لمحرر Marmdown Plazor الاهتمام بتحميل ملف وإضافة رمز التنويع النسبي في المحرر. لذلك ، يجب أن يكون UploadImage الممتلكات على true . أيضًا ، يجب تحديد واجهة برمجة تطبيقات التحميل في Property ImageUploadEndpoint . في بعض الحالات ، تتطلب واجهة برمجة التطبيقات مصادقة. تتيح لك Presenties ImageUploadAuthenticationSchema و ImageUploadAuthenticationToken تمرير المخطط والرمز المميز في المكالمة.
سيتم إضافة هذه القيم إلى طلب POST HttpClient في الرأس. فقط إذا لم يكن كل من الخصائص فارغة ، فسيتم إضافتها إلى الرأس.
إذا كنت تريد أن تفهم بشكل أفضل كيفية إنشاء واجهة برمجة التطبيقات للتحميل ، فقد أنشأت منشورًا محددًا على PuresourCeCode.
فيما يلي أيقونات شريط الأدوات المدمجة (يتم تمكين بعضها فقط افتراضيًا) ، والتي يمكن إعادة تنظيمها كما تريد. "الاسم" هو اسم الرمز ، المشار إليه في JS. "الإجراء" هو إما وظيفة أو عنوان URL لفتح. "الفصل" هو الفئة المعطاة للرمز. "Tooltip" هي تلميح الأدوات الصغيرة التي تظهر عبر title="" السمة. لاحظ أنه تتم إضافة تلميحات الاختصار تلقائيًا وتعكس الإجراء المحدد إذا كان له مجموعة مفاتيح مخصصة له (أي مع قيمة action المُعين على bold وضبط مجموعة tooltip إلى Bold ، فإن النص النهائي الذي سيراه المستخدم سيكون "Bold (Ctrl-B)").
بالإضافة إلى ذلك ، يمكنك إضافة فاصل بين أي أيقونات بإضافة "|" إلى صفيف شريط الأدوات.
| اسم | فعل | Tooltip فصل |
|---|---|---|
| عريض | Togglebold | عريض FA FA-BOLD |
| مائل | تبديل | مائل FA FA-ITALIC |
| strikethrough | Togglestrikethrough | strikethrough fa fa-strikethrough |
| عنوان | تبديل | عنوان FA FA Header |
| العنوان smaller | تبديل | عنوان أصغر FA FA Header |
| العنوان المتقلب | Toggleheadingbigger | العنوان الأكبر FA FA-LG FA HEADER |
| العنوان 1 | تبديل 1 | عنوان كبير FA FA Header Header-1 |
| العنوان 2 | تبديل 2 | العنوان المتوسط FA FA Header Header-2 |
| العنوان 3 | تبديل 3 | عنوان صغير FA FA Header Header-3 |
| شفرة | ToggleCodeBlock | شفرة FA FA-CODE |
| يقتبس | ToggleBlockquote | يقتبس FA FA-QUOTE-LEFT |
| قائمة غير مرتبة | ToggleUnorderedList | قائمة عامة FA FA-List-ul |
| قائمة مرتبة | ToggleOrderedList | قائمة مرقمة FA FA-LIS-OL |
| كتلة نظيفة | Cleanblock | كتلة نظيفة FA FA-ERASER |
| وصلة | ارتباط | إنشاء رابط FA FA-LINK |
| صورة | drawimage | أدخل الصورة FA FA-PICTURE-O |
| طاولة | رسم | أدخل جدول طاولة FA FA |
| القاعدة الأفقية | Drawhorizontalrule | أدخل الخط الأفقي FA FA-MINUS |
| معاينة | TogglePreview | معاينة تبديل فا |
| جنبًا إلى جنب | TogglesideByside | تبديل جنبا إلى جنب FA FA COLLURTS NO-DISIBLE NO-MOBILE |
| ملء الشاشة | تبديل | تبديل ملء الشاشة fa fa-arrows-alt no-divable no-mobile |
| مرشد | هذا الرابط | دليل التخفيض FA FA-question-circle |
يأتي Easymde مع مجموعة من اختصارات لوحة المفاتيح المحددة مسبقًا ، ولكن يمكن تغييرها مع خيار التكوين. قائمة تلك الافتراضية كما يلي:
| اختصار (Windows / Linux) | اختصار (MacOS) | فعل |
|---|---|---|
| كنترول-' | cmd- ' | "ToggleBlockquote" |
| Ctrl-B | CMD-B | "ToggleBold" |
| Ctrl-e | CMD-E | "Cleanblock" |
| Ctrl-H | CMD-H | "ToggleHandingsMaller" |
| ctrl-i | CMD-I | "تبديل" |
| Ctrl-K | CMD-K | "Drawlink" |
| ctrl-l | CMD-L | "ToggleUnorderedList" |
| Ctrl-P | CMD-P | "TogglePreview" |
| Ctrl-alt-c | CMD-Alt-C | "ToggleCodeblock" |
| Ctrl-alt-i | cmd-alt-i | "Drawimage" |
| Ctrl-alt-l | CMD-ALT-L | "ToggleOrderEdList" |
| Shift-Ctrl-H | Shift-CMD-H | "Toggleheadingbigger" |
| F9 | F9 | "TogglesideByside" |
| F11 | F11 | "Togglefullscreen" |
أرسل لي الكثير من الناس نفس السؤال. مكوناتي (MarkdownEditor ، DataTable ، SVG Icon وغيرها من الأشياء التي تجدها على github) مجانية.
أطلب منك المساهمة في المشروع في إحدى الطرق التالية:
إذا كنت لا تعرف كيف تفعل ذلك أو أنت:
بعد ذلك ، يمكنك شراء أحد رخصة الدعم التي أنشأتها. هناك أسعار مختلفة. المبلغ هو قرارك. تجد لها قائمة كاملة على متجر PuresourceCode
تمنحك المساهمة:
| اسم المكون | المنتدى | وصف |
|---|---|---|
| Datatable للبلازور | المنتدى | مكون DataTable لـ Blazor Webassembly و Blazor Server |
| محرر التخفيض للبلازور | المنتدى | هذا محرر تخفيض للاستخدام في Blazor. أنه يحتوي على معاينة حية بالإضافة إلى دليل مساعدة مضمّن للمستخدمين. |
| يكتشف المتصفح للبلازور | المنتدى | Browser اكتشف للاختلاف Webassembly و Blazor Server |
| CODESNIPPER لل Blazor | المنتدى | أضف قصاصة رمز في صفحات Blazor الخاصة بك لـ 196 لغة برمجة مع 243 أنماط |
| نسخ إلى الحافظة | المنتدى | أضف زرًا لنسخ النص في ClipBord |
| أيقونات وأعلام SVG للبلود | المنتدى | مكتبة مع الكثير من أيقونات SVG وأعلام SVG لاستخدامها في صفحات الحلاقة الخاصة بك |
| مربع الحوار الوسيط للبلازور | المنتدى | مربع حوار بسيط للبلازور ويب |
| PSC.Extensions | المنتدى | الكثير من الوظائف لـ .NET5 في حزمة nuget التي يمكنك تنزيلها مجانًا. لقد جمعنا في هذه الحزمة وظائف العمل اليومي لمساعدتك في المطالبة والسلاسل والعوالم والتاريخ والوقت والتعبيرات ... |
| Quill للبلازور | المنتدى | مكون Quill هو عنصر تحكم قابل لإعادة الاستخدام المخصص يسمح لنا باستخدام Quill بسهولة ووضع مثيلات متعددة منه على صفحة واحدة في تطبيق Blazor |
| قطاع للبلازور | المنتدى | هذا مكون قطاع لتجميع ويب Blazor و Blazor Server |
| علامات التبويب للبلازور | المنتدى | هذا مكون علامات التبويب لتجميع الويب Blazor وخادم Blazor |
| الخريطة العالمية للبلازور | المنتدى | عرض خرائط العالم مع بياناتك |
