8000 Merge editor-default-tools-2480 into production by github-actions[bot] · Pull Request #2483 · telerik/blazor-docs · GitHub
[go: up one dir, main page]

Skip to content

Merge editor-default-tools-2480 into production #2483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 1, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
docs(Editor): Document built-in toolsets
  • Loading branch information
dimodi authored and dimodi committed Nov 1, 2024
commit 05c4dd1d7c42ac98ebb33badf162b87a7b5cba52
54 changes: 48 additions & 6 deletions components/editor/toolbar.md
FCA2
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,64 @@ To control the collection of buttons and commands available to the user, you pro

## Built-in Tool Lists

The Editor comes with two predefined sets of tools in the `EditorToolSets` static class:
The Editor comes with [two predefined sets of tools](#predefined-toolset-configurations) in the `EditorToolSets` static class:

* `Default` - the default set of the most commonly used tools and commands.
* `All` - All the available tools and commands the editor has.
* `Default` includes the most commonly used tools and commands. If you do not apply any settings, the `Default` list of tools will be used.
* `All` includes all the available tools and commands.

If you do not apply any settings, the `Default` list of tools will be used.
The following example shows how to use the `All` toolset.

>caption Switch to the All tools built-in toolset
>caption Use all built-in Editor tools

````CSHTML
@using Telerik.Blazor.Components.Editor

<TelerikEditor Tools="@EditorToolSets.All">
</TelerikEditor>

@code {
private string EditorValue { get; set; } = string.Empty;
}
````

### Predefined Toolset Configurations

The following code snippets show the built-in toolset configurations in `EditorToolSets`. See the [Built-in Editor Tools]({%slug editor-built-in-tools%}) article for more information on each tool.

<div class="skip-repl"></div>

````cs
public static List<IEditorTool> Default = new List<IEditorTool>()
{
new EditorButtonGroup(new Bold(), new Italic(), new Underline()),
new Format(),
new EditorButtonGroup(new AlignLeft(), new AlignCenter(), new AlignRight(), new AlignJustify()),
new EditorButtonGroup(new UnorderedList(), new OrderedList(), new Indent(), new Outdent()),
new EditorButtonGroup(new CreateLink(), new Unlink()),
new InsertImage()
};

public static List<IEditorTool> All = new List<IEditorTool>()
{
new EditorButtonGroup(new Undo(), new Redo()),
new EditorButtonGroup(new Bold(), new Italic(), new Underline(), new Strikethrough()),
new EditorButtonGroup(new SubScript(), new SuperScript()),
new Format(),
new FontFamily(),
new FontSize(),
new ForeColor(),
new BackgroundColor(),
new EditorButtonGroup(new AlignLeft(), new AlignCenter(), new AlignRight(), new AlignJustify()),
new EditorButtonGroup(new UnorderedList(), new OrderedList(), new Indent(), new Outdent()),
new EditorButtonGroup(new CreateLink(), new Unlink()),
new InsertImage(),
new InsertTable(),
new EditorButtonGroup(new AddColumnBefore(), new AddColumnAfter(), new AddRowBefore(), new AddRowAfter()),
new EditorButtonGroup(new DeleteColumn(), new DeleteRow(), new DeleteTable()),
new EditorButtonGroup(new MergeCells(), new SplitCell()),
new ViewHtml()
};
````

## Choose Toolbar Items

Expand Down Expand Up @@ -249,4 +291,4 @@ When adding a built-in tool to the collection, you can set various parameters to

## See Also

* [Editor Overview]({%slug editor-overview%})
* [Editor Overview]({%slug editor-overview%})
0