Skip to content

Commit a7188b6

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent a0b94d7 commit a7188b6

File tree

15 files changed

+837
-96
lines changed

15 files changed

+837
-96
lines changed

‎docs-aspnet-core/html-helpers/editors/editor/image-browser.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: Image Browser
3+
page_title: Editor Image Browser | Telerik UI for ASP.NET Core HtmlHelpers
4+
description: "Learn about the Image Browser component of the Kendo UI Editor HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_editor_image_browser_aspnetcore
6+
position: 6
7+
---
8+
9+
# Image Browser
10+
11+
By default, the `Insert Image` tool opens a simple dialog that allows you to type in or paste the URL of an image and, optionally, specify a tooltip.
12+
13+
The Editor also supports another way of picking an image by browsing a list of predefined files and directories. Uploading new images is also supported.
14+
15+
## Configuration
16+
17+
To retrieve and upload the files and directories, the image browser needs a server-side implementation.
18+
19+
The image browser tool can be configured through the [`ImageBrowser()`](/api/Kendo.Mvc.UI.Fluent/EditorBuilder#imagebrowsersystemactionkendomvcuifluenteditorimagebrowsersettingsbuilder) configuration method.
20+
21+
###### Example
22+
23+
```
24+
@(Html.Kendo().Editor()
25+
.Name("editor")
26+
.ImageBrowser(imageBrowser => imageBrowser
27+
.Image("~/Content/UserFiles/Images/{0}")
28+
.Read("Read", "ImageBrowser")
29+
.Create("Create", "ImageBrowser")
30+
.Destroy("Destroy", "ImageBrowser")
31+
.Upload("Upload", "ImageBrowser")
32+
.Thumbnail("Thumbnail", "ImageBrowser")
33+
)
34+
)
35+
```
36+
37+
The following list provides information about the default requests and responses for the `Create()`, `Read()`, `Destroy()`, and `Upload()` operations.
38+
39+
- `Create()`—Makes a `POST` request for the creation of a directory with the following parameters and does not expect a response.
40+
41+
{ "name": "New folder name", "type": "d", "path": "foo/" }
42+
43+
- `Read()`—Makes a `POST` request that contains the `path` parameter to specify the path which is browsed and expects a file listing in the following format.
44+
45+
```
46+
[
47+
{ "name": "foo.png", "type": "f", "size": 73289 },
48+
{ "name": "bar.jpg", "type": "f", "size": 15289 },
49+
...
50+
]
51+
```
52+
53+
Where `name` is the file or directory name, `type` is either an **f** for a file or a **d** for a directory, and `size` is the file size (optional).
54+
55+
- `Destroy()`—Makes a `POST` request with the following parameters:
56+
57+
- `name`—The file or directory to be deleted.
58+
- `path`—The directory in which the file or the directory resides.
59+
- `type`—Whether a file or a directory is to be deleted (an **f** or a **d**).
60+
- `size`—(Optional) The file size, as provided by the `Read()` response.
61+
62+
- `Upload()`—Makes a `POST` request. The request contains `FormData` containing the upload path, file name and type. Its payload consists of the uploaded file. The expected response is a `file` object in the following format:
63+
64+
```
65+
{ "name": "foo.png", "type": "f", "size": 12345 }
66+
```
67+
68+
- `Thumbnail()`—Makes a `GET` request for each individual image in order to display its thumbnail in the explorer window. The single request parameter is the `path` to the image. The service is expected to respond with the image file for the thumbnail.
69+
70+
- `Image()`—Used by the Editor to generate the `src` attribute of the original image when it is inserted. It results in a `GET` request generated by the browser for each inserted image. The URL can point to a file system or to a service and is parameterized—the `{0}` placeholder denotes the `path` and `fileName` as received from the `Read()` service.
71+
72+
You can update all of these requests and responses through the [`ImageBrowser()`](/api/Kendo.Mvc.UI.Fluent/EditorBuilder#imagebrowsersystemactionkendomvcuifluenteditorimagebrowsersettingsbuilder) configuration. Each of them exposes more options that you can tweak.
73+
74+
## See Also
75+
76+
* [Overview of the Editor HtmlHelper]({% slug htmlhelpers_editor_aspnetcore %})
77+
* [Modes of Operation]({% slug htmlhelpers_editor_modes_aspnetcore %})
78+
* [Tools]({% slug htmlhelpers_editor_tools_aspnetcore %})
79+
* [Pasting Content]({% slug htmlhelpers_editor_pasting_aspnetcore %})
80+
* [Serialize / Deserialize Content]({% slug htmlhelpers_editor_serialize_aspnetcore %})
81+
* [Immutable Elements]({% slug htmlhelpers_editor_immutable_aspnetcore %})
82+
* [Styling Content]({% slug htmlhelpers_editor_styling_aspnetcore %})

‎docs-aspnet-core/html-helpers/editors/editor/immutable.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
title: Immutable Elements
3+
page_title: Immutable Elements | Telerik UI for ASP.NET Core HtmlHelpers
4+
description: "Learn how to use immutable elements in the Kendo UI Editor HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_editor_immutable_aspnetcore
6+
position: 7
7+
---
8+
9+
# Immutable Elements
10+
11+
The immutable feature enables you to add HTML elements that cannot be edited by the user.
12+
13+
## Enable and Add Immutable Elements
14+
15+
To define the immutable elements in the content area, set the [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable) DOM attribute to `false`. To make the Editor prevent the user from editing this element, you also need to enable the [`Immutables()`](/api/Kendo.Mvc.UI.Fluent/EditorBuilder#immutablessystemactionkendomvcuifluenteditorimmutablessettingsbuilder) configuration method.
16+
17+
###### Example
18+
19+
```
20+
@(Html.Kendo().Editor()
21+
.Name("editor")
22+
.Immutables(true)
23+
.Value("<div contenteditable='false'>this is immutable</div><div>this is mutable</div>")
24+
)
25+
```
26+
27+
## Serialize Immutables
28+
29+
The [`Serialization()`](/api/Kendo.Mvc.UI.Fluent/EditorImmutablesSettingsBuilder#serializationsystemstring) method enables you to control the HTML representation of the immutable elements in the `viewHtml` dialog.
30+
31+
The immutables.serialization configuration method accepts the following parameters:
32+
33+
* `String`&mdash;This plain string implements an opening and a closing tag of the representation you want to display in the `ViewHtml` dialog.
34+
35+
###### Example
36+
37+
```
38+
@(Html.Kendo().Editor()
39+
.Name("editor")
40+
.Immutables(i => i
41+
.Serialization("<div></div>")
42+
)
43+
.Value("<div contenteditable='false'>this is immutable</div><div>this is mutable</div>")
44+
)
45+
```
46+
47+
* [Kendo UI Template](https://docs.telerik.com/kendo-ui/framework/templates/overview)&mdash;In it, the immutable DOM element is `data`.
48+
49+
###### Example
50+
51+
```
52+
(Html.Kendo().Editor()
53+
.Name("editor")
54+
.Immutables(i => i
55+
.Serialization("<#= data.nodeName # data=\"immutable-element\"></#= data.nodeName #>")
56+
)
57+
.Value("<div contenteditable='false'>this is immutable</div><div>this is mutable</div>")
58+
)
59+
```
60+
61+
* `Function`&mdash;This callback function exposes the immutable DOM element in the overload and is expected to return a string.
62+
63+
###### Example
64+
65+
```
66+
(Html.Kendo().Editor()
67+
.Name("editor")
68+
.Immutables(i => i
69+
.SerializationHandler("immutablesSerializationHandler")
70+
)
71+
.Value("<div contenteditable='false'>this is immutable</div><div>this is mutable</div>")
72+
)
73+
74+
<script>
75+
function immutablesSerializationHandler(node) {
76+
var tagName = node.tagName;
77+
78+
return "<" + tagName + ">" + "</" + tagName + ">";
79+
}
80+
</script>
81+
```
82+
83+
## Deserialize Immutables
84+
85+
The [`Deserialization()`](/api/Kendo.Mvc.UI.Fluent/EditorImmutablesSettingsBuilder#deserializationsystemfuncsystemobjectsystemobject) does the opposite of the `Serialization()` one&mdash;it takes the HTML representation from the `ViewHtml` dialog and alters the immutable DOM element based on the logic implemented in the callback function.
86+
87+
The following example demonstrates how to use the `Serialization()` and `Deserialization()` options to expose the CSS `text-align` property in the `ViewHtml` dialog so that the user is able to change it from the HTML code.
88+
89+
###### Example
90+
91+
```
92+
@(Html.Kendo().Editor()
93+
.Name("editor")
94+
.Immutables(i => i
95+
.Serialization("<immutable style='# if(data.style.textAlign){#text-align: #=data.style.textAlign##}#'></immutable>")
96+
.Deserialization("immutablesDeserializationHandler")
97+
)
98+
.Value("<div contenteditable='false'>this is immutable</div><div>this is mutable</div>")
99+
)
100+
<script>
101+
function immutablesDeserializationHandler(node, immutable) {
102+
immutable.style.textAlign = node.style.textAlign;
103+
}
104+
</script>
105+
```
106+
107+
## Apply Default Decoration to Immutables
108+
109+
To decorate all `contenteditable="false"` elements and improve user experience (UX), use a CSS rule.
110+
111+
If you use the [classic mode]({% slug htmlhelpers_editor_modes_aspnetcore %}#classic-mode), add the CSS rule to an external CSS file adjoined to the [stylesheet collection]({% slug htmlhelpers_editor_styling_aspnetcore %}) of the Editor.
112+
113+
If you use the [inline mode]({% slug htmlhelpers_editor_modes_aspnetcore %}#inline-mode), place the CSS rule on the page as demonstrated in the following example.
114+
115+
###### Example
116+
117+
```
118+
<style>
119+
.k-editor [contenteditable='false']{
120+
opacity: 0.5;
121+
}
122+
</style>
123+
124+
@(Html.Kendo().Editor()
125+
.Name("editor")
126+
.Tag("div")
127+
.Immutables(true)
128+
.Value("<div contenteditable='false'>this is immutable</div><div>this is mutable</div>")
129+
)
130+
```
131+
132+
## See Also
133+
134+
* [Overview of the Editor HtmlHelper]({% slug htmlhelpers_editor_aspnetcore %})
135+
* [Modes of Operation]({% slug htmlhelpers_editor_modes_aspnetcore %})
136+
* [Tools]({% slug htmlhelpers_editor_tools_aspnetcore %})
137+
* [Pasting Content]({% slug htmlhelpers_editor_pasting_aspnetcore %})
138+
* [Serialize / Deserialize Content]({% slug htmlhelpers_editor_serialize_aspnetcore %})
139+
* [Image Browser]({% slug htmlhelpers_editor_image_browser_aspnetcore %})
140+
* [Styling Content]({% slug htmlhelpers_editor_styling_aspnetcore %})

‎docs-aspnet-core/html-helpers/editors/editor/modes.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Modes
3+
page_title: Editor Modes | Telerik UI for ASP.NET Core HtmlHelpers
4+
description: "Learn which are the modes in which the Kendo UI Editor HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC) operates."
5+
slug: htmlhelpers_editor_modes_aspnetcore
6+
position: 2
7+
---
8+
9+
# Editor Modes
10+
11+
Depending on the element from which the Editor is created, it assumes 2 mode types:
12+
* The [classic mode type](#classic-mode).
13+
* The [inline mode type](#inline-mode).
14+
15+
## Classic Mode
16+
17+
If you use the default element for the Editor initialization (a `<textarea>` element), it assumes its classic mode. The `textarea` is not visible and is used to hold the value of the widget. You can type in the `contenteditable iframe` that is created.
18+
19+
###### Example
20+
21+
```
22+
@(Html.Kendo().Editor()
23+
.Name("editor")
24+
.HtmlAttributes(new { style = "width: 100%;height:440px" })
25+
)
26+
```
27+
28+
The classic Editor posts its value automatically because it is based on a `form` element. The tools of the Editor are always visible. Its content does not reside on the main web page and the styling of the page does not influence the editable content. To apply custom styles to the editable content, [inject them through the configuration of the Editor]({% slug htmlhelpers_editor_styling_aspnetcore %}).
29+
30+
[Demo of the Classic Mode Editor](https://demos.telerik.com/aspnet-core/editor/index)
31+
32+
## Inline Mode
33+
34+
If you use the `Tag()` method of the Editor HTML helper with parameter `"div"`, it assumes its inline mode. The `<div>` element is made content-editable and is used by the widget to return its value.
35+
36+
###### Example
37+
38+
```
39+
@(Html.Kendo().Editor()
40+
.Name("editor")
41+
.Tag("div")
42+
.HtmlAttributes(new { style = "width: 100%;height:440px" })
43+
)
44+
```
45+
46+
With the above, the tools of the Editor are only visible when the widget is focused. Its content resides on the main web page and the styling of the page influences the editable content.
47+
48+
> **Important**
49+
>
50+
> While it is possible to initialize an inline Editor from a non-`div` element, such as `p` or `h1`, it is strongly recommended that you use the `<div>` one. Do not use `<table>` elements for creating inline Editors because of Internet Explorer browser limitations.
51+
52+
Editor widgets instantiated from a contentEditable element will not post their value to the server when submitted within a form. If you need to submit these, see [the how to post the inline editor value help section](https://docs.telerik.com/kendo-ui/controls/editors/editor/troubleshoot/troubleshooting#inline-editor-value-is-not-posted-to-the-server#inline-value-is-not-posted-to-server).
53+
54+
[Demo of the Inline Mode Editor](https://demos.telerik.com/aspnet-core/editor/inline-editing)
55+
56+
> **Important**
57+
>
58+
> Because of the limited `iframe` support provided by the iOS Safari browser, it is recommended to use the inline Editor mode on iOS devices.
59+
60+
## See Also
61+
62+
* [Overview of the Editor HtmlHelper]({% slug htmlhelpers_editor_aspnetcore %})
63+
* [Tools]({% slug htmlhelpers_editor_tools_aspnetcore %})
64+
* [Pasting Content]({% slug htmlhelpers_editor_pasting_aspnetcore %})
65+
* [Serialize / Deserialize Content]({% slug htmlhelpers_editor_serialize_aspnetcore %})
66+
* [Image Browser]({% slug htmlhelpers_editor_image_browser_aspnetcore %})
67+
* [Immutable Elements]({% slug htmlhelpers_editor_immutable_aspnetcore %})
68+
* [Styling Content]({% slug htmlhelpers_editor_styling_aspnetcore %})

0 commit comments

Comments
 (0)