Netrix Editor Component
Welcome to the Editor Component's demo application.
Why this?
The Netrix editor is an amazing complex and multi-functional component that
allows users to edit and show HTML pages. A complete set of functions delivers
everything to create a sophisticated HTML editor application. Several plug-ins
extend the component and have been seperated into its own assemblies to keep the
core lean.
The demo is delivered for free including all sources. The purpose is to give
developers a way to learn from existing code. The demo was written by the same
guy who wrote the editor itself, Joerg.
Hence, you can expect that the way the demo deals with the component is the
recommended way. For more information, have a look at
http://www.netrixcomponent.net.
How this?
This demo uses these open source libraries:
- Weifen Luo's Winforms UI that provides the docking
functionality. Find more here:
http://sourceforge.net/projects/dockpanelsuite/
- Arik Poznanski's ribbon wrapper, that makes the
Windows 7 Ribbon available for .NET. See
http://windowsribbon.codeplex.com/
- A part from the Fireball project, found at
http://dotnetfireball.codeplex.com/. This project is now inactive, but we
used the code editor and added some own code.
Note: To use the links shown above put the demo in browse mode,
while all others appear better in design mode.
What is it?
The demo has no specific purpose but showing how to work with the component.
It's not exactly an HTML editor, it's just a collection of functions. You find
each theme of functions grouped onto one tab of the ribbon. Each ribbon has a
help button at the left that loads a short explanation of what you can do and
how it works internally. We recommend first clicking onto the help button and
read the text before start clicking the various ribbon buttons.
The functions on the ribbon at a glance are:
- Edit. You can:
- Use the clipboard
- Use undo/redo operations
- Format text using the Font properties
- Format a paragraph by aligning the block
- View the markup in the code editor
- Show editing glyphs, small images that appear where the tags are in design view
- Use the search and replace functions
- Insert. You can:
- Format a block using H1 to H6 tags
- Remove block formats
- Remove inline formats, such as fonts
- Add a table
- Display. You can:
- Shows the grid that helps positioning elements
- Style the grid with width, color and line pattern
- Activate absolute positioning, together with some functions that apply in this
mode only
- Enable and format scrollbars (requires reloading the document)
- Move the scrollbar programmatically and retrieve the current position
- Control. You can:
- Attach events to elements and watch they firing
- Show the outline (document tree)
- Show document (global) events in a window
- Text. You can:
- Highlight text without changing the content
- Style the highlight pattern
- Manipulate text (make a word uppercase, lowercase)
- Styles. You can:
- Enable or add a linked stylesheet
- Edit the current document's style using the embedded style editor control
- Helpline Tools
- As a contextual tab you find the functions of the helpline plug-in. You can:
- Add two helplines
- Format one of these helplines with various options
- Show ruler (Tip: works well with absolute positioning and the grid)
- Spellchecker Tools
- As a contextual tab you find the functions of the spellchecker plug-in. You can:
- Change the dictionary
- Invoke either background (As you type) or interactive checking
- Format the highlight style
- Set some options
- Table Tools
- As a contextual tab you find the functions of the table editor plug-in. You can:
- Add and remove rows, columns or cells
- Format the table by moving cell borders with the mouse
- Split cells
- Style the slider's color
- Set several options that change the editor's behavior
Apart from this the demo shows several windows, some
of them are optional:
- The main window shows the editor's content and is, hence, the editor window.
- To the left a toolbox appears. This box demonstrates the drag 'n drop
functionality.
- To the right the property window appears. This is to show how the propertygrid
can be used to manipulate elements.
- Optional you can show a window that catches events. This is performance critical
if you hook into all available events at once.
- The document outline window shows the document's structure as a tree.
Additionally, the applications backstage area has
some basic editor functions:
- Load from file
- Save to file
- Print
- Show all editor properties and change them (even if not on the ribbon)
- Create a new empty document
- Exit the application
Note that these functions shown are just a subset and Netrix has many,
many more features you can use in your application. Check out our website
regularly to keep a new demo with more features implemented.