@using Astrol.Entities.Basic.UI

@using Astrol.Component.RichText

@using Astrol.Component.Basic.Button

@using Astrol.Component.Basic.Modal

@using Astrol.Component.Basic.Load

<Load Status="_load" />

<AstrolModal Title="HTML content" Status="_statusModal">

 <div style="text-align:left; padding:20px;">

 @((MarkupString) _htmlContent)

 </div>

</AstrolModal>

<div style="padding:5px;">

 <AstrolRichText @ref="_astrolRichText"

 MaxHeight="220px"

 Placeholder="Enter your text here." />

 <AstrolButton OnClick="GetHTML" 

 Style="AstrolStyle.Blue"

 Text="Get HTML" 

 Icon="astrol-code-1" />

</div>

@code {

 private string _htmlContent = "";

 private bool _statusModal = false;

 private bool _load = false;

 private AstrolRichText? _astrolRichText;

 public async Task GetHTML()

 {

 _load = true;

 if (_astrolRichText != null)

 _htmlContent = await _astrolRichText.GetHTMLAsync();

 _statusModal = true;

 _load = false;

 }

}

Supported parameters

• ReadOnly (bool), defines whether the component is in read-only mode (default is false).
• IsBottomToolbar (bool), defines if the options bar is displayed at the bottom (default is false).
• MinHeight (string), maximum height (default is 150px).
• MaxHeight (string), maximum height (default is 200px).
• Placeholder (string), text to display in the component's placeholder (not required).
• ToolbarClass (string), CSS class to define for the options bar (not required).
• ContentClass (string), CSS class to define for the content (not required).
• FullRender (EventCallback), event that notifies when the component has loaded completely (not required).
• Configuration of the options bar, all of type (bool), allowing them to be disabled as all are set to true by default:
  • ShowFont
  • ShowSize
  • ShowBold
  • ShowItalic
  • ShowUnderline
  • ShowStrike
  • ShowColor
  • ShowBackground
  • ShowListOrdered
  • ShowListBullet
  • ShowIndentPlus
  • ShowIndentLess
  • ShowAlign
  • ShowHeader1
  • ShowHeader2
  • ShowBlockquote
  • ShowCodeBlock
  • ShowScriptSub
  • ShowScriptSuper
  • ShowFormula
  • ShowLink
  • ShowImage
  • ShowVideo

Public methods

• GetTextAsync, allows you to retrieve the text written in the component (returns a string).
• GetHTMLAsync, allows you to retrieve the HTML content of the component (returns a string).
• GetContentAsync, allows you to retrieve the content (JSON) of the component (returns a string).
• SetContentAsync, allows you to insert content (JSON) into the component (takes a string as input).
• SetHTMLAsync, allows you to insert HTML into the component (takes a string as input).
• SetTextAsync, allows you to insert text into the component (takes a string as input).
• SetStatusAsync, allows you to set or modify the state of the component (takes a bool as input).
• InsertImageAsync, allows you to insert an image into the component (takes a string representing the image URL).
• InsertVideoAsync, allows you to insert a video into the component (takes a string representing the video URL).