Blazor - Get Started with Smart.Editor
Setup The Project
Follow the Getting Started guide to set up your Blazor Application with Smart UI.
Setup Basic Editor
To setup a Smart.Editor, create an Editor component in the Pages/Index.razor file.
<Editor></Editor>
To set an initial value, place HTML content inside the Editor component.
<Editor>
<div class="airplanes">
<h2>Airplanes</h2>
<p>An <b>airplane</b> or <b>aeroplane</b> (informally <b>plane</b>) is a <a
href="https://en.wikipedia.org/wiki/Fixed-wing_aircraft" title="Fixed-wing aircraft">fixed-wing aircraft</a>
that is propelled forward by thrust from
a jet engine, propeller, or rocket engine. Airplanes come in a variety
of sizes, shapes, and wing configurations. The broad spectrum of uses for
airplanes includes recreation, transportation of goods and people,military,
and research. Worldwide, commercial aviation transports more than four
billion passengers annually on airliners and transports more than 200 billion
tonne - kilometersof cargo annually, which is less than 1% of the world's
cargo movement. Most airplanes are flown by a pilot on board the aircraft,
but some are designed to be <a href="https://en.wikipedia.org/wiki/Unmanned_aerial_vehicle"
title="Unmanned aerial vehicle">remotely or computer-controlled</a> such
as drones.</p>
<p>The <a href="https://en.wikipedia.org/wiki/Wright_brothers" title="Wright brothers">Wright brothers</a>
invented
and flew the first airplane in 1903, recognized as "the first sustained
and controlled heavier-than-air powered flight". They built on the works
of <a href="https://en.wikipedia.org/wiki/George_Cayley" title="George Cayley">George Cayley</a> dating
from 1799, when he set forth the concept of the modern airplane (and later
built and flew models and successful passenger-carrying gliders). Between
1867 and 1896, the German pioneer of human aviation <a href="https://en.wikipedia.org/wiki/Otto_Lilienthal" flight. Following its limited use in World War I, aircraft technology continued
to develop. Airplanes had a presence in all the major battles of World
War II. The first jet aircraft was the German <a href="https://en.wikipedia.org/wiki/Heinkel_He_178"
title="Heinkel He 178">Heinkel He 178</a>
in 1939. The first jet airliner,
the <a href="https://en.wikipedia.org/wiki/De_Havilland_Comet" title="De Havilland Comet">de Havilland Comet</a>, was introduced in 1952. The <a href="https://en.wikipedia.org/wiki/Boeing_707"
title="Boeing 707">Boeing 707</a>, the first widely successful commercial jet,
was in commercial service for more than 50 years, from 1958 to at least
2013.</p>
<table>
<thead>
<tr>
<th> <b>Characteristics</b>
</th>
<th> <b>Description</b>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airframe</td>
<td>The structural parts of a fixed-wing aircraft are called the airframe</td>
</tr>
<tr>
<td>Wings</td>
<td>The wings of a fixed-wing aircraft are static planes extending either
side of the aircraft. When the aircraft travels forwards, air flows over
the wings, which are shaped to create lift.</td>
</tr>
<tr>
<td>Fuselage</td>
<td>A fuselage is a long, thin body, usually with tapered or rounded ends
to make its shape aerodynamically smooth.</td>
</tr>
<tr>
<td colspan="2"> <b><i>Wings vs. bodies</i></b>
<div class="table-wrapper">
<table>
<tbody>
<tr>
<td>Flying wing</td>
<td>A flying wing is a tailless aircraft which has no definite fuselage. Most
of the crew, payload and equipment are housed inside the main wing
structure.</td>
</tr>
<tr>
<td>Blended wing body</td>
<td>Blended wing body aircraft have a flattened and airfoil shaped body, which
produces most of the lift to keep itself aloft, and distinct and separate
wing structures, though the wings are smoothly blended in with the body.
</td>
</tr>
<tr>
<td>Lifting body</td>
<td>A lifting body is a configuration in which the body itself produces lift.
In contrast to a flying wing, which is a wing with minimal or no
conventional
fuselage, a lifting body can be thought of as a fuselage with little or
no conventional wing.</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>Empennage and foreplane</td>
<td>The classic airfoil section wing is unstable in flight and difficult to
control. Flexible-wing types often rely on an anchor line or the weight
of a pilot hanging beneath to maintain the correct attitude.</td>
</tr>
<tr>
<td>Controls and instruments</td>
<td>Airplanes have complex flight control systems. The main controls allow
the pilot to direct the aircraft in the air by controlling the attitude
(roll, pitch and yaw) and engine thrust.</td>
</tr>
</tbody>
</table>
<p style="text-align: right;"><i>From Wikipedia, the free encyclopedia</i>
</p>
</div>
</Editor>
Customize Toolbar
Smart.Editor allows you to customize the tools displayed to the user in the Toolbar
Create a list of the Toolbar Items you want to display and attach it to the Editor component via the ToolbarItems property
<Editor ToolbarItems="@items">
....
</Editor>
@code {
List <IEditorToolbarItem> items = new List <IEditorToolbarItem>()
{
new EditorToolbarItem() { Name = "Bold" },
new EditorToolbarItem() { Name = "Italic" },
new EditorToolbarItem() { Name = "Underline" },
new EditorToolbarItem() { Name = "StrikeThrough" },
new EditorToolbarItem() { Name = "FontName" },
new EditorToolbarItem() { Name = "FontSize" },
new EditorToolbarItem() { Name = "FontColor" },
new EditorToolbarItem() { Name = "BackgroundColor" },
new EditorToolbarItem() { Name = "LowerCase" },
new EditorToolbarItem() { Name = "UpperCase" },
new EditorToolbarItem() { Name = "Formats" },
new EditorToolbarItem() { Name = "Alignment" },
new EditorToolbarItem() { Name = "OrderedList" },
new EditorToolbarItem() { Name = "UnorderedList" },
new EditorToolbarItem() { Name = "Outdent" },
new EditorToolbarItem() { Name = "Indent" },
new EditorToolbarItem() { Name = "Hyperlink" },
new EditorToolbarItem() { Name = "Table" },
new EditorToolbarItem() { Name = "Image" },
new EditorToolbarItem() { Name = "Undo" },
new EditorToolbarItem() { Name = "Redo" },
new EditorToolbarItem() { Name = "Print" },
new EditorToolbarItem() { Name = "ClearFormat" }
};
}
Toolbar View Modes
The Toolbar Menu can be displayed in multiple different modes: Toggle(default), MultiRow and Scroll.
Set the ToolbarViewMode property to the mode you want to use.
<Editor ToolbarItems="@items" ToolbarViewMode="ToolbarViewMode.Scroll">
...
</Editor>
Char Counter
Smart.Editor keeps track of the character count at any time.
The maxCharCount property allows you to set the limit of charcters.
The ShowCharCount property determines whether the char counter is visible or not.
If the number of characters nears the maximum allowed, the Char Counter turns red.
<Editor ToolbarItems="@items" ToolbarViewMode="ToolbarViewMode.Scroll" ShowCharCount="true" MaxCharCount="800">
...
</Editor>
