Editor Methods
Setup The Blazor Application
Follow the Getting Started guide to set up your Blazor Application with Smart UI.
Setup the Blazor Smart.Editor
Follow the Get Started with Smart.Editor guide to set up the component.
Methods
Smart.Editor has a number of methods related to the content or toolbar. The methods can be used at any time after the element's initialization.
- Focus - focuses the content editable element inside the Editor.
- Blur - blurs the content editable element inside the Editor.
- CollapseToolbar - collapses the toolbar of the Editor.
- ExpandToolbar - expands the toolbar of the Editor.
- DisableToolbarItem - disables a toolbar item from the toolbar.
- EnableToolbarItem - enables a previously diasbled toolbar item .
- GetCharCount - returns the number of characters inside the Editor's content.
- SelectAll - selects the content of the Editor.
- ClearContent - clears the content of the Editor.
- GetHTML - return the current content in HTML format.
- GetText - return the current content in text format.
- SplitMode - toggles on/off the Split Mode of the Editor. When enabled the Editor's content section is split in half by showing the html content and the source code/preview at the same time.
- PreviewMode - switches the Editor to source code/preview mode.
- FullScreenMode - enables/disabled Editor's full screen mode. When enabled the Editor is fixed ontop of the screen and takes the whole body size.
- ExportData - exports the content of the Editor to a file. The methods takes one argument - the expected file format, for example: 'md', 'txt', 'pdf'.
- Print - prepares the Editor's content for printing by opening the browser's print preview. In markdown mode, the markdown preview is prepared for printing.
-
ExecuteCommand - executes a command by calling the native execCommand() method affecting the current content selection or inserts content. Supports all native execCommand actions, such as:
-
foreColor- Changes the text color for the selection at the insertion point. Requires a color to be passed as a string agrument to the method.
editor.ExecuteCommand("foreColor", "#000000"); -
hiliteColor- Changes the background color for the selection at the insertion point. Requires a color to be passed as a string agrument to the method.
editor.ExecuteCommand("hiliteColor", "#000000"); -
bold- Toggles bold formatting on/off for the current selection.
editor.ExecuteCommand("bold"); -
italic- Toggles italic formatting on/off for the current selection.
editor.ExecuteCommand("italic"); -
underline- Toggles underline formatting on/off for the current selection.
editor.ExecuteCommand("underline"); -
copy- Copies the current selection to the Clipboard. The behavior of this action varies from one browser to another.
editor.ExecuteCommand("copy"); -
cut- Removes the current selection and copies it to the Clipboard. The behavior of this action varies from one browser to another.
editor.ExecuteCommand("cut"); -
createLink- Inserts a hyperlink at the current cursor position.
editor.ExecuteCommand("createLink", "https://www.htmlelements.com"); -
delete- Deletes the current selection.
editor.ExecuteCommand("delete"); -
fontSize- Changes the font size of the current selection or the insertion point. Requires an integer from 1 to 7 as a value argument.
editor.ExecuteCommand("fontSize", 2); -
fontName- Changes the font name of the current selection or the insertion point. Requires an font name to be passed as a value argument.
editor.ExecuteCommand("fontName", "Arial"); -
formatBlock- Adds an HTML block level element around the line containing the current selection. Requires a node name string to be passed as a value argument.
editor.ExecuteCommand("formatBlock", "code"); -
heading- Adds a heading element around the current selection or insertion point line. Requires a heading node name string to be passed as the value argument.
editor.ExecuteCommand("heading", "h6"); -
indent- Indents the current selection or insertion point line.
editor.ExecuteCommand("indent"); -
outdent- Outdents the current selection or insertion point line.
editor.ExecuteCommand("outdent"); -
insertOrderedList- Creates a numbered ordered list for the selection or the insertion point.
editor.ExecuteCommand("insertOrderedList"); -
insertUnorderedList- Creates a billeted unordered list for the selection or the insertion point.
editor.ExecuteCommand("insertUnorderedList"); -
insertText- Inserts plain text at the current selection or cursor position while deleteing the selection ( if any).
editor.ExecuteCommand("insertText", "Plain Text inserted"); -
insertHorizontalRule- Inserts a <hr> element at the insertion point or replaces the current selection.
editor.ExecuteCommand("insertHorizontalRule"); -
justifyLeft- Justifies the selection or insertion point to the left.
editor.ExecuteCommand("justifyLeft"); -
justifyCenter- Justifies the selection or insertion point to the center.
editor.ExecuteCommand("justifyCenter"); -
justifyRight- Justifies the selection or insertion point to the right.
editor.ExecuteCommand("justifyRight"); -
removeFormat- Removes the formatting of the current selection.
editor.ExecuteCommand("removeFormat");
-
Example
Here is an example of how you can use some Editor's methods:
<div>
<Editor @ref="editor">
<p>
Smart Editor represents a ready-for-use HTML text editor which can simplify web content creation or be a
replacement of your HTML Text Areas.
</p>
<h2>Features:</h2>
<ul>
<li>
Basic & advanced styling. With jqxEditor, you can easily apply bold, italic, underline styles as
well as different fonts and font size.
</li>
<li>
Colors Picking. The built-in Color Pickers allow you to highlight text by changing its text color or
background color.
</li>
<li>
Inline editing. The feature allows you to edit inline and the jqxEditor's toolbar is displayed on demand
above the editing area.
</li>
<li>
Right to left interface. jqxEditor can switch to Right to Left layout and editing mode by setting a
single property called "rtl" to true.
</li>
<li>Hyperlinks. A built-in tool for inserting, modifying and removing hyperlinks is available.</li>
<li>
Images. Images can be edited via a built-in Dialog where you can define the image's url, size, alt text
and layout.
</li>
<li>
Tables. The Editor allows to creata tables with custom rows/colums and apply attributes like header,
alternation and etc.
</li>
<li>Export to HTML and Print.</li>
<li>
Customizable Toolbars. The Toolbar items can be customized as well as the Dialog Window for the
table/image/hyperlink actions.
</li>
<li>
Force paste as plain text. jqxEditor has a property called "pasteFormat". By setting it to "plainText",
the
clipboard data will be always pasted as plain text
</li>
<li>PC, Touch and Mobile Devices Support</li>
<li>Web Standards Compliant</li>
<li>Rich and easy to use JavaScript API</li>
<li>Easy customization and built-in themes</li>
</ul>
<p>
<table class="browserref notranslate">
<tbody>
<tr>
<th style="font-size:16px;text-align:left;">Element</th>
<th title="Chrome">
<div class="bsChrome"></div>
</th>
<th title="MS Edge">
<div class="bsEdge"></div>
</th>
<th title="Firefox">
<div class="bsFirefox"></div>
</th>
<th title="Safari">
<div class="bsSafari"></div>
</th>
<th title="Opera">
<div class="bsOpera"></div>
</th>
</tr>
<tr>
<td style="text-align:left;"><jqx-editor></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</p>
</Editor>
<div class="options">
<div class="option">
<Button OnClick="OnFocusClick">Focus</Button>
</div>
<div class="option">
<Button OnClick="OnBlurClick">Blur</Button>
</div>
<div class="option">
<Button OnClick="OnCollapseToolbarClick">Collapse toolbar</Button>
</div>
<div class="option">
<Button OnClick="OnExpandToolbarClick">Expand Toolbar</Button>
</div>
<div class="option">
<Button OnClick="OnDisableToolbarItemClick" @bind-Disabled="disableToolbarItemDisabled">Disable Formats Item</Button>
</div>
<div class="option">
<Button OnClick="OnEnableToolbarItemClick" @bind-Disabled="enableToolbarItemDisabled">Enable Formats Item</Button>
</div>
<div class="option">
<Button OnClick="OnGetCharCountClick">Get Char Count</Button>
</div>
<div class="option">
<Button OnClick="OnSelectAllClick">Select All</Button>
</div>
<div class="option">
<Button OnClick="OnClearContentClick">Clear Content</Button>
</div>
<div class="option">
<Button OnClick="OnGetHTMLClick">Get HTML</Button>
</div>
<div class="option">
<Button OnClick="OnGetTextClick">Get Text</Button>
</div>
<div class="option">
<Button OnClick="OnSplitModeClick">Split Mode</Button>
</div>
<div class="option">
<Button OnClick="OnPreviewClick"> Preview / Source Code Mode</Button>
</div>
</div>
<div id="log">@log</div>
</div>
@code {
Editor editor;
bool disableToolbarItemDisabled = false;
bool enableToolbarItemDisabled = true;
string log = "";
private void OnFocusClick()
{
editor.Focus();
}
private void OnBlurClick()
{
editor.Blur();
}
private void OnCollapseToolbarClick()
{
editor.CollapseToolbar();
}
private void OnExpandToolbarClick()
{
editor.ExpandToolbar();
}
private void OnDisableToolbarItemClick()
{
disableToolbarItemDisabled = true;
enableToolbarItemDisabled = false;
editor.DisableToolbarItem("formats");
}
private void OnEnableToolbarItemClick()
{
disableToolbarItemDisabled = false;
enableToolbarItemDisabled = true;
editor.EnableToolbarItem("formats");
}
private async void OnGetCharCountClick()
{
int count = await editor.GetCharCount();
log = count.ToString();
}
private void OnSelectAllClick()
{
editor.SelectAll();
}
private void OnClearContentClick()
{
editor.ClearContent();
}
private async void OnGetHTMLClick()
{
string html = await editor.GetHTML();
log = html;
}
private async void OnGetTextClick()
{
string text = await editor.GetText();
log = text;
}
private void OnSplitModeClick()
{
editor.SplitMode();
}
private void OnPreviewClick()
{
editor.PreviewMode();
}
}