Format and Insert Elements

On this tab you see how to insert elements that format on paragraph level and how to add additional elements, such as tables.

Note: To see the table designer in action just insert a table and use the table tabs on the ribbon for more information.

Exercise

To work with the function you can so this:

Note: Netrix supports all HTML 4 elements. The demo shows just a few of these elements.

Alternatively, you can drag drop elements. But these elements appear at the caret position and do not span content. The formatting feature encapsulates the current paragraph automatically.

To remove a formatting, you have to select the region properly. Otherwise, the current word is taken automatically and the formatting tags are re-arranged left and right of the current word. Removing block formats (such as paragraphs) and inline formats behaves slightly different.

Code

The code shows how the ribbon buttons are treated in the demo:

void _buttonRemoveFormat_ExecuteEvent(object sender, ExecuteEventArgs e)
{
    EditorDocument.HtmlEditor.TextFormatting.RemoveParagraphFormat();
}
 
void _buttonRemoveInlineFormat_ExecuteEvent(object sender, ExecuteEventArgs e)
{
    EditorDocument.HtmlEditor.TextFormatting.RemoveInlineFormat();
}
 
void _galleryParagraphElementsHeader_ItemsSourceReady(object sender, EventArgs e)
{
    IUICollection headerItems = _galleryParagraphElementsHeader.ItemsSource;
    headerItems.Clear();
    // here we create the Header images on the fly 
    int[] fontmap = new int[] { 16, 14, 12, 10, 9, 8, 6 };
    Brush b = new SolidBrush(Color.Black);
    for (int i = 1; i < 7; i++)
    {
        Bitmap image = new Bitmap(32, 32);
        using (Graphics g = Graphics.FromImage(image))
        {
            System.Drawing.Font f = new Font(FontFamily.GenericSansSerif, fontmap[i]);
            string t = String.Format("H{0}", i);
            SizeF sf = g.MeasureString(t, f);
            g.DrawString(t, f, b, 16 - sf.Width / 2, 16 - sf.Height / 2);
            headerItems.Add(new GalleryItemPropertySet()
            {
                ItemImage = ribbon1.ConvertToUIImage(image),
                Label = String.Format("Heading{0}", i),
                CategoryID = 1
            });
        }
    }
}
 
void _galleryParagraphElementsHeader_ExecuteEvent(object sender, ExecuteEventArgs e)
{
    uint id = _galleryParagraphElementsHeader.SelectedItem;
    object item;
    // use the label to transport the enum's value we need to format a paragraph
    _galleryParagraphElementsHeader.ItemsSource.GetItem(id, out item);
    if (item != null)
    {
        HtmlFormat format = (HtmlFormat)Enum.Parse(typeof(HtmlFormat), ((GalleryItemPropertySet)item).Label);
        EditorDocument.HtmlEditor.TextFormatting.SetHtmlFormat(format);
    }
}
 
void _buttonParagraphElementsCode_ExecuteEvent(object sender, ExecuteEventArgs e)
{
    EditorDocument.HtmlEditor.Document.InsertCode();
}
 
void _buttonParagraphElementsPre_ExecuteEvent(object sender, ExecuteEventArgs e)
{
    EditorDocument.HtmlEditor.Document.InsertPreformatted();
}

The gallery images for header elements are created on-the-fly. This is just a suggestion, consider using pre-created images. The main method call is SetHtmlFormat here. If it is not formatting option, rather an element you have to insert, use the various Insert methods the HtmlDocument class provides, exposed by the Document property.