Inicio
PERENDERnew
Tema
Form
Componentes básicos
Visor de PDF
chartsnew
Instalación
line
Explorador de archivos
Texto enriquecido
Texto enriquecido
RichText
RichText

1. Demo AstrolRichText

Nota
En este ejemplo se implementan botones, modal y el componente cargando por lo que se recomienda ver las documentaciones correspondientes.
Si tiene bloqueadores de anuncios en su navegador puede afectar el comportamiento del componente.

Hello AstrolUi

@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;
 }
}

Parámetros que admite

  • ReadOnly (bool), define el componente se encuentra en modo de lectura (por defecto es false).
  • IsBottomToolbar (bool), define si la barra de opciones se muestra en la parte inferior (por defecto es false).
  • MinHeight (string), altura máxima (por defecto es de 150px).
  • MaxHeight (string), altura máxima (por defecto es de 200px).
  • Placeholder (string), texto a mostrar en el placeholder del componente (no requerido).
  • ToolbarClass (string), clase css a definir para la barra de opciones (no requerido).
  • ContentClass (string), clase css a definir para el contenido (no requerido).
  • FullRender (EventCallback), evento que notifica cuando el componente se ha cargado completamente (no requerido).
  • Configuración de la barra de opciones, todas de tipo (bool) y permiten desabilitarlas ya que todas por defecto true:
    • ShowFont
    • ShowSize
    • ShowBold
    • ShowItalic
    • ShowUnderline
    • ShowStrike
    • ShowColor
    • ShowBackground
    • ShowListOrdered
    • ShowListBullet
    • ShowIndentPlus
    • ShowIndentLess
    • ShowAlign
    • ShowHeader1
    • ShowHeader2
    • ShowBlockquote
    • ShowCodeBlock
    • ShowScriptSub
    • ShowScriptSuper
    • ShowFormula
    • ShowLink
    • ShowImage
    • ShowVideo

Métodos públicos

  • GetTextAsync, permite obtener el texto escrito en el componente (retorna un string).
  • GetHTMLAsync, permite obtener el HTML del componente (retorna un string).
  • GetContentAsync, permite obtener el contenido (JSON) del componente (retorna un string).
  • SetContentAsync, permite insertar un contenido (JSON) al componente (recibe un string).
  • SetHTMLAsync, permite insertar HTML al componente (recibe un string).
  • SetTextAsync, permite insertar texto al componente (recibe un string).
  • SetStatusAsync, permite establecer o modificar el estado del componente (recibe un bool).
  • InsertImageAsync, permite insertar una imagen al componente (recibe un string que representa la URL de la imagen).
  • InsertVideoAsync, permite insertar un video al componente (recibe un string que representa la URL del video).
© 2025 AstrolUI v8.0.4
Se ha producido un error no controlado. Recargar 🗙