Rich text editor allows to insert images from online sources as well as local computer where you want to insert the image in your content. For inserting the image to the RichTextEditor, the following list of options have been provided in the
|allowedTypes||Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.|
|display||Sets the default display for an image when it is inserted in to the RichTextEditor. Possible options are: ‘inline’ and ‘block’.|
|width||Sets the default width of the image when it is inserted in the RichTextEditor.|
|height||Sets the default height of the image when it is inserted in the RichTextEditor.|
|saveUrl||Provides URL to map the action result method to save the image.|
|path||Specifies the location to store the image.|
browse option in the Image dialog, select the image from the local machine and insert into the RichTextEditor content.
If the path field is not specified in the
insertImageSettings, the image will be converted into base 64 and blob url for the image will be created and the generated url will be set as src property of
<img> tag as below.
In the below sample, the image has been load from the local machine and it will be saved in the given location.
<ejs-richtexteditor id="image" value="@ViewBag.value"> <e-richtexteditor-insertimagesettings display="inline"></e-richtexteditor-insertimagesettings> <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings> </ejs-richtexteditor>
If you want to remove am image from the RichTextEditor content, select the image and click “Remove” tool from quick toolbar. It will delete the image from the RichTextEditor content as well as from the service location if the saveUrl is given.
Once you select the image from the local machine, the URL for the image will be generate, from there also you remove the image from the service location through the clicking of cross icon as below in the image.
If you want to insert an image from online source like Google, Ping, etc., you need to enable images tool on the editor’s toolbar. By default, the images tool is open an image dialog which allows you to insert an image from online source.
quickToolbar also you can change the width and height using
Change Size option. Once click into the option. The Image Size dialog will open as below. In that specify the width and height of the image in pixel.
Image caption and alternative text can be specified for the inserted image in the RichTextEditor through the
quickToolbar options such as Image Caption and Alternative Text.
Through the Alternative Text option, set the alternative text for the image, when the image is not upload successfully into the RichTextEditor.
By clicking the Image Caption, the image will get wrapped in an image element with a caption. Then, you can type caption content inside the RichTextEditor.
<ejs-richtexteditor id="image" value="@ViewBag.value"> <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings> </ejs-richtexteditor>
The hyperlink itself can be an image in RichTextEditor. If the image given as hyperlink, the remove, edit and open link will be added to the quick toolbar of image as below. For further details about link, please see the