Editing text areas

SouthendSupporter · August 13th, 2009, 03:55 PM

Hi
I am providing the facility for an admin user of a website to edit text 'areas' of the site. Each text area is a field in a table and is displayed using a formview.

What I'd like to do is get a tad more sophisticated and provide Rich Text editing allowing the user to create 'headings', change colour of text, create hyperlinks etc.
I'd also like to incorporate images into the editable area and provide the means to upload new images.

I'm hoping that someone konws of a fancy control that I can obtain from somewhere (hopefully either shareware or not too expensive) to achieve this.

I guess I could write my own but I really think that this would be way beyond my capabilities at the moment unless I had a step by step guiide as to how to do it!

A quick Google search indicates that there a number of sites offering controls but I'd like to hear recommendations as to what people have found to be reliable providers -- save me wasting time and money (if I actually have to spend any!!)

Thanks in advance.

Imar · August 14th, 2009, 05:03 AM

Hi Geoff,

You may want to take a look at the FCKEditor: http://www.fckeditor.net/

There are many other editors available, but this one has worked fine for me in many web sites.

Cheers,

Imar

SouthendSupporter · August 14th, 2009, 05:16 AM

Thanks Imar.
That was one of the ones I found from Google and it does look impressive.
Presumably you use a licensed copy rather than Open Source license?

Do you know if the Open Source licence has any impact on performance or features?

Geoff

Imar · August 14th, 2009, 05:23 AM

Nope, I am using the open source license, and you probably can do that as well, although it depends on the actual usage of the application. Judging from your description, you can use it under the LGPL license without a problem: http://en.wikipedia.org/wiki/GNU_Les...Public_License

Cheers,

Imar

SouthendSupporter · August 17th, 2009, 03:42 PM

Hi
hope no-one minds me posting this here. I have tried the fckeditor forums with no response.

Essentially, I am having difficulty getting fckeditor to work.
Firstly, I am not sure that it does exactly what I am looking for - the ability to present a web page to a user that contains a 'text and image area' that appears normally if a non logged in user views it, but has an edit capability (edit / format text, upload pictures etc) when viewed by a user in the Site Adminsistrator role.

I have downloaded the FCKeditor.Net_2.6.3.zip and FCKEditor_2.6.4.1.zip files, extracted the files and copied the contents of both to a folder called fckeditor in the root of my website.
I have added a reference to the FredCK.FCKeditorV2.dll in the fckeditor\bin\release\2.0 directory and have also added an item in the toolbox by pointing to the same dll.

I have added a control to a test page to try a simple test of editing a text area..
[code]
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/Master1.master" AutoEventWireup="false" CodeFile="AAAAtest.aspx.vb" Inherits="AAAAtest" %>

<%@ Register assembly="FredCK.FCKeditorV2" namespace="FredCK.FCKeditorV2" tagprefix="FCKeditorV2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftColumn" Runat="Server">
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/fckeditor/"
Height="400px" Width="100%" Visible="False">
</FCKeditorV2:FCKeditor>
<asp:Label ID="defLeftcolumn" runat="server" Width="100%"></asp:Label>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="RightColumn" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainColumn" Runat="Server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="FooterText" Runat="Server">
</asp:Content>
[\code]
The code behind file contains:
[code]
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Partial Class AAAAtest
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Page.IsPostBack Then
defLeftcolumn.Text = FCKeditor1.Value
Exit Sub
End If

' Set the startup editor value.
If User.IsInRole("Site Administrator") Then
FCKeditor1.Visible = True
FCKeditor1.Value = defLeftcolumn.Text
End If

End Sub
End Class
[\code]
When I do not log in I do not see the control -- so far so good!
If I log in as a member of the site administrator role I see the fckeditor control and it contains the text from the label.text. As required (tho I would prefer not to see both - I guess I could make the visible oproperty of the label false when an admin is signed in.
If I make changes within the control and then click the 'save' in the toollbar {which I cannot see all of :( } the text in the label under the control changes accordingly -- but it is not changed permanently, i.e if I navigate away from the page and back to it again it returns to the original state. So the edit was not made permanent.

How do I get the change to be 'sticky'?
Presumably I cannot upload images into an asp:label -- so what control would I use to give me a text and image area?

I can see that maybe I shall have to use a separate page for the editing of the area -- but how do I refer to an area (textbox1.text - or a control that allows test amd images) that is on another page in my site?

Please help me keep some of what little hair I have left!

Imar · August 17th, 2009, 04:24 PM

Hi there,

The FCKEditor is not a magical control. In short, it just replaces a simple <textarea /> HTML element with a fancy UI (and a lot more, such as uploading, choosing, and inserting images, movies, Flash animations and so on).

This means that you are responsible for saving content in the database. The Save Button doesnt do anything useful (I typically remove it and use a standard .NET hutton). In short, here's how to deal with a Rich Text Editor (not just FCKEditor. most editors work this way)

1. On page load, see if and what data you're editing

2. When necessary get that data from the database and assign it to the FCKEditor. E.g.

string someString = get content from database
myFckEditor.Value = someString;

On postback you do the reverse:

string someString = myFckEditor.Value;
// Update the database with the new data

Hope this clarifies a few things; there's no magic; you are still responsible for data access code.

Cheers,

Imar

SouthendSupporter · August 18th, 2009, 04:41 AM

Once again Imar -- many thanks.
With the help of your book and this forum I'm slowly but surely getting my project built.

Geoff