BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
Это компонент редактора Markdown для Blazor Webassembly и Blazor Server с .net8. Компонент основан на EasyMde версии 1.0.x для создания редактора. Я решил создать свой репозиторий для библиотеки JavaScript, потому что я хотел контролировать обновления и изменения. Компонент представляет собой обертку вокруг библиотеки JavaScript, и это блазор -компонент, который позволяет использовать редактор Marckdown в приложении 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 также требуется. Компонент содержит простой скрипт редактора Markdown версии 1.0.x, которая также поддерживается мной. Вы можете добавить этот скрипт в свой проект, но если вы используете сценарий в компоненте, вы уверены, что он работает нормально, и все функции протестированы.
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 .
Результатом является хороший редактор Markdown, как на следующем скриншоте. Это скриншот от демонстрации в этом репозитории.
В ваш редактор Marckdown добавьте следующий код
<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 вкладок, которая содержит одну или несколько MarkdownToolbarButton .
Каждый MarkdownToolbarButton может иметь одно из Action по умолчанию (см. Таблицу ниже) или пользовательское значение, например, ссылку на веб -сайт. Если вы хотите отобразить перед MarkdownToolbarButton вертикальной линией, добавьте Separator свойств в MarkdownToolbarButton .
В тех же случаях вы хотите обновить содержание редактора Markdown после первого инициирования, например, потому что ваше приложение должно прочитать значение из API, и это требует времени. Для этого вы должны добавить 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);
}
}
Чтобы добавить больше функций в компонент, он включает в себя версию MREMAID.JS 10.2.1, которая позволяет добавлять впечатляющие диаграммы и диаграммы в компоненте Markdown Like
Чтобы добавить эту функциональность в редактор Markdown, этого достаточно, чтобы добавить в index.html этот скрипт
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >Сценарий проверит, вызван ли эта библиотека. Если он добавлен на страницу, редактор Markdown автоматически добавит кнопку на панели инструментов, чтобы вставить тег для русалки. Этот тег есть
```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 не является функцией
Итак, я рекомендую обновить сценарий с новым, как я описываю в следующем параграфе.
Использование новой версии русалки из 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 .Sequecendiagram 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.
Гантт заголовок А. Гантт-диаграмма дата дата формата 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 Customer ||-O {Order: Plate Order ||-| {line-item: содержит клиент} | .. | {Deliver-Address: использует
## 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
```
Редактор Marckdown для Blazor обладает элитной коллекцией свойств, чтобы отобразить все функциональные возможности в версии JavaScript. В этом хранилище есть 2 проекта:
Index.razor , где я показываю, как использовать компонент с основными функциями и Upload.razor Разор, который показывает, как справиться с загрузкой изображения. Чтобы проверить загрузку, проект MarkdownEditorDemo.Api должен запустить| Имя | Описание | Тип | По умолчанию |
|---|---|---|---|
| AutoSaveEnabled | Получает или устанавливает настройку для автоматического сохранения. Сохраняет текст, который написан и загрузит его в будущем. Он забудет текст, когда представлена форма, в которой он содержится. Рекомендуется выбрать уникальный идентификатор для редактора Markdown. | буль | ЛОЖЬ |
| Autosaveid | Получает или устанавливает идентификатор автоматического сохранения. Вы должны установить уникальный идентификатор строки, чтобы компонент мог автоматически. Что -то, что отделяет это от других случаев компонента в другом месте на вашем сайте. | нить | Значение по умолчанию |
| Autosavedelay | Задержка между спасбросками, в миллисекундах. По умолчанию до 10000 (10 с). | инт | 10000 (10S) |
| Autosavesubmitdelay | Задержка, прежде чем предположить, что отправка формы не удалась и сохранила текст в миллисекундах. | инт | 5000 (5 с) |
| AutoSavetext | Текст для автоматической | нить | Автозав: |
| AutoSavetimeFormatlocale | Установите формат для DateTime для отображения. Для получения дополнительной информации см. Экземпляры DateTimeFormat DateTimeFormat DateTimeFormat | нить | en-us |
| AutoSavetimeFormatyear | Установите формат на год | нить | числовое |
| AutoSavetimeFormatmonth | Установите формат на месяц | нить | длинный |
| AutoSavetimeFormatday | Установите формат на день | нить | 2-значный |
| AutoSavetimeFormathour | Установите формат на час | нить | 2-значный |
| AutoSavetimeFormatminute | Установите формат на минуту | нить | 2-значный |
| AutoDownloadFontawesome | Если установить на True, Force Doploads Font Awesome (используется для значков). Если установлено на False, предотвращает загрузку. | Bool? | нулевой |
| Символы Statatustext | Установите слова для отображения в статусе для подсчета персонажа | нить | characters: |
| CustombuttonClicked | Происходит после того, как нажата кнопка на пользовательской панели инструментов. | EventCallback | |
| CustomiMageUpload | Устанавливает пользовательский обработчик загрузки изображения | ||
| Направление | RTL или Ltr. Изменит направление текста, чтобы поддержать языки правого налего. По умолчанию в LTR. | нить | LTR |
| Ошибки | Ошибки, отображаемые пользователю, с использованием параметра ErrorCallback, где image_name , image_size и image_max_size будут заменены их соответствующими значениями, которые могут использоваться для настройки или интернационализации. | MarkdownErrormessages | |
| Укрытия | Массив имен значков, чтобы спрятаться. Можно использовать для скрытия конкретных значков, показанных по умолчанию, не полностью настраивая панель инструментов. | нить[] | «бок о бок», «полноэкранный» |
| Imageaccep | Список типов MIME, разделенный запятыми, используемый для проверки типа изображения перед загрузкой (Примечание: никогда не доверяйте клиенту, всегда проверяйте типы файлов на стороне сервера). По умолчанию изображение/PNG, Image/JPEG, Image/JPG, Image.gif. | нить | Image/png, image/jpeg, image/jpg, image.gif |
| ImageCsrftoken | Токен CSRF, чтобы включить с вызовом AJAX для загрузки изображения. Например, используется с бэкэнд Django. | нить | |
| ImageMaxSize | Максимальный размер изображения в байтах, проверенный перед загрузкой (Примечание: никогда не доверяйте клиенту, всегда проверяйте размер изображения на стороне сервера). По умолчанию до 1024 * 1024 * 2 (2 МБ). | длинный | 1024 * 1024 * 2 (2 МБ) |
| ImagePathabsolute | Если установить в True, будет обработать ImageURL из ImageUploadFunction и FilePath, возвращаемого из ImageUploadEnpoint как абсолютный, а не относительный путь, то есть не прививать window.location.origin к нему. | нить | |
| ImageTexts | Тексты, отображаемые пользователю (в основном на строке состояния) для функции импорта изображения, где image_name , image_size и image_max_size будут заменены их соответствующими значениями, которые могут использоваться для настройки или интернационализации. | MarkdownimageTexts | нулевой |
| ImageUploadAuthenticationschema | Если требуется аутентификация для API, присвоить этому свойству схема для использования. Bearer является общим. | нить | пустой |
| ImageUploadAuthenticationToken | Если требуется аутентификация для API, назначить этому свойству токен | нить | пустой |
| Полиночики | Если установить True, включите номера строк в редакторе. | буль | ЛОЖЬ |
| LinessTatustext | Установите слова, чтобы отобразить в статусе для подсчета строки | нить | lines: |
| Линейная | Если установить на false, отключите обертку линии. По умолчанию к истинному. | буль | ЛОЖЬ |
| Markdownurl | Установите URL для руководства по маркировке. | Ссылка на руководство Markdown | |
| Максхайт | Устанавливает фиксированную высоту для области композиции. Опция Minheight будет проигнорирован. Должна быть строка, содержащая допустимое значение CSS, например, «500px». По умолчанию неопределенные. | нить | |
| Maxuploadimagemessegize | Получает или устанавливает максимальный размер сообщения при загрузке файла. | длинный | 20 * 1024 |
| Минхейт | Устанавливает минимальную высоту для области композиции, прежде чем она начнет автоматическое выражение. Должна быть строка, содержащая допустимое значение CSS, например, «500px». По умолчанию "300px". | нить | 300px |
| Уроженцы | Включить (true) или отключить (false) проверку орфографии в редакторе | буль | Истинный |
| Заполнитель | Если установлено, отображает пользовательское сообщение заполнителя. | нить | нулевой |
| Segmentfetchtimeout | Получает или устанавливает время -аут сегмента при загрузке файла. | Времена | 1 мин |
| Showicons | Множество имен значков, чтобы показать. Можно использовать для показа конкретных значков, скрытых по умолчанию без полной настройки панели инструментов. | нить[] | 'code', 'таблица' |
| Переписка | Включить (true) или отключить (false) проверку орфографии в редакторе | буль | Истинный |
| Вкладка | Если установить, настройте размер вкладки. По умолчанию до 2. | инт | 2 |
| Тема | Переопределить тему. По умолчанию в EasyMde. | нить | EasyMde |
| Панель инструментов | [Необязательно] Получает или устанавливает содержание панели инструментов. | Renderfragment | |
| Наборы инструментов | Если установить на false, отключите советы кнопок на панели инструментов. По умолчанию к истинному. | буль | истинный |
| Uploadimage | Если установить в True, включите функциональность загрузки изображения, которые могут быть запускаются с помощью Drag-Drop, копирования вставки и через окно для просмотра (открытое, когда пользователь нажимает на значок загрузки-изображения). По умолчанию ложно. | буль | ЛОЖЬ |
| Ценить | Получает или устанавливает значение разметки. | нить | нулевой |
| Valuehtml | Получает HTML от значения разметки. | нить | нулевой |
| Wordsstatustext | Установите слова, чтобы отобразить в статусе для подсчета слова | нить | words: |
| Имя | Описание | Тип |
|---|---|---|
| Errorcallback | Функция обратного вызова, используемая для определения того, как отобразить сообщение об ошибке. По умолчанию (errormessage) => alert (errormessage). | Func <строка, задача> |
| ImageUploadChanged | Происходит каждый раз, когда выбранное изображение изменилось. | Func <fileChangeDeventargs, задача> |
| ImageUploaded | Возникает, когда отдельная загрузка изображения закончилась. | Func <fileedEventargs, задача> |
| ImageUploadendPoint | Конечная точка, где будут отправлены данные изображений, через асинхронный запрос POST. Сервер должен сохранить это изображение и вернуть ответ JSON. | нить |
| ImageUploadProgressed | Уведомляет о прогрессе изображения, записанного в поток назначения. | Func <fileProgressedEventargs, задача> |
| ImageUploadStarted | Происходит, когда началась загрузка отдельного изображения. | Func <filestartedeventargs, задача> |
| ValueChanged | Событие, которое происходит после того, как значение разметки изменилось. | EventCallback |
| Valuehtmlchanged | Событие, которое происходит после того, как значение разметки изменилось, и новый HTML -код доступен. | EventCallback |
Редактор Marckdown для Blazor может позаботиться о загрузке файла и добавить относительный код разметки в редакторе. Для этого свойства UploadImage должны установить на true . Кроме того, API загрузки должен быть указан в свойстве ImageUploadEndpoint . В некоторых случаях API требует аутентификации. Свойства ImageUploadAuthenticationSchema и ImageUploadAuthenticationToken позволяют вам использовать правильную схему и токен для использования при вызове.
Эти значения будут добавлены в запрос POST HttpClient в заголовке. Только если оба свойства не являются нулевыми, они будут добавлены в заголовок.
Если вы хотите лучше понять, как создать API для загрузки, я создал конкретный пост на Puresourcode.
Ниже приведены встроенные значки панели инструментов (только некоторые из которых включены по умолчанию), которые могут быть реорганизованы, как вам нравится. «Имя» - это название значка, упомянутый в JS. «Действие» - это либо функция, либо URL, чтобы открыть. «Класс» - это класс, данное значке. «Подсказка инструментов» - это небольшая всплывающая подсказка, которая появляется через атрибут title="" . Обратите внимание, что ярлыки добавляются bold и Bold tooltip action .
Кроме того, вы можете добавить разделитель между любыми значками, добавив "|" к массиву панели инструментов.
| Имя | Действие | Подсказка Сорт |
|---|---|---|
| смелый | Togglebold | Смелый FA FA BOLD |
| курсив | Toggleitalic | Курсив FA FA-ITLAIC |
| удар | Togglestrikethtrough | Удар Fa fa-strikethrough |
| заголовок | ToggleHeadingSmaller | Заголовок FA FA-He-He-Header |
| Руководитель | ToggleHeadingSmaller | Меньший заголовок FA FA-He-He-Header |
| заголовок | ToggleHeadingBigger | Большой заголовок FA FA-LG FA-HEAVER |
| Заголовок-1 | Toggleading1 | Большой заголовок FA FA-HEADER HEADER-1 |
| Заголовок-2 | Toggleading2 | Средний заголовок FA FA Header Header-2 |
| Заголовок-3 | Toggleading3 | Маленький заголовок FA FA FAHEDER HEADER-3 |
| код | togglecodeblock | Код FA FA-код |
| цитировать | Toggleblockquote | Цитировать FA FA-QUOTE-LEFT |
| Неупорядоченный список | ToggleunOrderedList | Общий список FA FA-LIST-UL |
| заказанный список | ToggleOrderedList | Пронумерованный список FA FA-LIST-OL |
| чистый блок | чистый блок | Чистый блок FA FA-ERASER |
| связь | притяжение | Создать ссылку FA FA-LINK |
| изображение | рисовать | Вставьте изображение FA FA-PICTURE-O |
| стол | притяжение | Вставьте таблицу FA FA-таблица |
| горизонтальный правил | Drawhorizontalrule | Вставьте горизонтальную линию FA FA-MINUS |
| предварительный просмотр | TogglePreview | ПРЕДУПРЕЖДЕНИЕ ПЕРЕКЛЮЧЕНИЯ fa fa-e-e-e-diSable |
| бок о бок | Togglesidebyside | Перевернуть бок о бок FA FA-Columns без DISABLE NO-MOBILE |
| полноэкранный | TogglefullScreen | Переверните полноэкран fa fa-arrows-alt без Di-disable no-mobile |
| гид | Эта ссылка | Руководство по уценке FA FA-Question-Circle |
EasyMde поставляется с массивом предопределенных сочетания клавиш, но они могут быть изменены с помощью опции конфигурации. Список по умолчанию заключается в следующем:
| Ярлык (Windows / Linux) | Ярлык (macO) | Действие |
|---|---|---|
| Ctrl- ' | Cmd- ' | "ToggleBlockquote" |
| Ctrl-B | CMD-B | "ToggleBold" |
| Ctrl-e | CMD-E | "CleanBlock" |
| Ctrl-H | CMD-H | "ToggleHeadingSmaller" |
| Ctrl-i | CMD-I. | "ToggeLitalic" |
| 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 | "DraitImage" |
| Ctrl-Alt-L | CMD-ALT-L | "ToggleOrderedList" |
| Shift-Ctrl-H | Shift-Cmd-H | "ToggleHeadingBigger" |
| F9 | F9 | "ToggleSideByside" |
| F11 | F11 | "ToggleFullScreen" |
Многие люди прислали мне тот же вопрос. Мои компоненты (Markdowneditor, DataTable, значок SVG и другие, которые вы найдете на моем GitHub), являются бесплатным программным обеспечением.
Я прошу вас внести свой вклад в проект одним из следующих способов:
Если вы не знаете, как это сделать или вы:
Затем вы можете купить одну из лицензии на поддержку, которую я создал. Есть разные цены. Сумма - это ваше решение. У вас есть полный список в Puresourcode Shop
Вклад дает вам:
| Имя компонента | Форум | Описание |
|---|---|---|
| DataTable для Blazor | Форум | DataTable Component для Blazor Webassembly и Blazor Server |
| Редактор Markdown для Blazor | Форум | Это редактор разметки для использования в Blazor. Он содержит живой предварительный просмотр, а также встроенное руководство по справедливости для пользователей. |
| Браузер обнаружил для Blazor | Форум | Браузер обнаружил для Blazor Webassembly и Blazor Server |
| Codesnipper для Blazor | Форум | Добавить фрагмент кода на страницы Blazor для 196 языков программирования с 243 стилями |
| Копировать в буфер обмена | Форум | Добавить кнопку для копирования текста в ClipBord |
| Значки SVG и флаги для Blazor | Форум | Библиотека с большим количеством значков SVG и флагов SVG для использования на страницах бритвы |
| Модальный диалог для Blazor | Форум | Простой модальный диалог для Blazor Webassembly |
| PSC.Extensions | Форум | Много функций для .net5 в пакете Nuget, который вы можете скачать бесплатно. Мы собрали в этом пакете функции для повседневной работы, чтобы помочь вам с претензиями, строками, перечислениями, датой и временем, выражениями ... |
| Перо для Blazor | Форум | Компонент Quill - это пользовательский повторный элемент управления, который позволяет нам легко потреблять перо и размещать несколько экземпляров на одну страницу в нашем приложении Blazor |
| Сегмент для Blazor | Форум | Это компонент сегмента для Blazor Web Assembly и Blazor Server |
| Вкладки для Blazor | Форум | Это компонент вкладок для Blazor Web Assembly и Blazor Server |
| Мировая карта для Blazor | Форум | Покажите карты мира с вашими данными |
