Integrate WebSpellChecker to ASP.NET Controls

In addition to its easy integration with our own WebTextEditor, WebSpellChecker can also be used to target standard ASP.NET controls such as simple textbox, multiline textarea as well as IFRAME. Similar to the WebTextEditor integration, using WebSpellChecker with ASP.NET controls is very easy and requires no coding at all.

To use WebSpellChecker in standard ASP.NET controls, simply pay attention on these two properties, TargetControlId and TargetControlIdValue. The properties are explained in the following.

• TargetControlId
  This property is required to determine the target control for spell check.For instance, TargetControlId should be filled with “TextBox1” value if you would like to spell check on TextBox1 control.
• TargetControlIdValue
  This property determines the client-side property of the element from which WebSpellChecker should obtain the value for spell check. It’s important to note that the value or content property should be accessible from client-side.For instance, if WebSpellChecker is targetting TextBox server side control, then the TargetControlIdValue property should be set to “value” instead of “Text”.

When WebSpellChecker is not integrated to WebTextEditor or editable IFrame, it will use the built-in DialogBox interface instead of “red wave underline highlight” mode. For further information about WebSpellChecker interface mode, you can find read the detail explanation in here.

To integrate WebSpellChecker to a ASP.NET TextBox, please follow the step-by-step guide below.

1. Drag and drop ASP.NET TextBox control and TextBox control with ID’s TextBox1 will appear.
2. Drag and drop HTML Button control and Button control with the ID’s Button1 will appear. This button is used to start the spell checking from TextBox’s value.
3. Drag and drop Intersoft WebSpellChecker control and WebSpellChecker control with ID’s WebSpellChecker1 will appear.
4. Set WebSpellChecker’s TargetControlId to TextBox1 and TargetControlIdValue to value.
5. Attach onclick client side event to Button1 and set it to CheckSpell function.
   <input id=”Button1″ type=”button” value=”button” onclick=”CheckSpell()” /><script language=”javascript” type=”text/javascript”>
   function CheckSpell()
   {
   var sp = ISGetObject(“WebSpellChecker1”);
   sp.CheckSpell();
   }
   </script>
6. Integration is finished.

The above sample can be found here. Other samples about WebSpellChecker and the explanation can be found in Intersoft’s live sample.

If you have any questions or feedback, please don’t hesitate to post your questions in Intersoft Forums.

Best Regards,
Budianto Muliawan

Easily Integrate WebSpellChecker to WebTextEditor

WebSpellChecker is designed as a standalone component which you can use independently to target standard ASP.NET controls such as Textbox and IFRAME. In addition, WebSpellChecker can also be easily integrated to WebTextEditor, which seamlessly adds spell checker functionality to the rich text editor. In this post, I’ll explain how easy it is to integrate our spell checker component to rich text editor.  If you haven’t familiar with our spell check features, check out my previous post here.

Integration with WebSpellChecker for spell checking can be done elegantly without having to write codes. To integrate WebTextEditor to WebSpellChecker, simply perform the following steps:

1. Add WebTextEditor and WebSpellChecker instance to your Webform page
2. In WebSpellChecker instance, set the following properties:
   TargetControlId to  The control id of WebTextEditor.
   IntegratedToWebTextEditor to True.

When integrated to WebTextEditor, WebSpellChecker will automatically enable Microsoft Word-style red wave highlight feature. For further information about WebSpellChecker’s mode, please refer to WebSpellChecker documentation or the overview here.

When integrated to WebTextEditor, WebSpellChecker will enable sophisticated navigation experience, and also automatically connect to WebTextEditor’s user interface to provide more advanced spell checking commands.

You can perform spell checking in several ways:

1. Spell checker command in toolbar.
   When WebSpellChecker integration is configured properly, the spell checker command in WebTextEditor’s toolbar will be enabled. Click on this command to start spell checking which activates spell check editing mode. Click on the command again to exit from spell checking mode.

   

2. Auto-navigate spell checker command in status bar. This easy-to-access button provides user with convenient way to perform spell checking. It’s particularly useful when the editor is loading in minimal toolbar configuration where spell checker command may not be available in the toolbar.

   

   When clicked for the first time, WebSpellChecker executes spell checking process and automatically focus on the first misspelled word with suggested word list displayed in intuitive context menu interface. Click on the button again to easily navigate to the next misspelled word.

   

By now you should have learnt how to add spell checker functionality to WebTextEditor. At this point, you might be wondering whether you need to write more codes or spend more efforts to get the fantastic UX shown above. The fact is you don’t need any efforts — it’s all automatic, and yeap, it’s that easy!

If you haven’t used WebTextEditor, but would like to see how it fits in your application, you can download the free 30 day trial here. Enjoy, and thanks for reading!

Warm Regards,
Budianto Muliawan

Introducing Intersoft WebSpellChecker for ASP.NET

An often overlooked new component that we shipped in 2009 is our spell checker component for ASP.NET. So in this post, I decided to write some wrap up on WebSpellChecker, so you can get some ideas on its features, what it looks like, how easy to consume it in your web page and more.

Intersoft WebSpellChecker is an easy-to-use, yet powerful spell checking component for ASP.NET. In addition to typical spell check features that you expected, WebSpellChecker delivers several innovative features that are not available elsewhere, such as Microsoft Word-style red-wave underline highlight, built-in dialogbox with intuitive design, natural integration with WebTextEditor, wide cross browsers support and more.

In case you’re not aware, WebTextEditor actually includes 3 controls. So you can think it more like a Suite or Collection product. It includes 3 essential components: rich text editor, spell checker and file uploader. That means if you get a copy of WebTextEditor, then you get all three with the price of one. More values for your bucks spent — what could be better in such economic condition?

Speaking on the pricing wise, WebTextEditor is set at a very affordable pricing and is certainly in the range of competitive market price. Unlike other solutions, we deliver a full and real editor functionality without requiring you to buy separate components for spell checking and uploading — an all-in-one suite for all your form editing needs.

Allright, let’s jump into WebSpellChecker in more details.

Intersoft WebSpellChecker is the first spell checker component to provide two modes of spell checking user interface.

1. Red-wave Underline Highlight
   WebSpellChecker introduces more natural, intuitive way to perform spell checking with red wave highlight feature. To correct misspelled words, just right click on each misspell word and choose the correct word from the displayed word(s) in context menu. It makes spell checking faster and easier than ever.

   

   Please note that this red wave highlight feature can only be enabled on editable IFRAME.

2. User-friendly Dialog Box Interface
   This mode will be automatically enabled when the target control is not an editable IFRAME. The dialog box interface includes visual elements that display checked words and the suggestion words list. Just double click on a word in suggestion list or click on the Change button to correct the misspelled word with the selected suggested word, and finally click on Done button to accept all changes and close the dialog box.
   

User interaction on WebSpellChecker can be done through several options available in the context menu interface or in WebDialogBox interface.

Here are the options:

1. Change
   This option is only available in WebDialogBox mode; it is used to change the selected misspelled word with the selected suggested word.
   Alternatively, you can correct the misspelled word by simply double clicking on the suggested word.
   
2. Add to dictionary
   Often times, WebSpellChecker may show specific terms such as scientific or other valid words as misspelled words. This occurred because the specific words don’t exist in dictionary. WebSpellChecker makes it possible for users to add such words into dictionary, so that WebSpellChecker will not mark it as misspelled word again in the future. To add word to a dictionary, simply right click on the specific word and choose “Add to dictionary” option in the context menu.Note that in order to add to dictionary, the dictionary folder’s permission should be granted with write access.
   
3. Ignore
   This command is used in a scenario where user would like WebSpellChecker to ignore a misspelled word so it will be marked as correct word instead of misspelled. If there are other similar words, WebSpellChecker will not mark other instances as correct word. This command is available in both context menu and dialog box interface.
   
4. Ignore All
   Similar with Ignore command, “Ignore all” will mark the misspelled word to correct word. The only difference is “Ignore all” will mark all similar words as correct words, instead of just the selected word.
   

That’s all for now! In my next post, I’ll discuss how you can integrate spell checker into rich text editor easily, and elegantly. To learn more about spell checker features, please head to Spell Checker Features page.

For any questions, feedback, or thoughts, please feel free to comment on my post. Thank you for reading.

Best Regards,
Budianto Muliawan