TinyMCE

Namespace: Wisej.Web.Ext.TinyMCE

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

Control
- Widget
  - TinyMCE

TinyMCE is a platform-independent, browser-based WYSIWYG HTML editor control.

C#
VB.NET

public class TinyMCE : Widget

Public Class TinyMCE
    Inherits Widget

This control wraps TinyMCE 4 (https://www.tiny.cloud/). By default the library is loaded from the CDN set in BaseUrl. The HTML content is exchanged with the server through the Text property and the editor is configured using the Options property, which is passed to tinymce.init().

Constructors

TinyMCE()

Initializes a new instance of TinyMCE.

Properties

BaseUrl

String: Returns or sets the base URL of the TinyMCE installation.

The default is "https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/". The URL must end with "/" since "tinymce.min.js" is appended to it. This is a static setting shared by all sessions; set it at startup, before any editor is created.

To use a local installation, deploy the TinyMCE files in a folder of the application and set the relative URL.

Example:

Using a local copy of TinyMCE:

static void Main()
{
    TinyMCE.BaseUrl = "Scripts/tinymce/";

    Application.MainPage = new MainPage();
}

DefaultFontNames

String[]: Returns the default font names used to initialize FontNames.

The default names are "Verdana", "Arial", "Georgia" and "Trebuchet MS".

Enabled

Boolean: Returns or sets whether the editor is enabled.

When disabled, the editor is switched to TinyMCE's "readonly" mode; when enabled it's switched back to "design" mode.

ExternalPlugins

ExternalPlugin[]: Returns or sets the collection of external (local) plugins to register with the TinyMCE control. (Default: null)

Each plugin is loaded from Url + "/" + FileName using tinymce.PluginManager.load() before the editor is created. Plugins with an empty Name, Url or FileName are ignored. The plugin must also be listed in the plugins option in Options to be activated.

Assigning the property recreates the editor.

Example:

Registering a plugin deployed with the application:

this.tinyMCE1.ExternalPlugins = new[]
{
    new ExternalPlugin { Name = "wordcounter", Url = "Plugins/wordcounter", FileName = "plugin.js" }
};
this.tinyMCE1.Options.plugins = "lists link wordcounter";
this.tinyMCE1.Update();

FontNames

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

InitScript

String: Overridden to create the initialization script. Setting this property has no effect.

Options

Object: Returns or sets the configuration to use for this instance of the editor: https://www.tinymce.com/docs/configure/.

Packages

List<Package>: Overridden to return the TinyMCE script loaded from BaseUrl.

ShowFooter

Boolean: Returns or sets whether the footer (status bar) is visible. (Default: True)

When set to false it overrides the statusbar setting in Options. Changing this property recreates the editor.

ShowMenuBar

Boolean: Returns or sets whether the menu bar is visible. (Default: True)

When set to false it overrides the menubar setting in Options. Changing this property recreates the editor.

ShowToolbar

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

When set to false it overrides the toolbar setting in Options. Changing this property recreates the editor.

Text

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

Setting the text replaces the content of the editor. If the editor is not loaded yet, the content is applied as soon as it's ready.

Changes made by the user are sent back to the server with the next request after the editor changes, a key is pressed or the editor loses the focus. ExecCommand updates the text shortly after the command is executed. TextChanged is fired every time the value changes.

Example:

Loading and saving the HTML content:

private void Form1_Load(object sender, EventArgs e)
{
    this.tinyMCE1.Text = "<h1>Monthly Report</h1><p>Write the summary here.</p>";
}

private void buttonSave_Click(object sender, EventArgs e)
{
    SaveDocument(this.tinyMCE1.Text);
}

Methods

DisableCommand(command)

Disables the specified command on the toolbar.

Parameter	Type	Description
command	String	The name of the command to disable, i.e. "mceSave", "Bold". Toolbar buttons are matched by their command name or by their text.

The state of the command is preserved and applied again when the editor is recreated or the browser is refreshed. An empty string is ignored.

Throws:

ArgumentNullException command is null.

Example:

Disabling the save button according to the state of the document:

private void UpdateSaveButton(bool modified)
{
    if (modified)
        this.tinyMCE1.EnableCommand("mceSave");
    else
        this.tinyMCE1.DisableCommand("mceSave");
}

EnableCommand(command)

Enables the specified command on the toolbar.

Parameter	Type	Description
command	String	The name of the command to enable, i.e. "mceSave", "Bold". Toolbar buttons are matched by their command name or by their text.

The state of the command is preserved and applied again when the editor is recreated or the browser is refreshed. An empty string is ignored.

Throws:

ArgumentNullException command is null.

Example:

Enabling the save button according to the state of the document:

private void UpdateSaveButton(bool modified)
{
    if (modified)
        this.tinyMCE1.EnableCommand("mceSave");
    else
        this.tinyMCE1.DisableCommand("mceSave");
}

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, i.e. "Bold", "Undo", "mceInsertContent". See https://www.tiny.cloud/docs/tinymce/4/editor-command-identifiers/ for a list of commands.
showDefaultUI	Boolean	Indicates whether the default user interface (i.e. a dialog) should be shown, when the command has one.
argument	String	For commands which require an input argument (such as "mceInsertContent", for which this is the HTML to insert), this is a string providing that information. Specify null if no argument is needed.

Most commands affect the current selection (bold, italic, etc.), while others insert new elements (adding a link) or affect an entire line (indenting).

The command is executed asynchronously on the client; if the editor is not ready yet, it's executed after it's initialized. The Text property is updated shortly after the command runs.

Example:

Inserting a link at the caret position:

private void buttonInsertLink_Click(object sender, EventArgs e)
{
    this.tinyMCE1.ExecCommand("mceInsertContent", false, "<a href=\"https://wisej.com\">Wisej.NET</a>");
}

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, i.e. "Bold", "Undo", "mceInsertContent". See https://www.tiny.cloud/docs/tinymce/4/editor-command-identifiers/ for a list of commands.
argument	String	For commands which require an input argument (such as "mceInsertContent", for which this is the HTML to insert), this is a string providing that information. Specify null if no argument is needed.

Most commands affect the current selection (bold, italic, etc.), while others insert new elements (adding a link) or affect an entire line (indenting).

The command is executed asynchronously on the client without showing its default user interface. The Text property is updated shortly after the command runs.

Example:

Executing commands from buttons outside of the editor:

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

private void buttonUndo_Click(object sender, EventArgs e)
{
    this.tinyMCE1.ExecCommand("Undo");
}

OnCommand(e)

Fires the Command event.

Parameter	Type	Description
e	CommandEventArgs

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()

Updates the client widget with the current properties and Options.

When the configuration has changed, the TinyMCE editor is destroyed and recreated; the Text and the enabled state are applied again once the new editor is loaded. When the widget is created again (i.e. after a browser refresh), the commands enabled or disabled with EnableCommand and DisableCommand are sent again.

Example:

Applying changes made to the Options object:

this.tinyMCE1.Options.menubar = "edit insert format table";
this.tinyMCE1.Update();

Events

Command

CommandEventHandler Fired after the editor executes a command.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable

Constructors​

TinyMCE()​

Properties​

BaseUrl​

DefaultFontNames​

Enabled​

ExternalPlugins​

FontNames​

InitScript​

Options​

Packages​

ShowFooter​

ShowMenuBar​

ShowToolbar​

Text​

Methods​

DisableCommand(command)​

EnableCommand(command)​

ExecCommand(command, showDefaultUI, argument)​

ExecCommand(command, argument)​

OnCommand(e)​

OnWebUpdate(state)​

OnWidgetEvent(e)​

Update()​

Events​

Command​

Implements​

Constructors

TinyMCE()

Properties

BaseUrl

DefaultFontNames

Enabled

ExternalPlugins

FontNames

InitScript

Options

Packages

ShowFooter

ShowMenuBar

ShowToolbar

Text

Methods

DisableCommand(command)

EnableCommand(command)

ExecCommand(command, showDefaultUI, argument)

ExecCommand(command, argument)

OnCommand(e)

OnWebUpdate(state)

OnWidgetEvent(e)

Update()

Events

Command

Implements