BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
이것은 .NET8이있는 Blazor WebAssembly 및 Blazor 서버의 Markdown 편집기 구성 요소입니다. 구성 요소는 EasyMDE 버전 1.0.x를 기반으로 편집기를 만듭니다. 업데이트와 변경 사항을 제어하고 싶었 기 때문에 JavaScript 라이브러리의 저장소를 만들기로 결정했습니다. 구성 요소는 JavaScript 라이브러리 주변의 래퍼이며 Blazor 응용 프로그램에서 Markdown 편집기를 사용할 수있는 Blazor 구성 요소입니다.
자세한 내용을 보려면이 구성 요소를 돕으려면 여기에서 만든 게시물을 방문하십시오.
Markdown 편집기 온라인 시도 (업로드가 활성화되지 않음)
편집기를 _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 도 필요합니다. 구성 요소에는 Easy Markdown 편집기 스크립트 버전 1.0.x가 포함되어 있으며 직접 유지 관리합니다. 프로젝트 에이 스크립트를 추가 할 수 있지만 구성 요소에서 스크립트를 사용하면 잘 작동하고 모든 기능이 테스트됩니다.
CSS markdowneditor.css att , note , tip , warn 및 video 와 같은 Markdown 편집기에 추가 된 새로운 태그의 스타일이 포함되어 있습니다.
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 편집기입니다. 이것은이 저장소의 데모의 스크린 샷입니다.
Markdown 편집기에 다음 코드를 추가하십시오
<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;
}
}
Tag MarkdownEditor 에서 하나 이상의 MarkdownToolbarButton 포함 된 새 탭 Toolbar 추가합니다.
각 MarkdownToolbarButton 기본 Action 중 하나 (아래 표 참조) 또는 웹 사이트 링크와 같은 사용자 정의 값을 가질 수 있습니다. MarkdownToolbarButton 앞에 수직선을 표시하려면 MarkdownToolbarButton 에 속성 Separator 추가하십시오.
마찬가지로, 응용 프로그램이 API에서 값을 읽어야하고 시간이 걸리기 때문에 첫 번째 Init 이후 Markdown 편집기의 내용을 새로 고치려고합니다. 이를 위해서는 MarkdownEditor 에 ref 추가 한 다음 다음 코드에서와 같이 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 편집기에 추가하려면 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는 기능이 아닙니다
따라서 다음 단락에서 설명한대로 스크립트를 새 스크립트로 업그레이드하는 것이 좋습니다.
10.9.1의 새 버전의 Mermaid를 사용하면 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 .SequenceAgram Alice- >> John : 안녕하세요 John, 어떻게 지내세요? 존->> 앨리스 : 대단해! Alice-) John : 나중에 만나요!
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.
간트 제목 Agantt 다이어그램 날짜 format yyyy-mm-dd 섹션 섹션 A 과제 : A1, 2014-01-01, 30D 또 다른 작업 : A1, 20D 섹션 SEC의 다른 작업 : 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 : place order ||-| {line-item : continats customer} | .. | {delivery-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에는 하이라이트 메모, 팁, 경고 또는주의 메시지와 같은 페이지에 유용한 정보가 표시되는 몇 가지 누락 된 태그가 있습니다. 그래서이 Markdown 편집기에 추가했습니다. 이 구현 결과의 예는 다음 스크린 샷에 있습니다.
메시지를 추가하려면 편집기의 도구 모음에서 아이콘을 클릭하거나 해당 명령을 추가하십시오.
| 명령 | 색상 | 설명 |
|---|---|---|
| ```at | 빨간색 | 주의 메시지를 표시하십시오 |
| `````참고 | 하늘빛 | 문서에 메모를 추가하십시오 |
| ````팁 | 녹색 | 팁 메시지가 표시됩니다 |
| ````경고 | 주황색 | 이것은 경고 메시지입니다 |
Markdown 편집기 구성 요소에는 alert.css 라는 CSS 가 있으며 markdowneditor.css 를 추가하지 않으면이 라인으로 index.html 에 추가 할 수 있습니다.
<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
```
Blazor의 Markdown 편집기에는 JavaScript 버전의 모든 기능을 매핑하기위한 속성 컬렉션이 있습니다. 이 저장소에는 두 가지 프로젝트가 있습니다.
Index.razor 기본 기능 및 Upload.razor 와 함께 구성 요소를 사용하는 방법을 보여줍니다. 이미지 업로드에 대처하는 방법을 보여줍니다. 업로드를 테스트하려면 Project MarkdownEditorDemo.Api 실행되어야합니다| 이름 | 설명 | 유형 | 기본 |
|---|---|---|---|
| autoSaveEnabled | 자동 저장의 설정을 가져 오거나 설정합니다. 쓰여진 텍스트를 저장하고 앞으로 다시로드 할 것입니다. 포함 된 양식이 제출 될 때 텍스트를 잊어 버릴 것입니다. Markdown 편집기를위한 고유 ID를 선택하는 것이 좋습니다. | 부 | 거짓 |
| autosaveid | 자동 저장 식별자를 가져 오거나 설정합니다. 구성 요소가 자동 저장 될 수 있도록 고유 문자열 식별자를 설정해야합니다. 웹 사이트의 다른 곳에서 구성 요소의 다른 인스턴스와 이것을 분리하는 것. | 끈 | 기본값 |
| autosavedelay | 밀리 초로 저장 사이의 지연. 기본값은 10000 (10)까지. | int | 10000 (10S) |
| autosavesubmitdelay | 양식 제출이 실패하고 텍스트를 밀리 초로 저장하기 전에 지연됩니다. | int | 5000 (5S) |
| autoSavetext | AutoSave 용 텍스트 | 끈 | 자율적 : |
| AutoSaveTimeFormatLocale | DateTime의 형식을 표시하도록 설정하십시오. 자세한 내용은 JavaScript Documentation DateTimeFormat 인스턴스를 참조하십시오 | 끈 | en-us |
| AutoSaveTimeFormatyear | 올해의 형식을 설정하십시오 | 끈 | 숫자 |
| autoSavetimeformatmonth | 달의 형식을 설정하십시오 | 끈 | 긴 |
| AutoSavetimeformatday | 오늘의 형식을 설정하십시오 | 끈 | 2 자리 |
| AutoSavetimeformathour | 시간의 형식을 설정하십시오 | 끈 | 2 자리 |
| autoSavetimeformatminute | 분의 형식을 설정하십시오 | 끈 | 2 자리 |
| AutoDownloadFontAwesome | True로 설정되면 Force 다운로드 Font Awesome (아이콘에 사용). False로 설정된 경우 다운로드를 방지합니다. | 부? | 널 |
| 문자 statustext | 캐릭터 계산을 위해 상태 바에 표시 할 단어를 설정하십시오. | 끈 | characters: |
| CustomButtonClicked | 사용자 정의 도구 모음 버튼을 클릭 한 후에 발생합니다. | EventCallback | |
| CustomImageUpload | 사용자 정의 이미지 업로드 핸들러를 설정합니다 | ||
| 방향 | RTL 또는 LTR. 텍스트 방향을 변경하여 오른쪽에서 왼쪽 언어를 지원합니다. 기본값은 ltr로 나타납니다. | 끈 | ltr |
| errormessages | image_name , image_size 및 im | MarkdownerRormessages | |
| 히니콘 | 숨길 아이콘 이름의 배열. 도구 모음을 완전히 사용자 정의하지 않고 기본적으로 표시된 특정 아이콘을 숨기는 데 사용할 수 있습니다. | 끈[] | '나란히', '전체 화면' |
| imageaccep | 업로드 전에 이미지 유형을 확인하는 데 사용되는 쉼표로 구분 된 MIME 형 목록 (참고 : 클라이언트를 신뢰하지 않음 항상 서버 측에서 파일 유형을 확인하십시오). 기본값으로 이미지/png, 이미지/jpeg, image/jpg, image.gif. | 끈 | Image/PNG, Image/JPEG, Image/JPG, image.gif |
| imagecsrftoken | CSRF 토큰을 AJAX에 포함시켜 이미지를 업로드합니다. 예를 들어 Django Backend와 함께 사용됩니다. | 끈 | |
| imageMaxsize | 바이트의 최대 이미지 크기, 업로드 전에 확인했습니다 (참고 : 클라이언트를 신뢰하지 말고 항상 서버 측에서 이미지 크기를 확인하십시오). 기본값 1024 * 1024 * 2 (2MB)까지. | 긴 | 1024 * 1024 * 2 (2MB) |
| ImagePathabsolute | true로 설정되면 ImageUploadfunction 에서 imageUrl을 처리 하고 Im | 끈 | |
| imageTexts | Image_Name , Image_Size 및 Image_Max_Size 가 사용자 정의 또는 국제화에 사용할 수있는 각 값으로 대체되는 가져 오기 이미지 기능에 대해 사용자 (주로 상태 표시 줄)에 표시된 텍스트가 표시됩니다. | MarkDownImagetexts | 널 |
| ImageUploadauthenticationschema | API에 대한 인증이 필요한 경우이 속성에 사용할 스키마에 할당하십시오. Bearer 일반적인 것입니다. | 끈 | 비어 있는 |
| ImageUploadAuthenticationToken | API에 대한 인증이 필요한 경우이 속성에 토큰을 할당하십시오. | 끈 | 비어 있는 |
| 리네 넘버 | true로 설정된 경우 편집기에서 줄 번호를 활성화하십시오. | 부 | 거짓 |
| linesstatustext | 라인 계산을 위해 상태 바에 표시 할 단어를 설정하십시오. | 끈 | lines: |
| 라인 트래핑 | False로 설정된 경우 선 포장을 비활성화하십시오. 기본값은 참으로. | 부 | 거짓 |
| Markdownurl | Markdown 가이드의 URL을 설정하십시오. | 마크 다운 가이드 링크 | |
| Maxheight | 구성 영역의 고정 높이를 설정합니다. MinHeight 옵션은 무시됩니다. "500px"와 같은 유효한 CSS 값을 포함하는 문자열이어야합니다. 기본값은 정의되지 않았습니다. | 끈 | |
| maxuploadimagemessagesize | 파일을 업로드 할 때 최대 메시지 크기를 가져 오거나 설정합니다. | 긴 | 20 * 1024 |
| MinHeight | 자동 성장을 시작하기 전에 조성 영역의 최소 높이를 설정합니다. "500px"와 같은 유효한 CSS 값을 포함하는 문자열이어야합니다. 기본값은 "300px"입니다. | 끈 | 300px |
| 원주민 | 편집자의 권리 점검을 활성화 또는 비활성화 (False) | 부 | 진실 |
| 자리 표시 자 | 설정된 경우 사용자 정의 자리 표시 자 메시지가 표시됩니다. | 끈 | 널 |
| segmentfetchTimeout | 파일을 업로드 할 때 세그먼트 페치 타임 아웃을 가져 오거나 설정합니다. | 시간대 | 1 분 |
| Showicons | 표시 할 아이콘 이름의 배열. 도구 모음을 완전히 사용자 정의하지 않고 기본적으로 숨겨진 특정 아이콘을 표시하는 데 사용할 수 있습니다. | 끈[] | '코드', '테이블' |
| Sportchecker | 편집자의 권리 점검을 활성화 또는 비활성화 (False) | 부 | 진실 |
| 탭 크기 | 설정된 경우 탭 크기를 사용자 정의하십시오. 기본값은 2까지. | int | 2 |
| 주제 | 테마를 무시하십시오. 기본값은 Easymde입니다. | 끈 | Easymde |
| 도구 모음 | [선택 사항] 도구 모음의 내용을 가져 오거나 설정합니다. | 렌더링 | |
| 도구 바트 | False로 설정된 경우 도구 모음 버튼 팁을 비활성화하십시오. 기본값은 참으로. | 부 | 진실 |
| 업로드 | true로 설정된 경우 Drag-Drop, Copy-Paste 및 브라우즈 파일 창을 통해 트리거 할 수있는 이미지 업로드 기능을 활성화합니다 (사용자가 업로드 이미지 아이콘을 클릭 할 때 열면). 기본값으로 거짓. | 부 | 거짓 |
| 값 | 마크 다운 값을 가져 오거나 설정합니다. | 끈 | 널 |
| valuehtml | 마크 다운 값에서 HTML을 가져옵니다. | 끈 | 널 |
| WordsStatUstext | 단어 계산을 위해 상태 바에 표시 할 단어를 설정하십시오. | 끈 | words: |
| 이름 | 설명 | 유형 |
|---|---|---|
| ErrorCallback | 오류 메시지를 표시하는 방법을 정의하는 데 사용되는 콜백 함수. 기본값으로 (errormessage) => alert (errormessage). | func <문자열, 작업> |
| ImageUploadChanged | 선택한 이미지가 변경 될 때마다 발생합니다. | func <filechangedeventargs, 작업> |
| imageUloadended | 개별 이미지 업로드가 종료 될 때 발생합니다. | func <filedendedEventArgs, 작업> |
| imageUploadendPoint | 비동기 사후 요청을 통해 이미지 데이터가 전송되는 엔드 포인트. 서버는이 이미지를 저장하고 JSON 응답을 반환해야합니다. | 끈 |
| imageUploadprogressed | 대상 스트림에 기록되는 이미지의 진행 상황을 알립니다. | func <fileProgressedEventArgs, 작업> |
| ImageUploadStarted | 개별 이미지 업로드가 시작되었을 때 발생합니다. | func <filestartedeventargs, 작업> |
| valuechanged | Markdown 값이 변경된 후 발생하는 이벤트. | EventCallback |
| valuehtmlChanged | Markdown 값이 변경되고 새로운 HTML 코드가 변경된 후 발생하는 이벤트가 있습니다. | EventCallback |
Blazor의 Markdown 편집기는 파일 업로드를 처리하고 편집기에 상대 Markdown 코드를 추가 할 수 있습니다. 이를 위해서는 속성 UploadImage true 로 설정해야합니다. 또한 업로드 API는 속성 ImageUploadEndpoint 에 지정되어야합니다. 경우에 따라 API에는 인증이 필요합니다. 속성 ImageUploadAuthenticationSchema 및 ImageUploadAuthenticationToken 사용하면 통화에서 사용할 올바른 스키마 및 토큰을 전달할 수 있습니다.
이러한 값은 헤더의 HttpClient POST 요청에 추가됩니다. 두 속성이 모두 null이 아닌 경우에만 헤더에 추가됩니다.
업로드를 위해 API를 만드는 방법을 더 잘 이해하려면 Puresourcecode에 대한 특정 게시물을 만들었습니다.
아래는 내장 도구 모음 아이콘 (일부만 기본적으로 활성화)이며, 원하는대로 재구성 할 수 있습니다. "이름"은 JS에서 참조 된 아이콘의 이름입니다. "Action"은 기능이거나 열릴 URL입니다. "클래스"는 아이콘에 주어진 클래스입니다. "Tooltip"은 title="" 속성을 통해 나타나는 작은 툴팁입니다. 바로 가기 힌트는 자동으로 추가되며 지정된 동작이 지정된 경우 지정된 동작을 반영합니다 (즉, action 값이 bold 설정된 값과 tooltip 의 Bold 설정된 최종 텍스트는 "Bold (Ctrl-B)")).
또한 "|" 추가하여 아이콘 사이에 분리기를 추가 할 수 있습니다. 도구 모음 어레이에.
| 이름 | 행동 | 툴팁 수업 |
|---|---|---|
| 용감한 | 토글 볼드 | 용감한 fa-bold |
| 이탤릭체 | 토글 이탈리아 | 이탤릭체 fa fa-italic |
| strikethrough | Togglestrikethrough | strikethrough fa fa-strikethrough |
| 표제 | ToggleHeadingsMaller | 표제 FA 헤더 |
| 제목 스모너 | ToggleHeadingsMaller | 더 작은 제목 FA 헤더 |
| 제목 기원 | ToggleHeadingBigger | 더 큰 제목 FA FA-LG FA 헤더 |
| 1 | 토글 헤드 링 1 | 큰 제목 FA FA 헤더 헤더 -1 |
| 제목 2 | 토글 헤드링 2 | 중간 제목 FA FA 헤더 헤더 -2 |
| 제목 -3 | 토글 헤드 딩 3 | 작은 제목 FA 헤더 헤더 -3 |
| 암호 | ToggleCodeBlock | 암호 FA FA 코드 |
| 인용하다 | ToggleBlockquote | 인용하다 fa fa-quote-left |
| 정렬되지 않은 목록 | ToggleUnderedList | 일반 목록 FA FA-List-ul |
| 주문 목록 | 토글 리더리스트 | 번호가 매겨진 목록 FA FA-LIST-OL |
| 청정 블록 | 클린 블록 | 깨끗한 블록 Fa Fa-eraser |
| 링크 | 드로 링크 | 링크를 만듭니다 FA FA-Link |
| 영상 | DrawImage | 이미지 삽입 FA FA-PICTURE-O |
| 테이블 | 그림자 | 테이블을 삽입하십시오 fa fa-table |
| 수평 규칙 | Drawhorizontalrule | 수평선을 삽입하십시오 FA FA-MINUS |
| 시사 | TogglePreview | 토글 미리보기 fa-eye dissable |
| 나란히 | 토글 사이드 | 나란히 전환하십시오 FA FA-COLUMNS NO-DISABLE NO-MOBILE |
| 전체 화면 | 토글 화면 | 전체 화면 토글 fa fa-arrows- 앨트-비 디스티블 노동자 |
| 가이드 | 이 링크 | 마크 다운 가이드 fa fa-question-circle |
EasyMDE에는 사전 정의 된 키보드 단축키가 제공되지만 구성 옵션으로 변경 될 수 있습니다. 기본값 목록은 다음과 같습니다.
| 바로 가기 (Windows / Linux) | 바로 가기 (MacOS) | 행동 |
|---|---|---|
| Ctrl 키-' | CMD- ' | "ToggleBlockquote" |
| Ctrl-B | CMD-B | "토글 볼드" |
| Ctrl-e | CMD-E | "클린 블록" |
| Ctrl-H | CMD-H | "ToggleHeadingsMaller" |
| ctrl-i | CMD-I | "토글 이탈리아" |
| Ctrl-K | CMD-K | "DrawLink" |
| Ctrl-L | CMD-L | "ToggleUnderedList" |
| 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 | "토글러드리스트" |
| Shift-Ctrl-H | Shift-CMD-H | "ToggleHeadingBigger" |
| F9 | F9 | "TogglesideByside" |
| F11 | F11 | "토글 화면" |
많은 사람들이 저에게 같은 질문을 보냈습니다. 내 구성 요소 (MarkdownEditor, DataTable, SVG 아이콘 및 내 GitHub에서 찾은 다른 사람들)는 프리웨어입니다.
다음과 같은 방법 중 하나로 프로젝트에 기여하도록 요청합니다.
방법을 모른다면 :
그런 다음 내가 만든 지원 라이센스 중 하나를 구입할 수 있습니다. 다른 가격이 있습니다. 금액은 귀하의 결정입니다. Puresourcecode Shop에 전체 목록이 있습니다
기여는 다음과 같습니다.
| 구성 요소 이름 | 법정 | 설명 |
|---|---|---|
| 블레이저를위한 데이터 가능 | 법정 | Blazor WebAssembly 및 Blazor Server 용 데이터 가능한 구성 요소 |
| Blazor의 Markdown 편집기 | 법정 | 이것은 Blazor에서 사용하기위한 Markdown 편집기입니다. 여기에는 라이브 미리보기와 사용자를위한 임베드 도움 가이드가 포함되어 있습니다. |
| 브라우저가 블레이저를 감지합니다 | 법정 | Blazor WebAssembly 및 Blazor Server의 브라우저 감지 |
| Blazor를위한 Codesnipper | 법정 | 243 개의 스타일의 196 개의 프로그래밍 언어에 대한 Blazor 페이지에 코드 스 니펫 추가 |
| 클립 보드에 복사하십시오 | 법정 | 클립 보드에서 텍스트를 복사하려면 버튼을 추가하십시오 |
| Blazor의 SVG 아이콘 및 깃발 | 법정 | 면도기 페이지에 사용할 SVG 아이콘과 SVG 플래그가 많은 라이브러리 |
| 블레이저에 대한 모달 대화 | 법정 | Blazor WebAssembly에 대한 간단한 모달 대화 |
| psc.extensions | 법정 | 무료로 다운로드 할 수있는 Nuget 패키지의 .NET5에 대한 많은 기능. 우리는이 패키지 기능에서 일상적인 작업을 수집하여 클레임, 문자열, 열거, 날짜 및 시간, 표현을 도와줍니다. |
| 블레이저를위한 퀼 | 법정 | 퀼 구성 요소는 퀼을 쉽게 소비하고 블레이저 애플리케이션의 단일 페이지에 여러 인스턴스를 배치 할 수있는 사용자 정의 재사용 가능한 컨트롤입니다. |
| 블레이저를위한 세그먼트 | 법정 | 이것은 Blazor Web Assembly 및 Blazor Server의 세그먼트 구성 요소입니다. |
| Blazor의 탭 | 법정 | 이것은 Blazor Web Assembly 및 Blazor Server의 탭 구성 요소입니다. |
| Blazor를위한 WorldMap | 법정 | 데이터와 함께 세계지도를 표시하십시오 |
