Skip to main content

Operate rich text fields

This section explains how to operate rich text fields.

Note

When you edit rich text in the application UI, it is stored in both text and HTML format, but the IModel.GetRichTextField method is an API that simply retrieves the data stored in the model. When setting data with the IModel.SetRichTextField method, set both "text" and "html". Note that the "xaml" format is for compatibility and is a deprecated format, so try not to use it as much as possible.

Reference

Set value​

Use the SetRichTextField method of the IModel object to set the value of the rich text field. Rich text fields can have multiple values. When you edit them in the application, they are set in HTML and text format.

public void SetRichTextField(ICommandContext c, ICommandParams p)
{
    IModel model = c.App.Workspace.CurrentModel;

    //Add simple text
    var text = "aa\nbb";
    model.SetRichTextField("Field1", text);

    //Add HTML
    var htmlText = @"<html>....</html>";
    model.SetRichTextField("Field1", htmlText, "html");
}

Set an image​

To set an image in a rich text field, convert the image byte array to a string, and set the value defined in the string to the rich text field using the SetRichTextField method of the IModel object.

using System.IO;
using System.Drawing;

public void SetImageToRichText(ICommandContext c, ICommandParams p)
{
    //Read the specified file into a byte array.
    var filePath = c.App.Window.UI.ShowOpenFileDialog("Open", "Image Files|*.png");
    if (filePath == null)
    {
        return;
    }
    var bytes = File.ReadAllBytes(filePath);

    //Convert the read byte array into a BASE64 binary string.
    var base64 = System.Convert.ToBase64String(bytes);

    //Convert the read byte array into an Image to get the image width and height.
    var stream = new MemoryStream(bytes);
    var image = Image.FromStream(stream);

    //Define the HTML format value using the converted BASE64 binary string and the width and height of the Image.
    var htmlText = $"<body><p><img width=\"{image.Size.Width}\" height=\"{image.Size.Height}\" src=\"data:image/png;base64,{base64}\"/></p></body>";

    //Set the value of the rich text field of the selected model.
    IModel model = c.App.Workspace.CurrentModel;
    model.SetRichTextField("Field1", htmlText, "html");
}
info
  • Refers to System.IO when reading the specified file into a byte array or converting the byte array into stream format.
  • Refers to System.Drawing when converting a stream format file into an image.

Get value​

To get the rich text field value of a model, use the GetRichTextField method of the IModel object.

public void GetRichTextField(ICommandContext c, ICommandParams p)
{
    IModel model = c.App.Workspace.CurrentModel;

    //Get simple text
    var text = model.GetRichTextField("Field1", "text");

    //Get HTML
    var html = model.GetRichTextField("Field1", "html");

    //...
}

Get image​

To get an image from a rich text field, extract the image part of the string from the rich text field value obtained by the GetRichTextField method of the IModel object, and convert the string to a byte array.

using AngleSharp.Html.Parser;

public void GetImageFromRichText(ICommandContext c, ICommandParams p)
{
    //Get the rich text field value of the selected model.
    IModel model = c.App.Workspace.CurrentModel;
    var htmlText = model.GetRichTextField("Field1", "html");

    //Parse HTML and extract img tags.
    var htmlDocument = new HtmlParser().ParseDocument(htmlText);
    var imgElement = htmlDocument.GetElementsByTagName("img").FirstOrDefault();
    if (imgElement == null)
    {
        return;
    }

    //Get the BASE64 binary string from the extracted img tag.
    //The src attribute of the extracted img tag is "data:image/png;base64,~",
    //and the actual BASE64 binary string is the string after ",".
    var srcAttribute = imgElement.GetAttribute("src");
    var base64 = srcAttribute.Substring(srcAttribute.IndexOf(",") + 1);

    //Convert the obtained BASE64 binary string to a byte array.
    var bytes = System.Convert.FromBase64String(base64);

    //...
}
info
  • When parsing HTML, refer to AngleSharp.Html.Parser.

Get the format​

To get the rich text format stored in the field, use the GetRichTextFieldFormats method of the IModel object.

public void GetRichTextFieldFormats(ICommandContext c, ICommandParams p)
{
    IModel model = c.App.Workspace.CurrentModel;

    IEnumerable<string> formats = model.GetRichTextFieldFormats("Field1");

    //...
}
Last updated on