Implementing Syntax Editors (EditControl)

This skill guides the implementation of Syncfusion's EditControl, a powerful text editor control for creating interactive code editor applications with Visual Studio-like features including syntax highlighting, IntelliSense, code outlining, and comprehensive editing capabilities.

When to Use This Skill

Use this skill when you need to:

Create a code editor application with syntax highlighting for popular languages
Build a text editor with Visual Studio-like editing features
Implement syntax-aware code editing with IntelliSense support
Add code outlining and folding capabilities to text editors
Create custom language configurations for specialized syntax highlighting
Build source code viewers or editors for multiple programming languages
Implement advanced text editing with clipboard operations and undo/redo
Add find and replace dialogs to text editing applications
Create split-view code editors for viewing multiple sections simultaneously
Export or print code with syntax highlighting preserved
Implement auto-completion and auto-correction in text editors
Build applications requiring line numbering, bookmarks, and code navigation
Create text editors with rectangular block selection like Visual Studio

Component Overview

Control:

EditControl

Namespace:

Syncfusion.Windows.Forms.Edit

Assemblies Required:

```
Syncfusion.Edit.Windows.dll
```
(primary)
```
Syncfusion.Tools.Windows.dll
```
```
Syncfusion.Shared.Base.dll
```

Key Capabilities

The EditControl provides comprehensive code editing features:

Syntax Highlighting: Built-in support for 12+ languages (C#, VB.NET, XML, HTML, Java, SQL, PowerShell, JavaScript, VBScript, Delphi, C, Text) plus custom language configuration via XML
Editing Features: Clipboard operations, unlimited undo/redo, drag-and-drop, normal and rectangular block selection, change tracking with line modification markers
IntelliSense: Auto-complete with predefined data, auto-correct for common typos, context tooltips for collapsed code blocks, custom IntelliSense popup
Code Outlining: Expand/collapse code blocks with configurable outlining regions, bracket matching, collapsible sections
Text Visualization: Line numbers, word wrap, current line highlighting, content dividers, underline styles (solid/dash/wave/dot), bookmark and custom indicators
Navigation: Character, word, line, page, and document-level navigation with extensive API
Find & Replace: Built-in dialogs with Visual Studio-like search and replace capabilities
File Operations: Create, open, save with encoding support, export to XML/RTF/HTML, print with formatting
Advanced Features: Split views for viewing multiple document sections, status bar with line/column/caret tracking, single-line mode for TextBox-like behavior, customizable shortcut keys
Globalization: Complete localization support, RTL (right-to-left) text layout
Events: Comprehensive event model for document changes, selection, navigation, and user interactions

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When you need to:

Install and reference EditControl assemblies
Create EditControl via designer or code
Configure basic properties (size, border, dock)
Load initial content into the editor
Set up a basic code editor application

Syntax Highlighting

📄 Read: references/syntax-highlighting.md

When you need to:

Apply built-in syntax highlighting for C#, VB.NET, XML, HTML, Java, SQL, PowerShell, JavaScript, etc.
Use
```
ApplyConfiguration()
```
with
```
KnownLanguages
```
enum
Create custom language configurations using XML
Define lexems, formats, and code coloring rules
Configure language-specific syntax elements
Handle multiple language types in one application

Editing Features

📄 Read: references/editing-features.md

When you need to:

Implement clipboard operations (Cut, Copy, Paste)
Configure unlimited undo/redo functionality
Enable normal or rectangular block selection modes
Support drag-and-drop text editing
Add block indent and outdent capabilities
Display line modification markers for change tracking
Customize the context menu for editing operations

IntelliSense Features

📄 Read: references/intellisense.md

When you need to:

Configure auto-complete with predefined data sources
Enable auto-correct for common typos and misspellings
Display context tooltips for collapsed code
Create custom IntelliSense popups
Handle IntelliSense events and user interactions
Customize IntelliSense item appearance and behavior

Text Visualization

📄 Read: references/text-visualization.md

When you need to:

Display line numbers with customization
Enable code outlining and folding
Configure word wrap behavior
Highlight the current line with custom colors
Add content dividers between sections
Apply underline styles (solid, dash, wave, dot)
Create bookmarks and custom indicators
Navigate between bookmarks

File Operations and Export

📄 Read: references/file-operations.md

When you need to:

Create new documents programmatically
Open and load files with
```
LoadFile()
```
Save documents with
```
Save()
```
and
```
SaveAs()
```
Handle file encoding (UTF-8, Unicode, ASCII)
Export content to XML, RTF, or HTML formats
Print documents with syntax highlighting
Configure print settings and page setup

Advanced Features

📄 Read: references/advanced-features.md

When you need to:

Create split views for viewing multiple document sections
Configure and customize the status bar
Use single-line mode for TextBox-like behavior
Implement find and replace dialogs
Use text navigation methods programmatically
Customize shortcut key bindings
Enable RTL (right-to-left) support
Localize the editor to different languages
Handle comprehensive event model
Optimize scrolling behavior for large files

Quick Start Example

Basic Code Editor with C# Syntax Highlighting

C#:

csharp

using Syncfusion.Windows.Forms.Edit;
using Syncfusion.Windows.Forms.Edit.Enums;
using System;
using System.Drawing;
using System.IO;
using System.Windows.Forms;

public class CodeEditorForm : Form
{
    private EditControl editControl1;
    
    public CodeEditorForm()
    {
        InitializeComponent();
        SetupCodeEditor();
    }
    
    private void SetupCodeEditor()
    {
        // Create EditControl
        editControl1 = new EditControl();
        
        // Basic configuration
        editControl1.Dock = DockStyle.Fill;
        editControl1.BorderStyle = BorderStyle.Fixed3D;
        
        // Apply C# syntax highlighting
        editControl1.ApplyConfiguration(KnownLanguages.CSharp);
        
        // Enable line numbers
        editControl1.ShowLineNumbers = true;
        
        // Enable code outlining
        editControl1.ShowOutliningCollapsers = true;
        
        // Add to form
        this.Controls.Add(editControl1);
        
        // Load sample code (optional)
        string sampleCode = @"using System;

namespace HelloWorld
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine(""Hello, World!"");
        }
    }
}";
        editControl1.Text = sampleCode;
    }
    
    private void InitializeComponent()
    {
        this.Text = "C# Code Editor";
        this.Size = new Size(800, 600);
    }
}

VB.NET:

Imports Syncfusion.Windows.Forms.Edit
Imports Syncfusion.Windows.Forms.Edit.Enums
Imports System
Imports System.Drawing
Imports System.IO
Imports System.Windows.Forms

Public Class CodeEditorForm
    Inherits Form
    
    Private editControl1 As EditControl
    
    Public Sub New()
        InitializeComponent()
        SetupCodeEditor()
    End Sub
    
    Private Sub SetupCodeEditor()
        ' Create EditControl
        editControl1 = New EditControl()
        
        ' Basic configuration
        editControl1.Dock = DockStyle.Fill
        editControl1.BorderStyle = BorderStyle.Fixed3D
        
        ' Apply C# syntax highlighting
        editControl1.ApplyConfiguration(KnownLanguages.CSharp)
        
        ' Enable line numbers
        editControl1.ShowLineNumbers = True
        
        ' Enable code outlining
        editControl1.ShowOutliningCollapsers = True
        
        ' Add to form
        Me.Controls.Add(editControl1)
        
        ' Load sample code (optional)
        Dim sampleCode As String = "using System;" & vbCrLf & vbCrLf & _
            "namespace HelloWorld" & vbCrLf & _
            "{" & vbCrLf & _
            "    class Program" & vbCrLf & _
            "    {" & vbCrLf & _
            "        static void Main(string[] args)" & vbCrLf & _
            "        {" & vbCrLf & _
            "            Console.WriteLine(""Hello, World!"");" & vbCrLf & _
            "        }" & vbCrLf & _
            "    }" & vbCrLf & _
            "}"
        editControl1.Text = sampleCode
    End Sub
    
    Private Sub InitializeComponent()
        Me.Text = "C# Code Editor"
        Me.Size = New Size(800, 600)
    End Sub
End Class

Common Patterns

Pattern 1: Multi-Language Code Editor

Create an editor that switches between different programming languages:

C#:

csharp

private ComboBox languageSelector;
private EditControl editControl1;

private void SetupMultiLanguageEditor()
{
    // Language selector
    languageSelector = new ComboBox
    {
        Dock = DockStyle.Top,
        DropDownStyle = ComboBoxStyle.DropDownList
    };
    languageSelector.Items.AddRange(new object[] 
    { 
        "C#", "VB.NET", "XML", "HTML", "Java", "SQL", "PowerShell", "JavaScript" 
    });
    languageSelector.SelectedIndex = 0;
    languageSelector.SelectedIndexChanged += LanguageSelector_SelectedIndexChanged;
    
    // Editor
    editControl1 = new EditControl
    {
        Dock = DockStyle.Fill,
        ShowLineNumbers = true,
        ShowOutliningCollapsers = true
    };
    
    this.Controls.Add(editControl1);
    this.Controls.Add(languageSelector);
    
    // Apply initial language
    ApplyLanguage("C#");
}

private void LanguageSelector_SelectedIndexChanged(object sender, EventArgs e)
{
    ApplyLanguage(languageSelector.SelectedItem.ToString());
}

private void ApplyLanguage(string language)
{
    switch (language)
    {
        case "C#":
            editControl1.ApplyConfiguration(KnownLanguages.CSharp);
            break;
        case "VB.NET":
            editControl1.ApplyConfiguration(KnownLanguages.VB);
            break;
        case "XML":
            editControl1.ApplyConfiguration(KnownLanguages.XML);
            break;
        case "HTML":
            editControl1.ApplyConfiguration(KnownLanguages.HTML);
            break;
        case "Java":
            editControl1.ApplyConfiguration(KnownLanguages.Java);
            break;
        case "SQL":
            editControl1.ApplyConfiguration(KnownLanguages.SQL);
            break;
        case "PowerShell":
            editControl1.ApplyConfiguration(KnownLanguages.PowerShell);
            break;
        case "JavaScript":
            editControl1.ApplyConfiguration(KnownLanguages.JScript);
            break;
    }
}

Pattern 2: File Editor with Save/Load

Create an editor with file operations:

C#:

csharp

private EditControl editControl1;
private string currentFilePath = null;

private void SetupFileEditor()
{
    editControl1 = new EditControl
    {
        Dock = DockStyle.Fill,
        ShowLineNumbers = true
    };
    
    // Menu bar
    MenuStrip menuStrip = new MenuStrip();
    
    ToolStripMenuItem fileMenu = new ToolStripMenuItem("File");
    fileMenu.DropDownItems.Add("New", null, NewFile_Click);
    fileMenu.DropDownItems.Add("Open...", null, OpenFile_Click);
    fileMenu.DropDownItems.Add("Save", null, SaveFile_Click);
    fileMenu.DropDownItems.Add("Save As...", null, SaveFileAs_Click);
    
    menuStrip.Items.Add(fileMenu);
    
    this.Controls.Add(editControl1);
    this.Controls.Add(menuStrip);
    this.MainMenuStrip = menuStrip;
}

private void NewFile_Click(object sender, EventArgs e)
{
    editControl1.Text = string.Empty;
    currentFilePath = null;
    this.Text = "Untitled - Code Editor";
}

private void OpenFile_Click(object sender, EventArgs e)
{
    OpenFileDialog openDialog = new OpenFileDialog
    {
        Filter = "All Files (*.*)|*.*|C# Files (*.cs)|*.cs|VB Files (*.vb)|*.vb"
    };
    
    if (openDialog.ShowDialog() == DialogResult.OK)
    {
        editControl1.LoadFile(openDialog.FileName);
        currentFilePath = openDialog.FileName;
        this.Text = Path.GetFileName(currentFilePath) + " - Code Editor";
        
        // Auto-detect language based on extension
        string ext = Path.GetExtension(currentFilePath).ToLower();
        if (ext == ".cs")
            editControl1.ApplyConfiguration(KnownLanguages.CSharp);
        else if (ext == ".vb")
            editControl1.ApplyConfiguration(KnownLanguages.VB);
        else if (ext == ".xml")
            editControl1.ApplyConfiguration(KnownLanguages.XML);
    }
}

private void SaveFile_Click(object sender, EventArgs e)
{
    if (string.IsNullOrEmpty(currentFilePath))
    {
        SaveFileAs_Click(sender, e);
    }
    else
    {
        editControl1.Save(currentFilePath);
    }
}

private void SaveFileAs_Click(object sender, EventArgs e)
{
    SaveFileDialog saveDialog = new SaveFileDialog
    {
        Filter = "All Files (*.*)|*.*|C# Files (*.cs)|*.cs|VB Files (*.vb)|*.vb"
    };
    
    if (saveDialog.ShowDialog() == DialogResult.OK)
    {
        editControl1.Save(saveDialog.FileName);
        currentFilePath = saveDialog.FileName;
        this.Text = Path.GetFileName(currentFilePath) + " - Code Editor";
    }
}

Pattern 3: Code Editor with IntelliSense

C#:

csharp

editControl1 = new EditControl { Dock = DockStyle.Fill, ShowLineNumbers = true };
editControl1.ApplyConfiguration(KnownLanguages.CSharp);

// Add auto-complete items
editControl1.AutoCompleteList.AddRange(new[] { "Console", "Console.WriteLine", 
    "string", "int", "public", "private", "class" });

// Enable auto-correct
editControl1.AutoCorrectList.Add("teh", "the");
editControl1.AutoCorrectList.Add("cosole", "console");

this.Controls.Add(editControl1);

Key Properties and Methods

Essential Properties

Property	Type	Description
Text	`string`	Gets or sets the text content of the editor
ShowLineNumbers	`bool`	Shows or hides line numbers in the margin
ShowOutliningCollapsers	`bool`	Enables code outlining collapse/expand controls
WordWrap	`bool`	Enables or disables word wrapping
ReadOnly	`bool`	Makes the editor read-only
TabSize	`int`	Sets the number of spaces for tab character
AutoCompleteMode	`AutoCompleteMode`	Configures auto-complete behavior (All, Suggest, None)
EnableAutoCorrect	`bool`	Enables automatic correction of common typos
StatusBarSettings	`StatusBarSettings`	Configures the built-in status bar
ContextChoiceOpen	`bool`	Gets whether IntelliSense context menu is open
CanUndo	`bool`	Indicates if undo operation is available
CanRedo	`bool`	Indicates if redo operation is available
Modified	`bool`	Indicates if the document has been modified

Key Methods

Method	Description
ApplyConfiguration(KnownLanguages)	Applies built-in syntax highlighting configuration
LoadFile(string)	Loads a file into the editor
Save(string)	Saves the current content to a file
SaveAs(string)	Saves content to a new file
Undo()	Performs undo operation
Redo()	Performs redo operation
Cut()	Cuts selected text to clipboard
Copy()	Copies selected text to clipboard
Paste()	Pastes text from clipboard
SelectAll()	Selects all text in the editor
Find()	Opens the find dialog
Replace()	Opens the replace dialog
GoToLine(int)	Navigates to specified line number
SetText(string)	Sets text content programmatically
Export(string, ExportType)	Exports content to XML, RTF, or HTML
Print()	Opens print dialog for the document

Common Use Cases

Source Code Editor: Build Visual Studio-like code editors for C#, VB.NET, Java with syntax highlighting and IntelliSense
Configuration File Editor: XML, JSON editors with syntax validation
SQL Query Editor: Database query editors with SQL syntax highlighting
Script Editor: PowerShell, JavaScript editors for automation
Code Snippet Manager: Store and organize code snippets with syntax highlighting
Log File Viewer: View structured logs with syntax highlighting
Multi-Language IDE: Build IDEs supporting multiple languages with split views

Next Steps

Start with Getting Started to install and configure the EditControl, then explore specific features through the navigation guide above based on your application requirements.

syncfusion-winforms-syntax-editor

NPX Install

Tags

SKILL.md Content

Implementing Syntax Editors (EditControl)

When to Use This Skill

Component Overview

Key Capabilities

Documentation and Navigation Guide

Getting Started

Syntax Highlighting

Editing Features

IntelliSense Features

Text Visualization

File Operations and Export

Advanced Features

Quick Start Example

Basic Code Editor with C# Syntax Highlighting

Common Patterns

Pattern 1: Multi-Language Code Editor

Pattern 2: File Editor with Save/Load

Pattern 3: Code Editor with IntelliSense

Key Properties and Methods

Essential Properties

Key Methods

Common Use Cases

Next Steps