Internationalized Styles Menu

If you integrated EditLive! prior to the 6.0 release, the style toolbarComboBox definition in your configuration file probably looks like this:

<toolbarComboBox name="Style">  <comboBoxItem name="P" text="Normal"/>  <comboBoxItem name="H1" text="Heading 1"/>  <comboBoxItem name="H2" text="Heading 2"/>  <comboBoxItem name="H3" text="Heading 3"/>  <comboBoxItem name="H4" text="Heading 4"/>  <comboBoxItem name="H5" text="Heading 5"/>  <comboBoxItem name="H6" text="Heading 6"/>  <comboBoxItem name="PRE" text="Formatted"/>  <comboBoxItem name="ADDRESS" text="Address"/></toolbarComboBox>

The 6.0 release maintained backwards compatibility with this format, but if you’re still using it then you are missing out on the translations we added.  The new format removes the text attribute:

<toolbarComboBox name="Style">  <comboBoxItem name="P"/>  <comboBoxItem name="H1"/>  <comboBoxItem name="H2"/>  <comboBoxItem name="H3"/>  <comboBoxItem name="H4"/>  <comboBoxItem name="H5"/>  <comboBoxItem name="H6"/></toolbarComboBox>

Once it is removed, you will see that your english-only style names suddenly become translated in all supported languages.

 

We have included translations for all major block tags:

  • P
  • DIV (in 6.4)
  • H1-6
  • PRE
  • ADDRESS
  • TD
  • TH
  • TR
  • TABLE
  • LI
  • UL
  • OL

We’ve even included some of the less common ones like DT and DL.  These translations will apply to styles loaded via CSS as well as from the configuration file.

How does EditLive! decide which words to check for spelling errors?

We've seen a few customers recently creating custom dictionaries with words that simply won't be checked by our spelling checker; we use a third party spelling component so we don't have much control over this process.  Here are the rules that the component uses to determine which words will be checked for spelling errors, keep these in mind when constructing a custom dictionary.

  • A word is an alphanumeric character followed by any sequence of alphanumerics or apostrophes.
  • Hyphens are word delimiters, hyphenated words will be checked separately.
  • Periods surrounded by alphanumerics are considered part of the word, and trailing periods are considered part of the word if the word contains embedded periods interspersed among no more than two consecutive alphanumerics (e.g., the period at the end of U.S.A. is considered part of the word, but the periods at the end of USA. and ephox.com. are not).
  • Apostrophes at the end of a word are considered part of the word if they are preceded by the letter "s".
  • An "at sign" (@) is considered part of the word if it is surrounded by alphanumerics and the following word contains embedded periods (i.e., appears to be an e-mail address).
  • The string "://" is considered part of the word if it is surrounded by alphanumerics (i.e., appears to be part of a URL).
  • A slash (/) is considered part of the word if it is surrounded by alphanumerics and the preceding part contains embedded periods (i.e., appears to be part of a URL).
  • Characters &, %, +, =, ?, and _ are considered part of the word if the word contains embedded periods (i.e., appears to be part of a URL).

There are some special cases that we support.  Both can be changed by creating a file called "Spelling.properties" in your dictionary jar file and adding the text as specified below.  If you specify both options, each must be on a separate line.  For an example of this, look at the contents of our French and Italian dictionary jar files.

  • Hyphenated words can be checked as a single word with the option SPLIT_HYPHENATED_WORDS_OPT=false.  With this turned off, hyphens surrounded by alphanumerics are considered part of the word.
  • Apostrophes can be turned into word delimiters with the option SPLIT_CONTRACTED_WORDS_OPT=true.  This is turned on by default in our French and Italian dictionaries.

Note that both of these options are global, if changed they will apply to the entire editor - not just your custom dictionary.

Deleting multiple rows or columns is now easier

We make small usability improvements to EditLive! all the time, and today I want to highlight our latest one.  In the 6.3 release we added a long-standing request for the ability to delete multiple rows or columns (previously we only deleted the first row or column in the selection).  What might not be obvious, however, is that you don't need to highlight the entire row or column to delete it.

For example, start by highlight some cells in the middle of the table like this:

From here, clicking the Delete Row button will remove both rows:

Or if you click Delete Column instead both selected columns will be removed:

The feature works even if you have only one cell in each row or column selected, I used a 2×2 square to simplify the example.  This change replicates another behavior from Microsoft Word; helping to make table manipulation more natural and ease the training requirements for non-technical users creating content in EditLive!.

Creating Bookmarks The Easy Way

Bookmarks (also known as Anchors) are a normal part of any web content.  As well as linking to an external document section, they can be used to navigate within sections of the current document.  We have a feature in EditLive! to generate these links easily, but the feature is so well integrated into our UI that I recently discovered even some of the Ephox employees don't know about it.

When creating bookmarks, most people follow a five step process:

  1. Find the text to bookmark
  2. Insert a bookmark at that location
  3. Find the place that will link to the bookmark
  4. Open the Hyperlink dialog
  5. Find the bookmark that has just been created and link to it

When building EditLive! we realized that the majority of these links will be to document headings, so we shortened it to a two step process:

  1. Open the Hyperlink dialog
  2. Find the heading you want to link to, and link to it

Any time you open the Hyperlink dialog, we find all heading tags in the document (H1 to H6) and list them under "Places in Document".  For example, the following HTML:

<h1>First Heading</h1>
<h2>Sub Heading</h2>

Looks like this in the Dialog:

Notice that spaces are removed from the bookmark address.  You don't have to worry about the dialog generating bookmarks you'll never use - they are only created when you actually link to them.  They're also inserted around the entire heading text so that it renders the heading with a blue underline and ensures the bookmark is not empty (which has caused problems on some integrations).

Combine this with easy linking to clipboard URLs and you have some cool tricks to improve your productivity.

Plugin updates

A change in the recent 6.2 release broke the Drag And Drop plugin, so I've taken the opportunity to update our self-signed LiveWorks! certificate that had expired.  All plugins now have a certificate that is valid until the end of 2008, in addition the following plugins have been updated:

  • File Drag And Drop now requires EditLive! 6.2
  • Link Info has improved mouse behaviour at the edge of the editor and when the mouse is not directly over a hyperlink

Using Drag and Drop to insert multiple files into EditLive!

Have you ever wanted to insert 15 images and been stuck opening our Image dialog 15 times?  Wish there was a better way?  Well now there is :)

Introducing the File Drag And Drop plugin.  The initial release supports the most common formats we could think of, if there are any others you'd like to see please leave a comment (or just implement it yourself and we'll update the plugin!)

For more information about how it works, check out my blog entry.