TinyEditor

Namespace: Wisej.Web.Ext.TinyEditor

Assembly: Wisej.Web.Ext.TinyEditor (4.1.0.0)

• Control
  • Widget
    • TinyEditor

Represents a lightweight WYSIWYG HTML editor control based on TinyEditor (TinyEditor).

C#

public class TinyEditor : Widget

VB.NET

Public Class TinyEditor
    Inherits Widget

TinyEditor is a simple and standalone JavaScript editor that handles most of the basic formatting needs and keeps the rendered markup as clean as possible. The HTML content is available in the Text property; the toolbar is configured using Toolbar and FontNames, and the footer with the source/WYSIWYG toggle using ShowFooter, SourceText and WysiwygText.

Example:

Creating an editor with a reduced toolbar and saving its content:

var editor = new TinyEditor
{
    Dock = DockStyle.Fill,
    ShowFooter = false,
    Toolbar = new[] { "bold", "italic", "underline", "|", "orderedlist", "unorderedlist", "|", "link", "unlink" },
    Text = "<p>Hello <b>World</b></p>"
};
editor.TextChanged += (s, e) => SaveDocument(editor.Text);
this.Controls.Add(editor);

Constructors

TinyEditor()

Initializes a new instance of TinyEditor.

Properties

DefaultFontNames

String[]: Returns the default font names to display in the toolbar.

This is the initial value of the FontNames property: Verdana, Arial, Georgia and Trebuchet MS. The returned array is shared: don't modify its elements.

DefaultToolbar

String[]: Returns the default buttons to show in the toolbar.

This is the initial value of the Toolbar property. The returned array is shared by all the editors that use the default toolbar: don't modify its elements, copy it instead.

Example:

Adding the paste button to the default toolbar:

var buttons = new List<string>(TinyEditor.DefaultToolbar);
buttons.Insert(buttons.IndexOf("copy") + 1, "paste");
this.tinyEditor1.Toolbar = buttons.ToArray();

FontNames

String[]: Returns or sets the font names to display in the toolbar.

The names are listed in the font drop-down of the toolbar, which must be included in Toolbar. The default is DefaultFontNames.

Example:

Offering a custom list of fonts:

this.tinyEditor1.FontNames = new[] { "Segoe UI", "Arial", "Times New Roman", "Courier New" };

InitScript

String: Returns the initialization script that creates the editor on the client.

The script is built from the embedded startup.js resource and the current property values. The setter is ignored.

Packages

List<Package>: Returns the list of packages (the tiny.editor.js library) loaded on the client before the editor is created.

ShowFooter

Boolean: Returns or sets whether the footer panel is displayed. (Default: True)

The footer contains the button that toggles between the WYSIWYG view and the HTML source view, labeled using SourceText and WysiwygText.

ShowToolbar

Boolean: Returns or sets whether the toolbar panel is displayed. (Default: True)

The buttons in the toolbar are defined by the Toolbar property.

SourceText

String: Returns or sets the text to use in the SOURCE button in the footer panel. (Default: "source")

The button is displayed while the editor is in WYSIWYG mode and switches to the HTML source view. The default is "source".

Example:

Localizing the footer toggle button:

this.tinyEditor1.SourceText = "HTML";
this.tinyEditor1.WysiwygText = "Editor";

StyleSheetSource

String: Returns or sets the custom css file used by the editor. (Default: "")

The style sheet is linked in the document of the editable area (an IFrame), so it styles the edited content, not the toolbar. The value is the URL or application-relative path of the css file. A null value is converted to an empty string.

Example:

Styling the edited content with the application's css:

this.tinyEditor1.StyleSheetSource = "Content/editor-content.css";

Text

String: Returns or sets the HTML text associated with this control. (Default: "")

Value: The HTML text associated with this control.

While the user types, the new text is sent to the server together with the next event fired by the browser, not on every keystroke; other changes (formatting, paste, ExecCommand) update the text right away. TextChanged is fired every time the value changes. A null value is converted to an empty string.

Toolbar

String[]: Returns or sets the buttons to show in the toolbar.

The available buttons are: cut, copy, paste, bold, italic, underline, strikethrough, subscript, superscript, orderedlist, unorderedlist, outdent, indent, leftalign, centeralign, rightalign, blockjustify, undo, redo, image, hr, link, unlink, unformat and print, and the drop-downs font (see FontNames), size and style. Use "|" to insert a divider and "n" to start a new toolbar row. The default is DefaultToolbar.

Example:

Defining a two-row toolbar:

this.tinyEditor1.Toolbar = new[] {
    "undo", "redo", "|", "bold", "italic", "underline", "n",
    "font", "size", "style", "|", "leftalign", "centeralign", "rightalign"
};

WysiwygText

String: Returns or sets the text to use in the WYSIWYG button in the footer panel. (Default: "wysiwyg")

The button is displayed while the editor is in HTML source mode and switches back to the WYSIWYG view. The default is "wysiwyg".

Methods

ExecCommand(command, showDefaultUI, argument)

Executes commands to manipulate the contents of the editable region.

Parameter	Type	Description
command	String	The name of the command to execute. See execCommand for a list of commands.
showDefaultUI	Boolean	Indicates whether the default user interface should be shown. This is not implemented in Mozilla.
argument	String	For commands which require an input argument (such as insertImage, for which this is the URL of the image to insert), this is a string providing that information. Specify null if no argument is needed.

Most commands affect the document's selection (bold, italics, etc.), while others insert new elements (adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element. The Text property is updated asynchronously shortly after the command runs.

Example:

Inserting an image at the caret position:

private void buttonInsertLogo_Click(object sender, EventArgs e)
{
    this.tinyEditor1.ExecCommand("insertImage", false, "Images/logo.png");
}

ExecCommand(command, argument)

Executes commands to manipulate the contents of the editable region.

Parameter	Type	Description
command	String	The name of the command to execute. See execCommand for a list of commands.
argument	String	For commands which require an input argument (such as insertImage, for which this is the URL of the image to insert), this is a string providing that information. Specify null if no argument is needed.

Most commands affect the document's selection (bold, italics, etc.), while others insert new elements (adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element. The Text property is updated asynchronously shortly after the command runs.

Example:

Executing commands from buttons outside of the editor:

private void buttonBold_Click(object sender, EventArgs e)
{
    this.tinyEditor1.ExecCommand("bold");
}

private void buttonRed_Click(object sender, EventArgs e)
{
    this.tinyEditor1.ExecCommand("foreColor", "#FF0000");
}

OnEnabledChanged(e)

Performs additional configuration to the widget.

Parameter	Type	Description
e	EventArgs

OnWebUpdate(state)

Updates the client component using the state information.

Parameter	Type	Description
state	Object	Dynamic state object.

OnWidgetEvent(e)

Fires the WidgetEvent event.

Parameter	Type	Description
e	WidgetEventArgs	A WidgetEventArgs that contains the event data.

Update()

Causes the control to update the corresponding client side widget. When in design mode, causes the rendered control to update its entire surface in the designer.

When the widget is recreated on the client, the current Text is sent again to the new editor.

Example:

Recreating the editor after changing several properties:

this.tinyEditor1.ShowFooter = false;
this.tinyEditor1.FontNames = new[] { "Arial", "Tahoma" };
this.tinyEditor1.Update();

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable