Tag Archives: WebTextEditor

WebTextEditor Integration with WebFileUploader

As described in our website, WebTextEditor includes three components: WebTextEditor, WebSpellChecker and WebFileUploader. Besides used as a stand-alone component, each product can be integrated to each other to provide a more powerful development tool.

After configuring HTTPModules and HTTPHandlers needed for WebFileUploader, you can simply integrate WebFileUploader to WebTextEditor by configuring FileUploaderSettings >> Enabled to True.

<FileUploaderSettings Enabled="true" />

There are several properties available in FileUploaderSettings.

Property Name Property Description
Enabled Specifies whether or not file uploader is enabled.
DefaultUploadPath Specifies the default upload path in case none is specified in media resource.
DefaultUploadMediaResource Specifies the default media resource that is used as default upload path.
AllowCancel Specifies whether or not the uploading process can be cancelled.
FilesCount Specifies the maximum number of files that can be uploaded in a single uploading

process.
FileTypes Specifies the types of files that can be uploaded.
UploadSizeLimit Specifies the maximum size of the file that can be uploaded.
TotalUploadSizeLimit Specifies the maximum size of the total uploaded files.
ShowFileUploaderCommand Specifies whether or not FileUploader command should be displayed in main toolbar.

When integrated to WebTextEditor, users can use the integrated WebFileUploader in built-in Media Gallery. When enabled, a tool command, Insert from Computer, will be added to Media Gallery toolbar. When it is clicked, a callout that contains integrated WebFileUploader will be displayed. Users will be able to choose a file and upload it to the selected media resource or selected path.

Integration with WebFileUploader

As explained in previous blog, you can specify MediaResource collection where each resource represents a resource where user can perform media search. In each MediaResource object, you can specify AllowUserUpload property to True.

<MediaResources>
   <ISWebTextEditor:WebTextEditorMediaResourceGroup Name="media1" Text="Photos">
      <resources>
         <ISWebTextEditor:WebTextEditorResource Name="Images" Url="Images/" AllowUserUpload="true" />
	 <ISWebTextEditor:WebTextEditorResource Name="Thumbnails" Url="Thumbnails/" AllowUserUpload="true" />
      </resources>
   </ISWebTextEditor:WebTextEditorMediaResourceGroup>
</MediaResources>

When this property is enabled, the media resource will be listed in the upload location combo. If there are more than one media resources that enable AllowUserUpload property, you can specify the default selected location in DefaultUploadMediaResource property. Users can select a location in the combo and upload the media to the selected resource.

List of Upload Locations

Instead of allowing users to upload to media resource collections, you can allow users to upload media to a specific upload path. This can be configured in DefaultUploadPath property. If you have configurations set in media resource collection and DefaultUploadMediaResource property, the upload location in DefaultUploadPath property will be ignored. The configurations in media resources will be used instead.

<FileUploaderSettings Enabled="true" DefaultUploadPath="Images/" />

Note that the upload location combo is not displayed. Users only need to select the file and it will be uploaded to the location specified in DefaultUploadPath property automatically.

WebFileUploader with DefaultUploadPath specified

Besides the above configurations, you can also specify the maximum number of files that can be uploaded, the types of files that can be uploaded, the size limitation, and whether or not users can cancel the upload progress. WebTextEditor already specifies these configurations by default, but it can be customized easily using the properties in FileUploaderSettings. For details of the property name, see the FileUploaderSettings properties table above.

Although WebFileUploader is used mostly in Media Gallery pane, its usage is not limited to Media Gallery only. When you don’t enable Media Gallery pane, you can still use integrated WebFileUploader. You can enable ShowFileUploaderCommand property to include Attach File command in main toolbar. The command has the same behavior as Insert from Computer command in Media Gallery toolbar.

Attach File command included in main toolbar

In this case, since Media Gallery is disabled, you need to specify DefaultUploadPath property.

<TaskPaneSettings>
   <MediaGallery Enabled="false" />
</TaskPaneSettings>

<FileUploaderSettings Enabled="true" DefaultUploadPath="Images/" 
   ShowFileUploaderCommand="true" />

Users can click Attach File command and select the file to upload. The file will be uploaded to the location specified in DefaultUploadPath property. The uploading progress bar and the uploaded file status will still be displayed properly.

Upload status is displayed

If the default upload path used in your application is dynamic, you can specify it programmatically in OnPreInitialize server-side event.

protected void WebTextEditor1_PreInitialize1(object sender, EventArgs e)
{
   // set upload path

   // check whether the specified uploadPath has already exists
   DirectoryInfo dir = new DirectoryInfo(Server.MapPath(uploadPath));
   if (!dir.Exists)
      Directory.CreateDirectory(Server.MapPath(uploadPath));

   // set the upload path as DefaultUploadPath
   WebTextEditor1.FileUploaderSettings.DefaultUploadPath = uploadPath;

   // you can specify other file uploader settings in here
   WebTextEditor1.FileUploaderSettings.FileTypes = "*.zip, *.rar;";
}

The above code will check whether or not the uploadPath has already existed. If not, the folder will be created and then set as DefaultUploadPath. In this event, you can specify the default upload path dynamically based on the requirements of your application. The uploader behavior, including the uploading progress and upload file status, will not changed when this approach is used. Users will still be able to select the file and it will be uploaded to the specified upload path.

Both components can be combined to provide a text editor complete with built-in file uploader. You can configure the available settings provided and use it instantly. Give it a try!

Introducing Built-in Media Gallery

WebTextEditor supports built-in media gallery where user can search for media and insert it into editor. Unlike editor in other products, the media gallery in WebTextEditor is placed in TaskPane area, allowing user to still edit and format the text in editor while WebTextEditor performs media searcing. The media can then be included in editor using double click action or using media context menu.

But where will the media be searched in? Currently WebTextEditor only supports folder search, but we have planned to support broader resource type in the future.

WebTextEditor introduces media resource and media resources group collections in MediaResources property. Both the collections allow developers to specify the hierarchy of media resources that is suitable for the scenario without the need to configure it exactly the same as the physical hierarchy. In folder search, each media resource group and media resource objects represent a folder, where media resource will be the sub folder of media resource group.

Let’s say in the physical hierarchy of your computer folders, ProjectImages folder contains three folders: Products, Screenshots, and Others folders. Each folder contains images related to its category. In normal scenario, you can set all three folders as three media resources under one media resource group, Products.

<MediaResources>
   <ISWebTextEditor:WebTextEditorMediaResourceGroup Name=”Products” Text=”Products”>
      <resources>
         <ISWebTextEditor:WebTextEditorResource Name=”resProducts” Url=”images/products/”
           Text=”Product Images”></ISWebTextEditor:WebTextEditorResource>
         <ISWebTextEditor:WebTextEditorResource Name=”resScreenshots” Url=”images/screenshots/”
           Text=”Screenshot Images” SearchInChildFolder=”true”></ISWebTextEditor:WebTextEditorResource>
         <ISWebTextEditor:WebTextEditorResource Name=”resOther” Url=”images/other/”
           Text=”Other Images”></ISWebTextEditor:WebTextEditorResource>
      </resources>
   </ISWebTextEditor:WebTextEditorMediaResourceGroup>
</MediaResources>

When user searches media in Products group, he will automatically search in all three folders, because they are placed under the same group. If he chooses one specific media resource, for example Screenshots, the search will be performed in Screenshots folder only. This way, the search can be narrowed into a specific folder to improve the result of the search.

Search media in Products group

Search media in Products group

What if you want to exclude the search in Others folder because the media that you are looking for is related to products and screenshots categories only? This is not possible using the above hierarchy, because you can either search in all three folders or in one of them.

With the flexibility of media resource concept in WebTextEditor, the above configuration can be modified to meet your new scenario. You can specify two media resource groups: Products and Other groups. Products group includes Products and Screenshots media resources, while Others group includes Others media resource. 

<MediaResources>
   <ISWebTextEditor:WebTextEditorMediaResourceGroup Name=”Products” Text=”Products”>
      <resources>
         <ISWebTextEditor:WebTextEditorResource Name=”resProducts” Url=”images/products/”
           Text=”Product Images”></ISWebTextEditor:WebTextEditorResource>
         <ISWebTextEditor:WebTextEditorResource Name=”resScreenshots” Url=”images/screenshots/”
           Text=”Screenshot Images” SearchInChildFolder=”true”></ISWebTextEditor:WebTextEditorResource>
      </resources>
   </ISWebTextEditor:WebTextEditorMediaResourceGroup>
   <ISWebTextEditor:WebTextEditorMediaResourceGroup Name=”Other” Text=”Other”>
      <resources>
         <ISWebTextEditor:WebTextEditorResource Name=”resOther” Url=”images/other/”
           Text=”Other Images”></ISWebTextEditor:WebTextEditorResource>
      </resources>
   </ISWebTextEditor:WebTextEditorMediaResourceGroup>
</MediaResources>

 When user wants to exclude the search in Others folder, he can simply chooses Products group and the search will be performed on Products and Screenshots folder only.

Rearrange the hierarchy of media resources

Rearrange the hierarchy of media resources

So, it’s very flexible to configure the hierarchy of your media resource according to your requirement. When WebTextEditor is integrated to WebFileUploader, the media resources can be used as the available upload folders as well. This topic will be explained further in the future.

Add media to editor

Add media to editor

The search result can be filtered by inputting search text, narrowing the media resource and the result type. When search result is not filtered, it will return all the available media in all the specified media resource. This could result in a very large output, which could affect the performance. That is why MaxMediaRetrieved property is introduced. You can specify the maximum media retrieved in every search action. By default, the value of this property is 100, which means every search action will only returns the first 100 media, even though the search result is larger than that.

Besides that, you can also enable SearchMediaOnLoad property to specify whether or not you want the search to be performed automatically when Media Gallery is first opened. When enabled, this behavior enables user to easily and directly choose the available media to be included in editor.

In conclusion, WebTextEditor includes built-in media gallery, which can be easily configured and very easy to use.

Saving and loading HTML file in WebTextEditor

As the nature of a text editor, WebTextEditor provides standard capabilities that allow you to easily get and set editor’s content via the property provided in the object model. Developers will then store the content to other physical storage such as database or file for later use. This common scenario is often overlooked in other similar text editors, and thus require developers to manually write codes for such operations. In this post, I’ll show how we designed WebTextEditor to help you easily saving and loading HTML content from physical file.

Loading from physical HTML file can be tricky in the way the HTML is written. It’s pretty easy and straightforward if you’re loading from a HTML file that includes only the body content – where you can simply set the body content to the editor’s Content property. The harder part comes when you’re loading a full, complete HTML that also includes doc type, html declaration, scripts, styles, and other markups outside the body content — which means you have to parse the HTML and obtain only the valid body content. It’s even harder in the saving process where the modified contents should be applied while preserving the non-body contents (such as html declaration, scripts, styles, etc). Looking at these complexities, it’s understandable that many of basic text editor in the market chosen to omit these capabilities.

Intersoft WebTextEditor supports loading from both partial and full HTML, as well as saving to both partial and full HTML file. It’s further explained in the following.

Saving content to HTML

WebTextEditor provides two approaches in performing save operation; it is through server side and client side.

  • Server side
    In the server side, WebTextEditor provides SaveContentToFile method which has various parameters. These parameters are provided to make sure that WebTextEditor covers all file saving scenarios. By default SaveContentToFile method only saves WebTextEditor’s content (without full html). However if you would like to save full html instead of content, you can specify docType or saveFullHTML parameter. For further information, please read the parameter details below:

    1. fileName (string)
      Target file to be saved
    2. sectionName (string)
      Determine which section’s content of WebTextEditor that will be saved. This parameter is used in multiple sections mode.
    3. docType (WebTextEditorHtmlDocType)
      Specifies whether the content of WebTextEditor should be saved with html or xhtml doctype. If docType is specified, this will make WebTextEditor automatically add the selected doctype declaration to the saved in html file.
    4. title (string)
      Determine <title> of the saved html file. This parameter can be used if docType is specified.
    5. saveFullHTML (boolean)
      Determine whether full html or only WebTextEditor’s content that will be saved to the html file.
  • Client side
    In the client side, WebTextEditor provides SaveContent method with a parameter sectionName(string). SaveContent will not automatically save WebTextEditor’s content to a file from client side; however it will perform FlyPostBack (aka AJAX) callback to server side and raise OnSave server-side event which enables you to implement your own saving mechanism. The sectionName parameter is required only if  you want to perform SaveContent in WebTextEditor with multiple section mode. To save all sections’ content in multiple section mode, you can set sectionName parameter to All value.

Loading content from HTML file

Loading content from HTML file is only possible to be done in server side. WebTextEditor provides LoadContentFromFile method with several parameters. Please see the parameter details in the following:

  • fileName(string)
    Target file to be loaded
  • sectionName(string)
    Determine which WebTextEditor’s section that will be loaded from a file as its content.
    This parameter should be specified in WebTextEditor with multiple section mode.
  • isCompleteHTML(boolean)
    Determine whether the loaded file is a complete html file or not.

To see these features in action, you can access the samples from our Live Demo: Save and Load content from server side, Save and Load content from database and Save content using FlyPostBack.

That’s all for now! I’d love to hear any feedback about this post, or any other features of WebTextEditor. Please click here to learn more about WebTextEditor. You can also try WebTextEditor in your application by downloading 30-day free trial here.

Warm regards,
Budianto Muliawan.

Unique Multiple Sections in WebTextEditor

As you may already aware, we’ve released WebTextEditor last month along with other new products in our 2009 R1 volume releases. If you haven’t familiar with our rich text editor, please read “Introducing WebTextEditor” part 1 and part 2. In this post, I’m going to share some of our unique but often overlooked features, such as multiple sections feature.

Unlike other editors that can only have single editable area, unique to Intersoft WebTextEditor is the capability to have multiple sections in a single editor. This time-saving feature creates new possibilities and richer editing experiences that are previously difficult to achieve. For instances, you often have application scenarios where the form has several editable fields that require rich formatting, such as in product feedback form, you may want to have Description, Steps to Reproduce and Actual Result.

With traditional editors, you’d likely end up with 3 separate text editors, which not only clutter up your page, but also slows down the overall page performance with redundant elements. WebTextEditor elegantly addressed this challenge with multiple sections feature, which can be seen clearly in the following screenshot.

Intersoft WebTextEditor with multiple section implementation

Intersoft WebTextEditor with multiple section implementation

By default, WebTextEditor uses single section instead of multiple sections. Single section settings can be found in RootTextEditor property while multiple sections settings can be found in each TextEditorSection object. In this implementation, each section in multiple sections can have their own settings.  To enable multiple sections, simple add the TextEditorSection object into TextEditorSections collection.

When multiple sections are activated, the single section configuration such as in RootTextEditor will be automatically ignored.

Here are some properties and settings that can be customized in WebTextEditorSection :

  • Content
    Gets or sets the section’s content.
  • Cssfiles
    This is a collection property; user can specify the custom CSS files to be loaded into each section.
  • Height
    Specify the minimum height of section. This property is applicable only in multiple sections. Leave it empty for single section.
  • Name
    Specify the name of section. This property is applicable only in multiple sections. Leave it empty for single section.
  • ReadOnly
    Determines whether the section should be read only or not.
  • Text
    Specify the caption text of the section. This property is applicable only in multiple sections. Leave it empty for single section.
  • WatermarkSettings
    This is a property that handle watermark of sections.

The following topics discuss the settings above in more details.

Loading Your Own Custom CSS Files

WebTextEditor provides built-in professional styles when working with editor in Design view. For example, tables and image frame will be properly formatted to make the document more readable.

In addition, WebTextEditor also provides flexibility to add custom CSS files to WebTextEditor. The CSS files collection can be added in RootTextEditor >> CssFiles property, however when multiple section is enabled, the CSS files collection needs to be added in each section using [each WebTextEditorSection] >> CssFiles property.

In CSS file object, the following properties needs to be specified:

  • FilePath
    Specifies the path of CSS file.
  • Type
    Specifies the type of CSS file.

There are two types supported in WebTextEditor:

  • DesignerStyleSheet
    Designer-typed CSS files will be loaded when editing the content in Design view
  • RuntimeStyleSheet
    Runtime-typed CSS files will be used when previewing or printing the content.

When WebTextEditor is used in blog application or other content management application, usually there are certain format and styles that need to be applied for consistency purpose. Designer-typed styles used in WebTextEditor will not be used when the content is saved, previewed, and printing, making it suitable for this scenario.Instead, the runtime-typed styles will be automatically applied to the content.

Making a Specific Section Read Only

This feature give capability to user to be able to determine whether the section of WebTextEditor should be readonly (non editable) or not.

There are 2 ways to specify ReadOnly property :

  1. Simply set the section’s ReadOnly property to true from WebTextEditor’s designer in design time.
  2. Configure ReadOnly from client-side using SetReadOnly client-side function. There are two parameters for this function: isReadOnly(boolean) and editorSectionName(string).
    isReadOnly parameter determines whether or not the section should be read-only, while editorSectionName determines the section name where read-only configuration should be applied. The second parameter is needed when multiple sections is enabled only.

Watermark Display

With watermark feature, WebTextEditor can display a default text before any user interaction occurs on an empty editor. The text can be customized for more user-friendly message such as “Type here for subject…”

Watermark

In multiple sections, the watermark setting can be customized in WatermarkSettings property in each WebTextEditorSection object.

That’s all for now on multiple sections. Please feel free to comment for any questions or any feedback on this multiple section feature. Please click here to learn more about this feature and related rich editing features, or click here to learn more on WebTextEditor.

You can also test drive WebTextEditor in your application and see how it fits to your requirements. Click here to download our free 30-day evaluation version.

Hope you enjoy this post,
Budianto.
Lead Product Engineer.

Introducing Intersoft WebTextEditor – Part 2

Hi all, finally I have the opportunity to write to all of you again. In this post, I’m going to write about the editing features of Intersoft WebTextEditor. In case you haven’t heard about WebTextEditor yet, please read the part 1 here.

Allright, let’s start jump into the core editing features.

WebTextEditor Editing Features

WebTextEditor is using its own editing engine that developed to support various kinds of new scenarios and to provide richer user experience. In addition to common editing scenarios such as text editing, font formatting and paragraph editing, WebTextEditor covers more advanced scenarios such as discussed in the following points.

Streamlined Cut, Copy and Paste Operation

WebTextEditor implements sophisticated clipboard management to address the limitations and different specifications of clipboard in various browsers. Based on how users invoke the clipboard saving operation such as cut and copy, WebTextEditor automatically uses the best approach to manage the clipboard data according to the browser type.
This streamlined clipboard management is crucial to ensuring smooth clipboard operation in various browsers. As such, WebTextEditor manages the clipboard data and decides when it should get the clipboard data from browser, and when it should get from editor’s internal cache.
User can perform clipboard operations through the following ways:
1. Toolbar command
Operation invoked through toolbar commands for cut and copy operation will use internal cache clipboard management.
The limitation from this approach is that user cannot paste the clipboard data from editor to other place except to the editor itself.
2. Keyboard shortcut
Operation invoked through keyboard shortcut for cut and copy operation will use browser default clipboard management.
When using keyboard shortcut, WebTextEditor will perform both saving mechanism at the same time when cut or copy operation is invoked, this can be achieved by setting EnableKeyboardShortcut property to true.
The purpose of this clipboard management is tightly integrated with paste operation. In paste operation, internal editor’s cache of clipboard data will become the first priority to be pasted. If editor’s internal cache is empty, WebTexteditor will obtain data from browser’s default clipboard.
WebTextEditor also implements automatic sliding expiration for its internal clipboard cache to keep the clipboard data concurrent and latest.

WebTextEditor implements sophisticated clipboard management to address the limitations and different specifications of clipboard in various browsers. Based on how users invoke the clipboard saving operation such as cut and copy, WebTextEditor automatically uses the best approach to manage the clipboard data according to the browser type.

This streamlined clipboard management is crucial to ensuring smooth clipboard operation in various browsers. As such, WebTextEditor manages the clipboard data and decides when it should get the clipboard data from browser, and when it should get from editor’s internal cache.

User can perform clipboard operations through the following ways:

  1. Toolbar command
    Operation invoked through toolbar commands for cut and copy operation will use internal cache clipboard management. The limitation from this approach is that user cannot paste the clipboard data from editor to other place except to the editor itself.
  2. Keyboard shortcut
    Operation invoked through keyboard shortcut for cut and copy operation will use browser default clipboard management. When using keyboard shortcut, WebTextEditor will perform both saving mechanism at the same time when cut or copy operation is invoked, this can be achieved by setting EnableKeyboardShortcut property to true.The purpose of this clipboard management is tightly integrated with paste operation. In paste operation, internal editor’s cache of clipboard data will become the first priority to be pasted. If editor’s internal cache is empty, WebTexteditor will obtain data from browser’s default clipboard.

    WebTextEditor also implements automatic sliding expiration for its internal clipboard cache to keep the clipboard data concurrent and latest.

Multiple Undo and Redo

WebTextEditor includes multiple undo and redo feature. It is unique in the way every action is logged with user-friendly message to a maximum of 20 stacks using FIFO (First-in-first-out) implementation. Each logged action can be found in Undo and Redo list, by clicking on the dropdown arrow of respective tool command.

UndoRedo

WebTextEditor logs every action that cause changes to the editor, including typing. You can customize how fast WebTextEditor should log typing action. Simply set the provided UndoLatency property to an integer value measured in milliseconds. The default value is set to 1000(ms), which means every typing action will be logged on every 1000ms after the last stop.

Insert Link

WebTextEditor provides a new user interface to insert link, which is focused on simplicity and efficiency. Link insertion in WebTextEditor is displayed with lightweight, elegant callout. In the callout, user can easily specify the text of link, URL and other input.

InsertLink

If there is a text selection when user clicked on “Insert Link” command, the selected text will be automatically set as the text of the link.

Insert Image

WebTextEditor introduces new ways to work with images and provides more flexibility for user to insert images. User can insert images from callout interface or Media Gallery pane.

Task pane is an independent visual element on sidebar panel that displays related contents and editing actions which significantly improves overall user experience. It enables users to perform editing tasks more easily and conveniently in a single interface.

Image insertion through callout can be done by clicking on “Insert from Web” command in the toolbar.

InsertImage

Edit Image

Every time an image is added to WebTextEditor, an image detail callout will appear near the added image. User can input the details of the image in this callout.

There are several settings of image that can be customized:

  1. Media Title
    Specify title to the image.
  2. Media Caption
    Specify caption to the image. This will be reflected if the image is using frame.
  3. Link URL
    Specify link URL of the image.
  4. Caption Alignment
    Specify caption alignment of the image. This will be reflected if the image is using frame.
  5. Size
    Specify the size of image.
  6. UseFrame
    Specify whether the image should be placed in a frame.
EditImage

Insert Media

Beside images, user can also insert other media type in WebTextEditor such as audios, videos, flash video and even YouTube video. Several types of media file that supported by WebTextEditor are .wav, .wma, .wmv, .avi, .mov, .mpeg and .mpg.

These media can also be inserted using callout and Media Gallery pane.

Insert Symbol

There are 20 predefined symbols in WebTextEditor; user can insert the symbol to editor with Symbol pop up. Simply click on the “Insert Symbol” command on the toolbar, and choose the symbol to be inserted from the symbol popup.
InsertSymbol

Insert Table

WebTextEditor introduces new ways to work with table. User can insert table through intuitive Insert Table pop up similar to Microsoft Word, or through Insert Table task pane for more advanced table design task.

InsertTable

Edit Table

WebTextEditor also provides comprehensive table editing commands, such as listed below.

  1. Insert columns to the left
    Add new column to the left of selected cell.
  2. Insert columns to the right
    Add new column to the right of selected cell.
  3. Delete columns
    Delete selected column.
  4. Insert Rows Above
    Add new row to the above of selected cell.
  5. Insert Rows Below
    Add new row to the below of selected cell.
  6. Delete Rows
    Delete selected row.
  7. Merge Cells Down
    Merge selected cell with the cell positioned below it.
  8. Merge Cells Right
    Merge selected cell with the cell positioned at the right.
  9. Split Cells Vertical
    Split selected cell vertically.
  10. Split Cells Horizontal
    Split selected cell horizontally
EditTable

Edit Cell Properties

WebTextEditor provides more convenient way to edit cell properties in Table Designer Task Pane. The following are the cell properties that can be modified:

  1. Horizontal Align
  2. Vertical Align
  3. Width
  4. Height
  5. Back color
  6. Font color
  7. No wrap

Find

WebTextEditor’s unique search feature allows user to search in both design and html view. As in other commands, the Find command displays lightweight callout interface to provide a better searching experience. When a match is found, the text will be selected.

Find

Replace

Similar to Find feature, user can perform replace operation in both design view and html view. The replace function includes match case option, and also provides action to perform find, replace and replace all.

Replace

Word and Character Count

Word count is enabled by default, while character count is disabled. To enable both word and character count, just set ShowWordInformation and ShowCharacterInformation properties to true.

Character count information and other details are available in the word information tooltip, thus making efficient use of screen real estate.

WordAndCharacterCount

Html Inspector

WebTextEditor provides a capability to recognize selected text’s html tag and its complete path. This information is displayed in the footer row. User can enable this feature by setting EnableHTMLInspector property to true.
Each html tag that displayed in HTML Inspector is clickable. When clicked, WebTextEditor will create a selection based on the clicked html tag.
HtmlInspector

Editing in html view

User can perform basic text editing operation such as bold, italic, insert image, etc with just a single click on html toolbar. This simplifies text editing operation in html view as the html command automatically insert and close the tags, minimizing required typing effort.

edithtml

That’s for now. This post covered only small parts of Intersoft WebTextEditor capabilities, there are still a lot of exciting features that have not been revealed yet due to limited space here. I encourage you to download and try WebTextEditor for yourself. Experiencing WebTextEditor directly is the best way to delve into more details, such as its look and feel and how its user experiences differ from others.

WebTextEditor is still in beta version when this post is published, however you can expect the final release very soon. For beta version, please download it here.

Kind regards,

Budianto.

Introducing Intersoft WebTextEditor – Part 1

Surely, there are already many text editor components in the market. However, most of these components share a common problem: Bloated user-interface and sluggish performance. That’s just one of many reasons why we decided to develop our very own editor component.

We designed WebTextEditor with a very sophisticated user experience where you can perform spell-checking right within the editor; right click on misspelled words and a select a correct word, as well as uploading multiple files in the background while allowing you to continue editing. These experiences are what set WebTextEditor apart from other editors in the industry which merely provide basic editing capabilities.

Great user experience doesn’t come the easy way. We spent many months researching on usability – that is how people interact and work with writing tasks, how to improve and enhance the editing experience so that their tasks can be done quicker and easier.

The end result is obvious: a web-based text editor that ultimately combines powerful editing features and state-of-the-art user experiences – something that has never been invented before.

In this first post, I’m going to discuss on the unique editing experience and essential user interface aspects of WebTextEditor.

Unique Editing Experience with Integrated Spell Checker and File Uploader

Finally, a web-based text editor that perfectly combines innovative features, elegant interface and great UX in a single interface! Intersoft WebTextEditor rediscovered the art of editing, and makes content authoring easier, simpler and more intuitive.

Editing, spell checking, file uploading. Naturally Integrated.

Editing, spell checking, file uploading. Naturally Integrated.

WebTextEditor lets you write more intuitively by providing you with these innovative features:

  • Reliable formatting, high-performance editor.
  • Spell check right within the editor, see errors in red-waved lines and right click to choose a suggestion.
  • One-click automatic hints suggestion in the status bar.
  • Integrated File Uploader, lets you upload multiple files right within the editor.
  • Sophisticated asynchronous uploading technology, lets you continue editing while uploading is in progress.
  • And more.

We designed WebTextEditor with a very sophisticated user experience where you can perform spell-checking right within the editor; right click on misspelled words and a select a correct word, as well as uploading multiple files in the background while allowing you to continue editing. These experiences are what set WebTextEditor apart from other editors in the industry which merely provide basic editing capabilities.

To give you a better picture on what I’m talking about, please see the following image.

Uploading File in the Background

Uploading File in the Background

As shown in the above image, WebTextEditor features a nice, general-purpose status bar. During uploading, the status bar will become a progress bar – making efficient use of screen real estate. We’ve also make the bar to show the uploading progress in real-time, and estimates the completion time.

Sleek Design and Elegant User Interface

Next, I’m going to write about some of the unique designs that make WebTextEditor truly different, and more importantly, provides a better way for users to work with content and objects.

Most text editor components in the market still used old-fashioned dialog box interface for user input, such as input for images, hyperlink, tables, etc – which is less intuitive because of the “blocking” nature of the dialog box interface. WebTextEditor advances editing experience with a better, more intuitive approach. Called “block-less” user interface concept, WebTextEditor sports modern, lightweight callout and task pane for user interactions, which ultimately provides user with more intuitive way to work and interact with input fields and objects.

As you can see in the following screenshot, the WebTextEditor user interface is designed in minimalist style and very lightweight.

Minimalist and Lightweight Design

Minimalist and Lightweight Design

Furthermore, WebTextEditor is built to support both HTML and XHTML document type and has been tested to run flawlessly in the top 5 browsers available in market, including IE8, Google Chrome and the new Safari 4.

The toolbar, combo, color picker, table and symbol pop up are client-side components designed specifically for WebTextEditor, providing high-performance and responsive user interface while significantly minimizing server-side page output at the same time.

Color Editor

Color Editor

Certainly, you’ll need to experience it yourself to really feel these unique, rich editing experiences. You can watch a video that demonstrates WebTextEditor experience here, or download the beta version and try it in your own development machine.

In my next post, I’m going to cover more interesting topics on WebTextEditor UX – such as the built-in media gallery, task pane concept, smart toolbar that won’t clutter up your page, intuitive Word 2007 style floating toolbar and much more.

Got questions, comments, feedback? Please feel free to leave your comment in this post.