Editor for WinForms | ComponentOne
In This Topic
    Edit Document
    In This Topic

    With Editor control, you can easily edit the entire XHTML document or specific fragments of the document. This topic discusses features that enable you to edit documents in C1Editor.

    Retrieve Text

    You can retrieve the unformatted text from a document using GetTextAsync method of the C1Editor class as illustrated in the following code.

    C#
    Copy Code 
    var text = await c1Editor1.GetTextAsync();
MessageBox.Show(text);

    Align text

    Alignment of the content in the paragraph is an important aspect in editing a document. By default, content is left aligned in the editor. It can be changed through the alignment options available, namely Left align, Right align and Center align in the Paragraph group on the EditorRibbon control. The image below shows these options.

    Alignment options

    The following image shows different alignments applied on text.

    Alignment options for Editor

    Replace an Element

    You can replace the content of a specific element of the document using ReplaceElementAsync method of the C1Editor class. It accepts a string and an Id of the HTML fragment as its parameters. The following code replaces the content in the element having 'head' as its Id.

    C#
    Copy Code 
    c1Editor1.ReplaceElementAsync(" <h1 id=\"head\">About Nikola Tesla</h1>", "head");

    Delete Specific Element

    You can delete a specific element from the document using RemoveElementAsync method of the C1Editor class. This method removes the element by its Id, tag or class name. The code below removes an HTML fragment with Id 'P1' from the document.

    C#
    Copy Code 
    c1Editor1.RemoveElementAsync("P1");

    Edit Table

    Editor allows you to insert a table at a specific location using InsertTableAtSelectionAsync method of the C1Editor class. This method accepts a string value to specify css class name, integer values for specifying number of rows and columns to be added in the table, and Boolean values to indicate presence/absence of header and footer as its parameters. The following code creates a table with three columns and two rows without header and footer at the location of the cursor.

    C#
    Copy Code 
    c1Editor1.InsertTableAtSelectionAsync(null, 3, 2, false, false);

    Further, the Editor supports multiple operations on table as listed below.

    Option Description
    Insert Column You can insert a new column in the table using InsertTableColumnAtSelectionAsync method of the C1Editor class. This method accepts a Boolean value as parameter. It adds a new column to the left of the current column, if the parameter is true as illustrated in the following code.
    C#
    Copy Code 
    c1Editor1.InsertTableColumnAtSelectionAsync(true);
    Insert Row You can insert a new row in the table using InsertTableRowAtSelectionAsync method of the C1Editor class. This method accepts a Boolean value as parameter. It adds a new row on the top of the current row, if the parameter value is true as illustrated in the following code.
    C#
    Copy Code 
    c1Editor1.InsertTableRowAtSelectionAsync(true);
    Delete Table You can remove the entire table using the RemoveTableAtSelectionAsync method of the C1Editor class as illustrated in the code below.
    C#
    Copy Code 
    c1Editor1.RemoveTableAtSelectionAsync();
    Delete Column You can delete the current column from the table using RemoveTableColumnAtSelectionAsync method of the C1Editor class as illustrated in the code below.
    C#
    Copy Code 
    c1Editor1.RemoveTableColumnAtSelectionAsync();
    Remove Row You can delete the current row using RemoveTableRowAtSelectionAsync method of the C1Editor class as illustrated in the code below.
    C#
    Copy Code 
    c1Editor1.RemoveTableAtSelectionAsync();

    Besides this, you can also insert a table, row or column in existing table and also remove them from the document selecting the options available in the dropdown list of the Table command under the Insert group of EditorRibbon. The image below shows all the options displayed on clicking the Table command dropdown.

    Insert table options

    The image below shows the dialog box that pops up on clicking Table option in Table command from Insert group on the EditorRibbon.

    Insert table dialog box

    Edit Lists

    Using lists, you can present neat and structured content. The lists can be either simple or nested. It can be added through code using InsertListAsync method of the C1Editor class. The following code illustrates inserting a nested list with disc bullets.

    C#
    Copy Code 
    c1Editor1.InsertListAsync("Disc", new string[] { "Europe", "Asia",
    "<ul><li>India</li>|style=\"list-style-type:none;\"",
    "<ul><li>Delhi</li><li>Maharashtra</li></ul>|style=\"list-style-type:none;\"", "</ul>" });
    Note: In the above code snippet, the HTML code fragment is used to create nested child items in the list.

    The image below is output of the above code snippet.

    Lists available on Editor Output

    Besides this, you can also create ordered and unordered lists using bullets and numbering option available in the Paragraph group of the EditorRibbon during runtime as shown in the following image.

    Bullets and Numbering