Thursday, December 4, 2008

Selecting a Block of text

20 Excellent Free Rich-Text Editors

Jacob Gube, a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.

He has given us a list of 20 excellent Free Rich-text Editors. Thanks for his work.

Click here for the original post

Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (”what you see is what you get”) editors.

There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.

In this article, we present 20 exceptional (and free) rich-text editors.

1. TinyMCE

TinyMCE is an open source (under the GNU Lesser General Public License) rich-text editor released and maintained by Moxiecode. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API. TinyMCE’s plugin system allows you to download themes and plugins to extend the core installation.

TinyMCE | Demo | Download

2. FCK Editor

FCKeditor is another wildly popular open source online rich-text editor (check out some of the websites that use it). It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data.

FCKeditor | Demo | Download

3. NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript code snipplet and voila – it just works (as well as saving your server some system resources).

NicEdit
| Demo | Download

4. BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page. It has been an open source application since 2002 - and with a devout following - you might be able to quickly find some help if you run into any issues in the BXE IRC channel.

BXE | Demo | Download

5. MarkItUp!

markItUp! is a JavaScript-based markup editor built on top of the jQuery library. With markItUp!, you can easily turn any HTML textarea into a fully-featured WYSIWYG editor. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview and many more features that make markItUp! an excellent choice.

markItUp! | Demo | Download

6. WidgEditor

The widgEditor is an open source project of Cameron Adams released under the GNU General Public License. It’s a simple and no-fuss HTML rich-text editing solution that converts regular HTML textareas into a WYSIWYG. Because it’s JavaScript-based and designed to degrade gracefully, users with JavaScript turned off will still be able to use the HTML textarea.

widgEditor | Demo | Download

7. EditArea

EditArea is a free JavaScript source code editor. It’s an excellent solution for weblogs and websites that allow developers to contribute and format their own code.


EditArea | Demo | Download

8. Cross Browser Rich Text Editor (RTE)

Cross-Browser Rich Text Editor (”RTE” for short) is a free rich-text editor released under the Creative Commons Attribution 2.5 license. It’s a work based on the designMode functionality introduced in Internet Explorer 5 and implemented in the Mozilla Rich Text Editing API. It just has basic features, so it’s perfect for individuals looking to add simple rich-text editing support.

Cross-Browser Rich Text Editor (RTE) | Demo

9. YUI Library Rich Text Editor

The YUI Library Rich Text Editor is a UI control that’s part of the YUI Library. It’s a great solution for those already using YUI and individuals that want to save some server resources (since you can serve it directly from the Yahoo! servers). The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution.

Yahoo! UI Library: Rich Text Editor | Demo | Download

10. FreeTextBox

Web professionals using the .NET framework that want to add editing capabilities to their web pages and web applications should check out FreeTextBox: a robust, fully-featured, and extremely popular rich-text editor for ASP.NET. It has a built-in image gallery, a helpful JavaScript API for customization, and a full list of editing controls for constructing tables, ordered/unordered lists, and even spellchecking (using the IE spellchecking engine).

FreeTextBox | Demo | Download

11. Damn Small Rich Text Editor

Damn Small Rich Text Editor (DSRTE) is a lightweight, free rich-text editor built on top of the jQuery library and a PHP backend. It’s plugin-enabled (meaning it’s highly-extensible), has image-uploading capabilities (using Ajax for responsive user interaction), and an HTML cleanup feature to tidy up messy markup.

Damn Small Rich Text Editor | Download

12. Silverlight Rich Text Editor

Silverlight rich text editor is the first rich-text editor for Silverlight. It has many useful features such as “find and replace” to quickly find specific text or to batch-replace them with something else, keyboard shortcuts support, serialization of text input for security, and much more. Note that the original creator has stopped further development (so cross your fingers someone picks up his project).

Silverlight rich text editor | Demo | Download

13. Free Rich Text Editor

Free Rich Text Editor is a free, JavaScript-based HTML rich-text editing solution released under the Creative Commons Attribution 2.5 Generic license. The interface is reminiscent of Microsoft Word 2003’s interface, so users of this desktop application will find it quite familiar. It has everything you’d expect from a robust rich-text editor, as well as a code view to preview and edit the HTML source code directly.

Free Rich Text Editor | Demo | Download

14. Dijit.Editor

The Dijit.Editor is Dijit’s (Dojo’s widget library) fully-featured rich-text editor. Built on top of The Dojo Toolkit (a popular JavaScript library/framework); it’s an excellent solution for those already using the Dojo Toolkit.

Dijit.Editor

15. WYMeditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. It was developed to output compliant HTML 4.01 Strict Doctype HTML, so it’s the perfect solution for the standards-aware developer.

WYMeditor | Demo | Download

16. Whizzywig

Whizzywig is a free JavaScript web-based rich-text editor. Aside from features you’d expect from a rich-text editor, Whizzywig also has a Spanish and German version, a web-safe color picker to change your text’s colors, and custom-designed UI controls.

Whizzywig | Demo

17. openWYSIWYG

openWYSIWYG is a free and feature-packed web-based content editor that’s perfect for a host of content management systems. It has a very intuitive “table creation” feature to help users construct HTML tables. It also has a wide range of browser support including IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.

openWYSIWYG | Demo | Download

18. XStandard

XStandard is a highly-standards-compliant rich-text editor. It comes in two versions: XStandard Lite – which is completely free, and XStandard Pro. XStandard Lite has Microsoft Word text cleanup, spellchecking, and the ability to interact with third-party applications.

XStandard | Download

19. Xinha

Xinha is an open source, community-built rich-text editor released under a BSD style license. It’s highly-configurable, extensible, and feature-packed. Xinha emphasizes on community development, and as such, you’ll find many helpful contributors in the Xinha forums.

Xinha | Demo | Download

20. Kupu

Kupu is an open source “document-centered” client-side rich-text editor released by the international association for Open Source Content Management (OSCOM). It features easy integration into a variety of content management systems including Silva and Plone, easy customization and extension, and Ajax saving for an uninterrupted user experience.

Kupu | Demo | Download

Technorati Tags: , ,

Selecting a Block of text

If you are COPY & PASTE, the blog here is showing you a very cool trick to give you more power in term of COPY & PASTE

Below is a brief content from the original post.

Technorati Tags:

Wednesday, December 3, 2008

Silverlight Toolkit: Label

Hi, I have found the awesome article from Justin-Josef
Angel
about LABEL the new silverlight control.
I guess that I
could post it into my blog for my own reference and might as well any
one who has been reading my blogs by any chance.

Click here to see the
original post from Justin-Josef Angel.
Thanks Justin
for an awesome article :)

Setup

1. Create a new project.

image

2, Add a reference to the Silverlight Controls assembly (Microsoft.Windows.Controls.dll) which can be downloaded at http://codeplex.com/Silverlight.

image image

3. Look under "Custom Controls" In the Blend Asset Library.

image

4. Add a Label to the Page.

image

And here's the XAML we got:

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="SilverlightControlsNovember2008.Page"

Width="640" Height="480"

xmlns:slctls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls">

<Grid x:Name="LayoutRoot" Background="White">

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,220" Width="148" Content="Label"/>

</Grid>

</UserControl>

Setting the content for Label

One way of editing a Label's content is double clicking on it.

image

image

And here's the XAML we just got:

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,220" Width="148" Content="Hello World!"/>

Another way is editing the Content property directly through the Blend Data pane:

image

Changing the Label’s Border

We can set the BorderBrush & BorderThinckness properties for Label in order to change it’s border.

image

Let’s start by changing the BorderBrush to a SoliderColorBrush with a light grey color. Click on BorderBrush and select SolidColorBrush.

image --> image

Than we’ll select a light gray color.

image

Next, we’ll change the BorderThickness to 1 on all sides.

image

And we can see our Label has a nice subtle light grey border around itself:

image

Here’s the XAML we just generated:

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,0" Width="79" Content="I am a Label!" VerticalAlignment="Top" Height="20" BorderBrush="#FFC6C4C4" BorderThickness="1,1,1,1"/>

Changing Label’s Background and Foreground

Let’s do what the title says!

In
case you’re wondering TextBlock does not have a Background. So
it’s a bit different than what we would have normally done with
TextBlock.

We’ll select Background and set it to SolidColorBrush with the color Black.

image -->image

image

Next we’ll select the Foreground property and set it to SolidColorBrush with the color white.

image -->image

here’s our Label:

image

And the xaml we generated:

<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,0" Width="79" Content="I am a Label!" VerticalAlignment="Top" Height="20" BorderBrush="#FFC6C4C4" BorderThickness="1,1,1,1" Background="#FF000000" Foreground="#FFF5F3F3"/>

Changing the Label’s Template

Let’s
say we're unhappy with the default border for out Text inside the
Label. Through the power of templating we can change it.
So let’s create a RadialLabelTemplate.

We’ll start of by adding a new label to form.

image

Than Right Click on it, select “Edit Control Parts(Template) –> Create Empty…”.

image

We’ll change the Resource name to RadialPanelTemplate.

image

And here’s the drawing area of the new template:

image

Let’s add the Ellipse for the radial background.

image

image

Now
we want to add a TextBlock to display the content of the Label. Before
we can do that, we’ll need to add a container that will contain
both our Ellipse and our TextBlock. We’ll Group our Ellipse into
a Canvas.

image

image

Finally we can add our TextBlock that has the Label Content.

image

image

We’ll
use TemplateBinding to connect this TextBlock.Text to the Label.Content
property. Click the “Advanced Options” next to the Text
property.

image

Select “Custom Expression”.

image

And put in the correct TemplateBinding.

image

To preview our form we can go back to our form.

image

And here it is:

image

Now we can we add 3 more label to our page and just apply this new template to them.

image

We’ll
select each of our new Labels, Right click, select “Edit Control
Parts (Template) –> Apply Resource –> Radial Label
Template”.

image -

And here’s our new form:

image

Here’s the XAML we just generated for the RadialLabelTemplate:

<UserControl.Resources>

<ControlTemplate x:Key="RadialLabelTemplate" TargetType="slctls:Label">

<Canvas Height="Auto" Width="Auto">

<Ellipse Height="35" Width="125" Fill="#FFFFFFFF" Stroke="#FF000000"/>

<TextBlock Height="20" Width="82.667" Canvas.Left="22.667" Canvas.Top="7.333" Text="{TemplateBinding Content}" TextWrapping="Wrap"/>

</Canvas>

</ControlTemplate>

</UserControl.Resources>

And the Xaml for our labels:

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Content="Radial Label!" Width="124" Height="34"/>

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="19.333" Content="Radial == good" FontSize="10"/>

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="29.333" Width="144" Content="I R Radial" />

<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="28.667" Width="130.334" Content="U R Radial"/>

Editing a Label’s ContentTemplate

Templates
are used with TemplateBindings that emanate for general Control
properties. But we might do bind our Label to CLR property from any
Data Source. like, Cows.

image

We’ll create (in Visual studio) our Cow class that has Age and Name.

public class Cow

{

public Cow(string Name, int Age)

{

Name = Name;

Age = Age;

}

public string Name { get; set; }

public int Age { get; set; }

}

A very basic CLR class that has 2 properties: a numeric age and a string that represents the age of the cow.

Now let’s use this class and create a cow we’ll DataBind our label to.

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

myLabel.DataContext = new Cow("Betsy", 3);

}

}

Eventually I’d like for us to see a Label that looks like this:

image

We’d like to change the thickness of the head line based on Cow.Age and change the text based on Cow.Name.

Let’s start by adding a new Label to the page and changing it’s name to myLabel.

image

We’d like to edit the ContentTemplate
of this label, so we’ll Right Click on the label select
“Edit Other Templates –> Edit Generated Content
(ContentTemplate) –> Create Empty…”

image

We’ll call our new ContentTemplate – CowContentTemplate.

image

As always we start off with an empty ContentTemplate.

image

I’ll spare you my third grade drawing skills and we’ll magiclly add some lines that are our cow.

image

Truly a masterpiece.

Single cowIf you squint really hard, they look alike

Next we’d like to add the appropriate bindings.

We’ll select the TextBlock in the middle of the cow.

image

Click “Advanced Options –> Custom Expression”.

image

image

And add a Binding to the Cow Name.

image

Next, we’ll select the Cow’s head.

image

And set a StrokeThickness to a Custom expression that’s bound to the Cow’s age.

image

One last thing we have to do before we can run the sample is set the Cow’s Content to it’s DataContext.

image

We’ll ad a Custom expression to the Content property of the label.

image

Finally we can run the sample.

image

Let’s add a few more Labels with that ContentTemplate and with more Cows.

public partial class Page : UserControl

{

public Page()

{

// Required to initialize variables

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

myLabel.DataContext = new Cow("Betsy", 3);

myCowLabel1.DataContext = new Cow("Martha", 1);

myCowLabel2.DataContext = new Cow("Flossy", 5);

myCowLabel3.DataContext = new Cow("Hoss", 2);

}

}

We’ll make sure to add those label to our page and re-run this sample.

image

And our Cow Herd is now complete.

Here’s our DataTemplate XML.

<UserControl.Resources>

<DataTemplate x:Key="CowContentTemplate">

<Grid>

<TextBlock Margin="21.75,9.833,27.25,9.167" TextWrapping="Wrap" FontSize="8" Text="{Binding Path=Name}"/>

<Ellipse HorizontalAlignment="Right" Margin="0,2.167,4.583,13.833" Width="15.084" Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="{Binding Path=Age}"/>

<Rectangle Margin="18.75,8,25.25,8" Fill="#FFFFFFFF" Stroke="#FF000000" RadiusX="1" RadiusY="1"/>

<Path Height="2.334" HorizontalAlignment="Right" Margin="0,12.25,19.417,0" VerticalAlignment="Top" Width="6.667" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M65.166664,9.833333 L59.5,11.166667"/>

<Path Height="6" HorizontalAlignment="Right" Margin="0,0,23.75,2.667" VerticalAlignment="Bottom" Width="3.667" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M58.833332,19.666666 L61.5,24.666666" d:LayoutOverrides="Width"/>

<Path Height="4.5" HorizontalAlignment="Left" Margin="27.585,0,0,3.833" VerticalAlignment="Bottom" Width="2.166" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M35.333332,19.666666 L34.166668,23.166666"/>

<Path Height="4.834" HorizontalAlignment="Right" Margin="0,0,33.751,4.333" VerticalAlignment="Bottom" Width="1.833" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M51.833332,22.666666 L51,18.833334" d:LayoutOverrides="Width"/>

<Path Height="5" HorizontalAlignment="Left" Margin="18.917,0,0,4.333" VerticalAlignment="Bottom" Width="4" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M27.333334,19.35417 L24.833334,23.187502"/>

</Grid>

</DataTemplate>

</UserControl.Resources>

And our Cow labels:

<slctls:Label Height="32.5" Margin="311.5,56.75,235.5,0" VerticalAlignment="Top" x:Name="myLabel" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />

<slctls:Label Height="32.5" Margin="311,129.5,236,0" VerticalAlignment="Top" x:Name="myCowLabel1" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />

<slctls:Label Height="32.5" Margin="311,198.75,236,0" VerticalAlignment="Top" x:Name="myCowLabel2" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />

<slctls:Label Height="32.5" Margin="311.5,0,235.5,184.5" x:Name="myCowLabel3" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />