Auto Correction
The Bootstrap Rich Text Editor supports the AutoCorrect feature that allows you to analyze the typed text and modify or substitute it. The control provides the AutoCorrect capabilities that can be enabled by setting the corresponding server-side properties to true. You also can perform custom substitution algorithms by handling the client-side AutoCorrect event.
You can enable the built-in AutoCorrect feature using the following server-side properties:
CorrectTwoInitialCapitals - specifies whether the control should correct words that start with two capital letters by changing the second letter to lowercase.DetectUrls - specifies whether the control should detect URI strings and format them as hyperlinks.EnableAutomaticNumbering - specifies whether the control should automatically start numbered or bulleted lists when the specific symbols are typed.ReplaceTextAsYouType - specifies whether the control should search a replacement for the typed string in the AutoCorrectReplaceInfoCollectioncollection.
If you need to extend the control’s AutoCorrect functionality, you can handle client-side AutoCorrect event that occurs when a user types text in the control. While handling the event, you can use the client commands to insert formatted text, images, tables, and other document objects.
In this demo, you can try the AutoCorrect functionality by typing symbols to in the rightmost column of the table in the document.
<dx:BootstrapRichEdit ID="RichEditAutoCorrect" runat="server" ActiveTabIndex="0" ShowConfirmOnLosingChanges="false">
<ClientSideEvents AutoCorrect="OnAutoCorrect" />
<Settings>
<AutoCorrect CorrectTwoInitialCapitals="true" DetectUrls="true" EnableAutomaticNumbering="true" ReplaceTextAsYouType="true">
<ReplaceInfoCollectionSettings CaseSensitive="false">
<AutoCorrectReplaceInfoCollection>
<dx:ASPxRichEditAutoCorrectReplaceInfo What="(c)" With="©" />
<dx:ASPxRichEditAutoCorrectReplaceInfo What="wnwd" With="well-nourished, well-developed" />
<dx:ASPxRichEditAutoCorrectReplaceInfo What="pctus" With="Please do not hesitate to contact us again in case of any further questions" />
</AutoCorrectReplaceInfoCollection>
</ReplaceInfoCollectionSettings>
</AutoCorrect>
</Settings>
</dx:BootstrapRichEdit>
function OnAutoCorrect(s, e) {
switch (e.text) {
case "dxlogo":
s.selection.intervals = [e.interval];
s.commands.insertPicture.execute("../Content/logo.png");
e.handled = true;
break;
case "bldtxt":
s.selection.intervals = [e.interval];
s.commands.changeFontBold.execute(true);
s.commands.insertText.execute("Bold Text");
s.commands.changeFontBold.execute(false);
e.handled = true;
break;
}
}