Markdigライブラリを使用してライブプレビューのマークダウンエディタのコンテンツ

核融合Blazor Rich Text Editor component ブレイザーWYSIWYGとして使用することができますMarkdown editor . これは、コンテンツをマークダウン形式にすることができます.入力されたMarkdown構文コンテンツは、サードパーティのプラグインを使用してプレビューできます.
このブログのポストでは、我々はMarkdig サードパーティのライブラリ私たちのBlazorリッチテキストエディタのマークダウンエディタ(MDエディタ)のプレビューをプレビューする.
このブログでは次のトピックを取り上げます

Prerequisites

What is Markdig?

Creating a Blazor server application

Configure the Rich Text Editor’s Markdown editor

Add the Markdig library

Show LIVE preview

Resources

Conclusion

始めましょう!

必要条件

我々は、ブレザーサーバーサイドアプリケーションでアプリケーションをデモするつもりです.したがって、以下の必須条件が必要です.

Visual Studio 2019 .

.NET Core 3.0 以上.

Markdig .

何がMarkdigですか？

MarkDigは、マークダウンプレーンテキストを構文解析してHTML文字列に変換するための最速のサードパーティ製ライブラリです.
詳細についてはMarkdig ギタブリンク.

ブレザーサーバサイドアプリケーションの作成

最初に、Blather or Service - sideアプリケーションを作成し、SyncFusionを参照してSyncFusionのブレールサービスを構成しますGetting Started documentation ページ.

テキストエディタのマークダウンエディタ

SyncFusion BlazeリッチテキストエディタをMarkdownエディタとして機能させる

エディトモードをeditormodeとして設定します.マークダウン.

<SfRichTextEditor EditorMode="EditorMode.Markdown">
 </SfRichTextEditor>

次に、SaveIntervalを1に設定し、毎秒ValueChangeイベントを変換してトリガーします.

<SfRichTextEditor SaveInterval="1" EditorMode="EditorMode.Markdown" Height="100%" @bind-Value="@mdValue">
      ……
      …….
   </SfRichTextEditor>

SFFichTextTeditorのマークダウンエディターのための太字と斜体のような最も使用されるツールバーの項目を構成します.

private List<ToolbarItemModel> tools = new List<ToolbarItemModel>()
{
     new ToolbarItemModel() { Command = ToolbarCommand.Bold },
     new ToolbarItemModel() { Command = ToolbarCommand.Italic },
     new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
     new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
     new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
     new ToolbarItemModel() { Command = ToolbarCommand.Separator },
     new ToolbarItemModel() { Command = ToolbarCommand.Formats },
     new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
     new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
     new ToolbarItemModel() { Command = ToolbarCommand.Separator },
     new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
     new ToolbarItemModel() { Command = ToolbarCommand.Image },
     new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
     new ToolbarItemModel() { Command = ToolbarCommand.Separator },
     new ToolbarItemModel() { Command = ToolbarCommand.Undo },
     new ToolbarItemModel() { Command = ToolbarCommand.Redo }
 };

次に、Markdownエディタをレンダリングします.

<SfRichTextEditor SaveInterval="1" EditorMode="EditorMode.Markdown" Height="100%" @bind-Value="@mdValue">
   <RichTextEditorEvents ValueChange="onValueChange"></RichTextEditorEvents>
   <RichTextEditorToolbarSettings Items="@tools" Type="ToolbarType.MultiRow"></RichTextEditorToolbarSettings>
</SfRichTextEditor>

ツールバーのないマークダウンエディターをプレビューするには、右側に別のリッチテキストエディタをレンダリングします.

<SfRichTextEditor Readonly="true" Height="100%" @bind-Value="@htmlValue">
   <RichTextEditorToolbarSettings Enable="false"></RichTextEditorToolbarSettings>
</SfRichTextEditor>

ライブラリを追加する

マークdig名前空間をインポートするには、Markdig 示されるようにあなたのアプリケーションのnugetパッケージ.

dotnet add package Markdig --version 0.22.0

ライブプレビュー

リッチテキストエディターのマークダウンプレーンテキストをHTML文字列に変換します.次に、HTMLコンテンツをプレビューするために、結果として生じるHTML文字列を右側のリッチテキストエディタのMarkdownプレビューにバインドします.
次のコードを参照してください.

private MarkdownPipeline pipeline { get; set; }
 private string htmlValue { get; set; }
 protected override void OnInitialized()
 {
    pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
    this.htmlValue = Markdig.Markdown.ToHtml(mdValue, pipeline);
    base.OnInitialized();
  }

左側のリッチテキストエディターのValueChangeイベントで、MarkdownのプレーンテキストをHTML文字列に変換します.
次のコード例を参照してください.

private void onValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        if (args.Value == null)
        {
            this.htmlValue = null;
        }
        else
        {
            this.htmlValue = Markdig.Markdown.ToHtml(args.Value, pipeline);
        }
    }

出力

資源

あなたは、これから完全なプロジェクトをチェックアウトすることができますGitHub リポジトリ.

結論

私は今、それがどのように簡単にマークdigライブラリをsyncfusionRich Text Editor’s Markdown editor プレビューのテキストをプレビューします.
あなたがSyncFusionに新しい場合は、ダウンロードして我々のコントロールの機能を試してくださいfree trial . また、私たちを探索することができますonline demo アンドdocumentation .
あなたは私たちを介して私達に連絡することができますsupport forums , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!
この投稿が好きなら、次のようになります.

〔ブログ〕

〔ブログ〕

〔ブログ〕