Merge pull request #951 from telerik/didi/update-rte-images-feature-articles
Update RTE InsertImages and add tabview isvidible note for contentpre…
This commit is contained in:
Lance McCarthy
GitHub
Коммит
f763f7d767
|
|
@ -561,6 +561,9 @@ navigation:
|
|||
controls/richtexteditor:
|
||||
title: "RichTextEditor"
|
||||
## RichTextEditor Sub-Folders
|
||||
controls/richtexteditor/working-with-images:
|
||||
title: "Working with Images"
|
||||
position: 6
|
||||
controls/richtexteditor/styling:
|
||||
title: "Styling"
|
||||
position: 11
|
||||
|
|
|
|||
|
|
@ -115,6 +115,10 @@ And the event handler which shows a custom message:
|
|||
Here is the custom message:
|
||||
|
||||
|
||||
|
||||
## Working With Images
|
||||
|
||||
You can easily add insert, delete, copy, paste, cut, edit images in the editor using the predefined toolbar items. For more details please check [Workin with Images]({%slug richtexteditor-images-overview%}) article.
|
||||
|
||||
## Read-Only State
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Telerik RichTextEditor for Xamarin enables users to create rich textual content
|
|||
|
||||
* **Commands Support**: RichTextEditor exposes commands, such as ToggleBoldCommand, ToggleBulletingCommand, AlignRightCommand, etc, that allow you to execute rich text editing actions over the loaded into the editor content. For detailed information on the matter check [Commands]({%slug richtexteditor-commands%}) article.
|
||||
|
||||
* **Insert and Edit Images Support**: You can easily insert images and use the built-in edit images operations like resize, cut, copy, paste, remove. Read more about this in [Insert and Edit Images]({%slug richtexteditor-insert-images%}) article.
|
||||
* **Insert and Edit Images Support**: You can easily insert images and use the built-in edit images operations like resize, cut, copy, paste, remove. Read more about this in [Working with Images]({%slug richtexteditor-images-overview%}) article.
|
||||
|
||||
* **RichTextEditor Toolbar**: Take advantage of a pre-defined UI automatically wired with all of the commands provided by the control through built-in functionality. For more details check the [RadRichTextEditor Toolbar]({%slug richtexteditor-toolbar%}) article.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
title: Overview
|
||||
page_title: Xamarin RichTextEditor Documentation | Working with Images
|
||||
description: Check our "Working with Images" documentation article for Telerik RichTextEditor for Xamarin control.
|
||||
tags: edit, add, delete, images, insert images
|
||||
position: 1
|
||||
slug: richtexteditor-images-overview
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
||||
From R3 2021 release the RichTextEditor control allows you to add(insert), cut, copy, paste, resize and delete images using built-in toolbar items.
|
||||
|
||||
|
||||
|
||||
|
||||
* `AddImageToolbarItem`(*RichTextEditorToolbarItem*): allows you to add images
|
||||
* `EditImageToolbarItem`(*InsertImageToolbarItem*): allows you to resize the image. In addition the toolbar allows you to pick an image if you haven't selected one.
|
||||
* `CutToolbarItem`(*RichTextEditorToolbarItem*): allows you to cut the selected HTML/image from the clipboard.
|
||||
* `CopyToolbarItem`(*RichTextEditorToolbarItem*): allows you to copy the selected HTML to the clipboard.
|
||||
* `PasteHtmlToolbarItem`(*RichTextEditorToolbarItem*): allows you to paste HTML from the clipboard.
|
||||
* `RemoveImageToolbarItem`(*RichTextEditorToolbarItem*): allows you to remove/delete the currently selected image.
|
||||
|
||||
You can insert images from Uri, Data(byte []), Stream, File. The image source is of type `RichTextImageSource`. Also you have to point out the image format type.
|
||||
|
||||
The supported image format types(of type `RichTextImageType`) are:
|
||||
|
||||
**Gif**
|
||||
**Jpeg**
|
||||
**Png**
|
||||
**Svg**
|
||||
**Webp**
|
||||
|
||||
## Permissions if adding images from gallery
|
||||
|
||||
>important If you want to work with images from the device gallery, then you have to grant permissions.
|
||||
|
||||
Add images using the predefined toolbar item - `AddImageToolbarItem`. When tapping on it the `PickImage` event is raised. You need to implement your logic for picking images from the gallery insdie the PickImage event handler:
|
||||
|
||||
The RichTextEditor definition in XAML and the Toolbar definition:
|
||||
|
||||
<snippet id='rte-insert-images' />
|
||||
|
||||
And the PickImage event handler with implementation to get permissions to access photos and media on the device
|
||||
|
||||
<snippet id='rte-insert-images-pick-image-implementation' />
|
||||
|
||||
Load HTML file
|
||||
|
||||
<snippet id='rte-insert-images-add-rte-source' />
|
||||
|
||||
|
||||
|
||||
The demo uses the Xam.Plugin.Media nuget package for all projects - .NET Standard, Android, iOS, UWP. In addition for Android Plugin.Permissions NuGet package is installed.
|
||||
|
||||
### Permissions for Android
|
||||
|
||||
Inside the OnCreate method initialize the Plugin.Media:
|
||||
|
||||
```C#
|
||||
Plugin.Media.CrossMedia.Current.Initialize();
|
||||
```
|
||||
|
||||
Inside the MainActivity.cs file override the `OnRequestPermissionsResult` method
|
||||
|
||||
```C#
|
||||
public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Permission[] grantResults)
|
||||
{
|
||||
Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
|
||||
Plugin.Permissions.PermissionsImplementation.Current.OnRequestPermissionsResult(requestCode, permissions, grantResults);
|
||||
base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
|
||||
}
|
||||
```
|
||||
|
||||
### Permissions for iOS
|
||||
|
||||
Inside the Info.plist file add the following code to grant permissions to access the device gallery
|
||||
|
||||
```xml
|
||||
<key>NSPhotoLibraryUsageDescription</key>
|
||||
<string>This app needs access to photos.</string>
|
||||
<key>NSPhotoLibraryAddUsageDescription</key>
|
||||
<string>This app needs access to the photo gallery.</string>
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
* **PickImage**: Raised when the user has requested to pick an image in the RadRichTextEditor. The PickImage event handler receives two parameters:
|
||||
* The `sender` which is the RichTextEditor control;
|
||||
* `PickImageEventArgs` provides the following methods:
|
||||
* `Accept` - Invoke this method when the user has picked an image. Recieves one paramerter `imagesource` of type RichTextImageSource (Specifies the RichTextImageSource for the picked image);
|
||||
* `Cancel` - Invoke this method when the user has cancelled the operation;
|
||||
|
||||
* **InsertImageError**: Raised when trying to insert an image in the RadRichTextEditor. The InsertImageError event handler receives two parameters:
|
||||
* The `sender` which is the RichTextEditor control;
|
||||
* `InsertImageErrorEventArgs` provides the following methods:
|
||||
* `Source` - of type RichTextImageSource. The property allows you to get the source of the image (read-only property).
|
||||
* `error` - of type Exception. Specifies the exception that is raised when image cannot be inserted.
|
||||
|
||||
* **IsImageSelectedChanged**: Raised when an image inside the editor is selected. The IsImageSelectedChanged event handler receives two parameters:
|
||||
* The `sender` which is the RichTextEditor control;
|
||||
* `RadValueChangedEventArgs<bool>` provides `NewValue` and `OldValue` properties of type **bool**, indicating the `IsImageSelected` property change.
|
||||
|
||||
## Methods
|
||||
|
||||
* `GetImageAsync` method returns asynchronously the current selected image (or null in case there is no image). The RichTextImage object contains the Source, Title, Width and Height of the image;
|
||||
|
||||
## Commands
|
||||
|
||||
* **InsertImageCommand**(*ICommand*): uses for inserting images in the editor. The command takes a single parameter of type `RichTextImage`. The RichTextImage object contains the source, title, width, height of the image. If you do not set width and height explicitly, the image will be added with its original size.
|
||||
* **RemoveImageCommand**(*ICommand*): uses for removing images from the editor.
|
||||
|
||||
## See Also
|
||||
|
||||
- [Key Features]({%slug richtexteditor-key-features%})
|
||||
- [RadRichTextEditor Toolbar]({%slug richtexteditor-toolbar%})
|
||||
- [Commands]({%slug richtexteditor-commands%})
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
---
|
||||
title: Insert and Edit Images
|
||||
page_title: Xamarin RichTextEditor Documentation | Insert and Edit Images
|
||||
description: Check our "Insert Edit Images" documentation article for Telerik RichTextEditor for Xamarin control.
|
||||
position: 2
|
||||
slug: richtexteditor-insert-images
|
||||
---
|
||||
|
||||
# Toolbar Items for Working With Images
|
||||
|
||||
In this article we will review the built-in toolbar items for imsert and edit images.
|
||||
|
||||
## Insert Images
|
||||
|
||||
* `AddImageToolbarItem`
|
||||
|
||||
Default look of the `AddImageToolbarItem`:
|
||||
|
||||
|
||||
|
||||
## Built-in Toolbar Items for editing images
|
||||
|
||||
The following Built-in Toolbar itema are displayed in the RichTextEditorToolbar when image is selected:
|
||||
|
||||
* `EditImageToolbarItem`(*InsertImageToolbarItem*): allows you to resize the image. In addition the toolbar allows you to pick an image if you haven't selected one.
|
||||
* `CutToolbarItem`(*RichTextEditorToolbarItem*): allows you to cut the selected HTML/image from the clipboard.
|
||||
* `CopyToolbarItem`(*RichTextEditorToolbarItem*): allows you to copy the selected HTML to the clipboard.
|
||||
* `PasteHtmlToolbarItem`(*RichTextEditorToolbarItem*): allows you to paste HTML from the clipboard.
|
||||
* `RemoveImageToolbarItem`(*RichTextEditorToolbarItem*): allows you to remove/delete the currently selected image.
|
||||
|
||||
How the editing toolbar looks when image is selected:
|
||||
|
||||
|
||||
|
||||
## Edit Image ToolbarItem
|
||||
|
||||
EditImageToolbarItem allows you to resize the image and pick an image. When tapping on the **EditImageToolbarItem**, a dialog is displayed.
|
||||
|
||||
* **Text**(*string*): Defines the Edit Icon Text
|
||||
* **HeaderText**(*string*): Defines the header text value. Default string `Image`
|
||||
* **PickButtonText**(*string*): Defines the text of the button that allows you to pick images. Note that `PickImage` event is raised when `PickButton`(of type *Xamarin.Forms.Button*) is pressed.
|
||||
* **ResizeLabelText**(*string*): Defines the text of the `Resize` Xamarin.Forms.Label. Default value `Resize:`
|
||||
* **MinimumLabelText**(*string*): Defines the text of the Minimum Xamarin.Forms.Label. Default value `0%`
|
||||
* **MaximumLabelText**(*string*): Defines the text of the Maximum Xamarin.Forms.Label. Default value `100%`
|
||||
* **OkButtonText**(*string*): Defines the text for Ok button. Default value `Ok`
|
||||
* **CancelButtonText**(*string*): Defines the text for Cancel button. Default value: `Cancel`
|
||||
* **PopupContentStyle**(*Style*): Defines the Style applied to the popup content.
|
||||
* **PopupOutsideBackgroundColor**(*Color*): Defines the backgrounf color applied outside of the popup content.
|
||||
* **PopupContentTemplate**(*ControlTemplate*): Defines the control template of the popup.
|
||||
|
||||
|
||||
|
||||
>Insert Images example can be found inside the **SDK Browser App - RichTextEditor/Features folder**
|
||||
|
||||
## ImagePickerToolbar Item
|
||||
|
||||
* **ImagePickerToolbarItem**(*Telerik.XamarinForms.RichTextEditor.PickerToolbarItem*): Allows you to pick an image from a collection of pre-defined images.
|
||||
|
||||
|
||||
|
||||
### Example
|
||||
|
||||
RichTextEditor Definition in XAML and the Toolbar definition:
|
||||
|
||||
<snippet id='richtexteditor-custom-image-picker' />
|
||||
|
||||
Add the namespace:
|
||||
|
||||
```XAML
|
||||
xmlns:telerikRichTextEditor="clr-namespace:Telerik.XamarinForms.RichTextEditor;assembly=Telerik.XamarinForms.RichTextEditor"
|
||||
```
|
||||
|
||||
Add Images inside the ImagePickerToolbarItem ItemsSource:
|
||||
|
||||
<snippet id='rte-custom-image-picker-add-images-to-picker-toolbar-item' />
|
||||
|
||||
Call the InitializeImages inside the page's constructor:
|
||||
|
||||
<snippet id='rte-custom-image-picker-initialize-images' />
|
||||
|
||||
Set the RichTextEditor Source:
|
||||
|
||||
<snippet id='rte-custom-image-picker-html-document' />
|
||||
|
||||
> Custom Image Picker example can be found inside the **SDK Browser App - RichTextEditor/Features folder**
|
||||
|
||||
## See Also
|
||||
|
||||
- [Key Features]({%slug richtexteditor-key-features%})
|
||||
- [RadRichTextEditor Toolbar]({%slug richtexteditor-toolbar%})
|
||||
- [Commands]({%slug richtexteditor-commands%})
|
||||
|
|
@ -19,6 +19,10 @@ position: 3
|
|||
* **IsEnabled**(*bool*): Defines whether the TabView Item is enabled/disabled. By default `IsEnabled` is `True`.
|
||||
* **IsVisible**(*bool*): Specified whether the TabView Item is visible/hidden.
|
||||
|
||||
>important If you want to hide the current Selected TabView Item (setting `IsVisible="False"`), and the RadTabView `IsContentPreserved` property is set to `True`, you have to programatically select the next available item(that is **visible** and **enabled**) and then hide the previously selected item.
|
||||
>important ToggleSelectedItemVisibility example can be found in the SDKBrowserApp/Examples/TabViewControl/FeaturesCategory
|
||||
|
||||
|
||||
## Displaying TabViewItem
|
||||
|
||||
To display a TabViewItem you can add it in the **Items** collection of **RadTabView**.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
title: Toggle TabView SelectedItem Visibility
|
||||
description: How to hide the current selected item when iscontentpreserved is true
|
||||
type: how-to
|
||||
page_title: Hide the current TabView SelectedItem
|
||||
slug: tabview-hide-current-selected-item-iscontentpreserved-true
|
||||
position:
|
||||
tags: tabview, selected item, visibility, iscontentpreserved, true, hide tabview item
|
||||
ticketid: 1532945
|
||||
res_type: kb
|
||||
---
|
||||
|
||||
## Environment
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Product</td>
|
||||
<td>TabView for Xamarin Cross-Platform</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## Description
|
||||
|
||||
This article will explain the approach you need to follow in order to hide the current selected TabView Item when RadTabView.`IsContentPreserved` is `True`.
|
||||
|
||||
## Solution
|
||||
|
||||
You have to programatically select the next available item(that is **visible** and **enabled**) and then hide the previously selected item.
|
||||
|
||||
>important The next selected item must be visible in the TabView Header and must be enabled
|
||||
|
||||
## Example
|
||||
|
||||
RadTabView definition and `IsContentPreserved` set to `True`. On Buton click event we will change the first item visibility.
|
||||
|
||||
```XAML
|
||||
<StackLayout>
|
||||
<Label Text="Hide selected item when RadTabView.IsContentPreserved is true." />
|
||||
<telerikPrimitives:RadTabView x:Name="tabView"
|
||||
IsContentPreserved="True"
|
||||
Margin="0, 30, 0, 0">
|
||||
<telerikPrimitives:RadTabView.Items>
|
||||
<telerikPrimitives:TabViewItem HeaderText="item 1">
|
||||
<telerikPrimitives:TabViewItem.Content>
|
||||
<Label Text="item 1 content" />
|
||||
</telerikPrimitives:TabViewItem.Content>
|
||||
</telerikPrimitives:TabViewItem>
|
||||
<telerikPrimitives:TabViewItem HeaderText="item 2">
|
||||
<telerikPrimitives:TabViewItem.Content>
|
||||
<Label Text="item 2 content" />
|
||||
</telerikPrimitives:TabViewItem.Content>
|
||||
</telerikPrimitives:TabViewItem>
|
||||
<telerikPrimitives:TabViewItem HeaderText="item 3">
|
||||
<telerikPrimitives:TabViewItem.Content>
|
||||
<Label Text="item 3 content" />
|
||||
</telerikPrimitives:TabViewItem.Content>
|
||||
</telerikPrimitives:TabViewItem>
|
||||
</telerikPrimitives:RadTabView.Items>
|
||||
</telerikPrimitives:RadTabView>
|
||||
<Button Text="Invert first item visibility"
|
||||
Clicked="Button_Clicked" />
|
||||
</StackLayout>
|
||||
```
|
||||
|
||||
and here is the logic inside the ButtonClicked method:
|
||||
|
||||
```C#
|
||||
private void Button_Clicked(object sender, System.EventArgs e)
|
||||
{
|
||||
var firstItem = this.tabView.Items[0];
|
||||
|
||||
if (!firstItem.IsSelected)
|
||||
{
|
||||
firstItem.IsVisible = !firstItem.IsVisible;
|
||||
}
|
||||
else
|
||||
{
|
||||
if (firstItem.IsVisible)
|
||||
{
|
||||
this.tabView.Items[1].IsSelected = true;
|
||||
Device.BeginInvokeOnMainThread(async () =>
|
||||
{
|
||||
// Delay used to workaround a bug in iOS SlideView where exception is thrown
|
||||
// if selected item of SlideView control is removed dinamically
|
||||
|
||||
await Task.Delay(50);
|
||||
firstItem.IsVisible = false;
|
||||
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
firstItem.IsVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Загрузка…
Ссылка в новой задаче