Welcome Guest Search | Active Topics | Log In | Register

2 Pages 12>
WYSIWYG Options
IntelligentPenguin
#1 Posted : Tuesday, September 23, 2008 5:09:16 PM
Rank: Advanced Member



Joined: 9/19/2008
Posts: 41
Points: 123
Location: Cambridge, UK

A while back Gaia had it's own wysiwyg editor, but it disappeared (I think, I haven't seen it anyway).

I just wondered if anyone has any experience in using Gaia with a wysiwyg editor.  I have tried using FCKEditor, but it seemed to have problems with refreshing the data and posting it back so have almost given up.  Has anyone had any success with anything else?

Ta! P

RugWarrior
#2 Posted : Tuesday, September 23, 2008 9:45:13 PM
Rank: Advanced Member


Joined: 9/20/2008
Posts: 37
Points: 111
Location: Germany

Hi P,
please have a look at http://docs.gaiaware.net/FCK-Error.ashx as it might help you with the FCKEditor.

In the tracker there is already a todo: http://tracker.gaiaware.....aspx?id=64&PROJID=1

Regards,
Sol

IntelligentPenguin
#3 Posted : Friday, September 26, 2008 4:51:51 PM
Rank: Advanced Member



Joined: 9/19/2008
Posts: 41
Points: 123
Location: Cambridge, UK

 Hiya

I had a look at the docs regarding FCK - unfortunately that wasn't the problem I had, it was a problem in the data coming back completely blank in the first place.  I'd be really interested in seeing someone who's already managed to do it, but i wasn't able to.

Really exciting if you were able to produce a wysiwyg control - is there a time plan for this or is it just in the thinking stage?

P

janblo
#4 Posted : Friday, September 26, 2008 10:10:30 PM
Rank: Titan



Joined: 8/21/2008
Posts: 349
Points: 2,050
There's no time plan just yet. We will release the roadmap shortly for the next version and we will see if we can have a richedit into the product by then.
Gaiaware Core Developer

Follow us at Twitter : http://twitter.com/janblomquist
jwwelbor
#5 Posted : Friday, October 03, 2008 2:18:08 AM
Rank: Advanced Member


Joined: 10/3/2008
Posts: 42
Points: 126

I'm having the same issue.  FCKEditor works great until I stick it inside an ExtendedPanel.

Apparently they have the same issue with the Ajax.net framework.  Maybe you guys can beat them to the punch with a good solution.  Below is an explaination and some solutions.

http://www.daveparslow.com/2007/10/fckeditor-inside-updatepanel-broken.html

I'd love to know what you guysthink would work best here.

 

janblo
#6 Posted : Friday, October 03, 2008 9:49:47 AM
Rank: Titan



Joined: 8/21/2008
Posts: 349
Points: 2,050
The best thing is to wrap the control into the Gaia Ajax machinery. Then it could leverage all the best features we have, like dynamic inclusion of javascript files in callbacks, server side event model, etc.

RichEdit is in our TODO so it'll probably go in the roadmap for the next release.
Gaiaware Core Developer

Follow us at Twitter : http://twitter.com/janblomquist
jwwelbor
#7 Posted : Friday, October 03, 2008 9:56:06 PM
Rank: Advanced Member


Joined: 10/3/2008
Posts: 42
Points: 126

I really need this to work right away... can you give me any pointers or direction in regards to how I might accomplish that?  I'm willing to give it a shot on my own, but I don't know quite where to get started...

I've added in some javascript as described in that link I posted above... and it seems like the linked variable is getting updated,  at some point though I'm not sure exactly when, as I can see the hidden field value change in firebug...

perhaps there is a way I could change the linked field into a gaia hidden field?  Or maybe I could write up a method to copy the editor data into a gaia hidden field...

Any ideas would be great.  I'm not scared to write some javascript or whatever... I'm just stuck as to how to approach it.

IntelligentPenguin
#8 Posted : Friday, October 03, 2008 11:43:52 PM
Rank: Advanced Member



Joined: 9/19/2008
Posts: 41
Points: 123
Location: Cambridge, UK

 Hello

If you do manage to get it working, please update this post, I'd love to know!

Paul

Edward
#9 Posted : Friday, October 17, 2008 5:41:43 PM
Rank: Member


Joined: 10/17/2008
Posts: 28
Points: 87

Hi

I strongly recommend not to build any wysiwyg editor. It's too time consuming.  I really recommend FCK or any other 3rth party solution.

If this problem is the same as the MS Ajax update panel in combination with the FCKeditor you can get arround it bij adding a root page class and decend your FCK pages from there. Add in the onload of that root page class:

 

 protected override void OnLoad(EventArgs e)
 {
        // fix for FCK to allow updates in the AJAX Update Panel
        Page.ClientScript.RegisterOnSubmitStatement(GetType(),"AjaxHack","for ( var i = 0; i < parent.frames.length; ++i ) if ( parent.frames[i].FCK ) parent.frames[i].FCK.UpdateLinkedField();");
 base.OnLoad(e);
}

 

Let me know if this helped!

Edward

 

 

 

 

janblo
#10 Posted : Saturday, October 18, 2008 6:58:57 PM
Rank: Titan



Joined: 8/21/2008
Posts: 349
Points: 2,050

I totally agree. Building a fully fledged RadEditor will be too time consuming and seems like a waste of time since there are so many options available from FreeTextBox to FCK Editor, and up to commerical alternatives.

We will be looking into building ajax support for existing WYSIWYG editors and see if we can support/ship a couple of existing ones in the next package.

What we are looking into is creating a simple surface that could act as a core building block for creating more advanced/customized editors ( Rad, Wiki, Designers, etc ) 

Another idea we've had is also to create such a control provider based so you can easily create plugin functionality as Gaia building blocks ( ie. Image Selectors, Color pickers, etc) 

 

Gaiaware Core Developer

Follow us at Twitter : http://twitter.com/janblomquist
jwwelbor
#11 Posted : Monday, October 20, 2008 4:08:02 AM
Rank: Advanced Member


Joined: 10/3/2008
Posts: 42
Points: 126

Edward,

Thanks, but that didn't work.  I've tried numerous versions of similar scripts, all to no avail.  When I click my gaia button to save the form... there's no value.

I've been trying to figure this out for over a week now.  Is there any way to make gaia execute client script before it submits... i can see the value update on the client side... but it never gets submitted... maybe I could write some client side script to copy te value into a gaia hidden field?

This is a deal breaker for me... if I can't figure out how to make this work, I'm going to have to find a new library, or resort back to ajax.net.

 

janblo
#12 Posted : Monday, October 20, 2008 8:25:08 AM
Rank: Titan



Joined: 8/21/2008
Posts: 349
Points: 2,050
WYSIWYG editor capabilities (either with custom built or compatibility) is important to us and it will probably make it into the next release. Do you really want to go back to ASP.NET Ajax now that you have a taste of Gaia? :-)
Gaiaware Core Developer

Follow us at Twitter : http://twitter.com/janblomquist
jwwelbor
#13 Posted : Monday, October 20, 2008 4:02:00 PM
Rank: Advanced Member


Joined: 10/3/2008
Posts: 42
Points: 126

Definetly not, but I have to have a Wysiwyg for my project now... roughly when is the next release scheduled?

 

Chaitanya
#14 Posted : Monday, October 20, 2008 4:20:32 PM
Rank: Advanced Member


Joined: 9/17/2008
Posts: 54
Points: 162
Location: Texas

One of the things that I did that might help out in terms of ease of use.  I created a popup window that contained just the WYSIWYG editor and a asp.net submit button on it.   The asp.net submit button doesn't do a gaia postback, so it will retain the value of the WYSIWYG editor allowing you to read the value that you need.    The information on creating a popup window is posted here.   That saves additional real estate on the first page and allows you to use the gaia tools with the rest of the page and still maintain a consistent look and feel.   

This is what I have done for both the WYSIWYG editor and a file upload control.   It works great for both.   

Chaitanya

jwwelbor
#15 Posted : Monday, October 20, 2008 4:33:10 PM
Rank: Advanced Member


Joined: 10/3/2008
Posts: 42
Points: 126

That's a good idea... though I'm not sure it would fly in the project I'm working on now though... I will run that by the powers that be as a possible solution.

albertoleon
#16 Posted : Sunday, October 26, 2008 12:31:16 PM
Rank: Newbie


Joined: 9/20/2008
Posts: 2
Points: 6
Location:

The really problem isn't in ASP.NET Ajax or Gaia. Is in FCK Editor.

The FCK Editor not populate a Refresh Editor Value. The problem isn't only .Net, the general Ajax FrameWorks too.

You can use it if you separate the edit to the view.

I was working in a content editable, a page with a lot of sections inside, with an edit button nex to the title section.

If you click in button the FCK is visible to section content. But the problem appear because I put it in an ExtendedPanel to see in the same page the changes.

So I made a new page to edit. When you click the button it redirect to an edit page, when you save the work you are redirected to the content page. The old kind of make thins is not the worst.

janblo
#17 Posted : Sunday, October 26, 2008 3:29:57 PM
Rank: Titan



Joined: 8/21/2008
Posts: 349
Points: 2,050
Some of our customers have solved it by using an IFRAME inside a modal window. Then it seems like it's part of the page, when really it's not. We are working on making the FCKEditor compatible with Gaia, though probably not before after the Gaia Ajax 3.5 "Themis" release.
Gaiaware Core Developer

Follow us at Twitter : http://twitter.com/janblomquist
jwwelbor
#18 Posted : Tuesday, October 28, 2008 7:16:14 AM
Rank: Advanced Member


Joined: 10/3/2008
Posts: 42
Points: 126

I just resorted to a classic asp:button.  It causes a page flicker, but only on save so I figure I can deal with it for now.  What is the timeline for the Themis release?

janblo
#19 Posted : Tuesday, October 28, 2008 12:02:21 PM
Rank: Titan



Joined: 8/21/2008
Posts: 349
Points: 2,050
The Themis release will be be published 15th of December. Here's our working page http://docs.gaiaware.net/Gaia-Ajax-3.5-Themis.ashx
Gaiaware Core Developer

Follow us at Twitter : http://twitter.com/janblomquist
jc.cuevas
#20 Posted : Friday, December 05, 2008 2:45:26 PM
Rank: Newbie


Joined: 12/5/2008
Posts: 2
Points: 6
Location:

With a little help from JS

<script type="text/javascript">

     /*Aquesta funció permet integrar el fckeditor amb l'editor gaia*/

     function obtenirTextEditor() {
         var oEditor1 = FCKeditorAPI.GetInstance('<%=fckEditor1.ClientId %>');
         document.getElementById('<%=hftxt.ClientId %>').value = oEditor1.GetHTML();
     }


    </script>

* hftxt = gaia hidden field for update data

In the VB code (yes is VB!!):

btAcceptar.Attributes.Add("onClick", "obtenirTextEditor()")

* btAcceptar = gaia button that close the window and/or save data

 

 

jc.cuevas
#21 Posted : Friday, December 05, 2008 2:48:30 PM
Rank: Newbie


Joined: 12/5/2008
Posts: 2
Points: 6
Location:

For refresh new content... you can include the fck Editor in a gaia panel and call ...

PanelEditor.ForceAnUpdate()

 

 

jwwelbor
#22 Posted : Tuesday, December 09, 2008 6:11:16 PM
Rank: Advanced Member


Joined: 10/3/2008
Posts: 42
Points: 126

This looks great... I was trying to think of how to do it, but I just couldn't quite get my mind around it.  I couldn't figure out how to register the onClick, and to get the ClientId's.  This makes perfect sense.  I'll try it and let you know how it works. 

I'm dynamincally generating my controls, so it may be a little more tricky, but I'll kep you posted.

IntelligentPenguin
#23 Posted : Saturday, January 17, 2009 7:09:04 PM
Rank: Advanced Member



Joined: 9/19/2008
Posts: 41
Points: 123
Location: Cambridge, UK

 Hello

Finally got round to sorting this out!!  I thought I'd post this up incase anyone was interested (or of course, if anyone can improve on it!)

I created an ascx file (which I registered in the web.config).

In the ascx file I placed the code:

 

<gaia:Panel runat="server" ID="EditorPanel">

    <gaia:HiddenField runat="server" ID="TransferField" />

    <FCKeditorV2:FCKeditor ID="Editor" runat="server" Width="715px" />

</gaia:Panel>

In the code behind page, I had this:

public partial class TextEditor : System.Web.UI.UserControl

 

    {

        public string Text 

        { 

            get { return TransferField.Value; } 

            set { Editor.Value = value; EditorPanel.ForceAnUpdate(); } 

        }


        public Control SaveButton { get; set; }


        protected void Page_Load(object sender, EventArgs e)

        {

            string functionName = this.ClientID + "_SavingFCK()";


            if (SaveButton != null)

            {

                if (SaveButton is Gaia.WebWidgets.Button)

                {

                    ((Gaia.WebWidgets.Button)SaveButton).OnClientClick = functionName;

                }

                else if(SaveButton is Gaia.WebWidgets.ImageButton)

                {

                    ((Gaia.WebWidgets.Button)SaveButton).OnClientClick = functionName;

                }

                else if(SaveButton is Gaia.WebWidgets.LinkButton)

                {

                    ((Gaia.WebWidgets.LinkButton)SaveButton).OnClientClick = functionName;

                }

            }

            else

            {

                throw new Exception("The SaveButton has not been set");

            }


            if (!Page.ClientScript.IsClientScriptBlockRegistered("CrossBrowserGetElement"))

            {

                Page.ClientScript.RegisterStartupScript(this.GetType(), "CrossBrowserGetElement",

                    @"function getElement(id) {

                        var object = null;

                        if( document.layers ) {   

                        object = document.layers[id];

                        } else if( document.all ) {

                        object = document.all[id];

                        } else if( document.getElementById ) {

                        object = document.getElementById(id);

                        }

                        return object;

                    }", true);

            }


            Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID + "EditorScript",

                @"  function " + functionName + @" {

                        var oEditor1 = FCKeditorAPI.GetInstance('" + Editor.ClientID + @"');

                        getElement('" + TransferField.ClientID + @"').value = oEditor1.GetHTML();

                    }", true);

        }

    }

It's working for me so far.  All you need to do if using this is place this on your page:

 

<uc1:TextEditor runat="server" ID="ContentEditor" />

And in the page_load of that, just assign the button the the control (so it can add the onclientclick events)

ContentEditor.SaveButton = PageSaveButton;

Let me know how you get on if you use this.

MrPea

 

 

 

janblo
#24 Posted : Monday, January 19, 2009 8:27:42 AM
Rank: Titan



Joined: 8/21/2008
Posts: 349
Points: 2,050

Great stuff. Thanks for sharing.


Gaiaware Core Developer

Follow us at Twitter : http://twitter.com/janblomquist
Chaitanya
#25 Posted : Wednesday, February 04, 2009 4:09:14 PM
Rank: Advanced Member


Joined: 9/17/2008
Posts: 54
Points: 162
Location: Texas

Thought I would share this.    I am a DNN developer and wanted to be able to use the FCKEditor built into DNN.  I also didn't want to have an external ascx file,  just a single control that could be compiled into a DLL.   Below is the VB code for using the DNN FCKEditor and having the data post back with a GAIA button. I enhanced the previous code that was posted, and still need to add some checking into it for other editor types, but it does work.   

 

Imports System

Imports System.ComponentModel

Imports System.Globalization

Imports System.Reflection

 

<Assembly: Web.UI.WebResource("YourNamespace.getElement.js", "text/javascript")> 

 

Namespace Controls

 

Public Class TextEditor : Inherits Gaia.WebWidgets.Panel

Private gSaveControl As System.Web.UI.Control

Public Property Text() As String

Get

EnsureChildControls()

 

Return Me.TransferField.Value

End Get

Set(ByVal value As String)

Me.Editor.Value = value

Me.ForceAnUpdate()

End Set

End Property

 

Public ReadOnly Property Editor() As DotNetNuke.UI.WebControls.DNNRichTextEditControl

Get

Return CType(Me.FindControl("Editor"), DotNetNuke.UI.WebControls.DNNRichTextEditControl)

End Get

End Property

 

Public ReadOnly Property TransferField() As Gaia.WebWidgets.HiddenField

Get

Return CType(Me.FindControl("TransferField"), Gaia.WebWidgets.HiddenField)

End Get

End Property

 

Public Property SaveControl() As System.Web.UI.Control

Get

Return gSaveControl

End Get

Set(ByVal value As System.Web.UI.Control)

gSaveControl = value

End Set

End Property

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

EnsureChildControls()

End Sub

 

Protected Overrides Sub CreateChildControls()

MyBase.CreateChildControls()

Dim TransferField As New Gaia.WebWidgets.HiddenField()

'Dim Editor As DotNetNuke.UI.UserControls.TextEditor = CType(Me.Page.LoadControl("~/controls/texteditor.ascx"), DotNetNuke.UI.UserControls.TextEditor)

Dim Editor As New DotNetNuke.UI.WebControls.DNNRichTextEditControl()

TransferField.ID = "TransferField"

 

Editor.ID = "Editor"

Editor.Width = Me.Width

Editor.Height = Me.Height

 

Me.Controls.Add(TransferField)

Me.Controls.Add(Editor)

End Sub

 

Protected Overrides Sub IncludeScriptFiles()

MyBase.IncludeScriptFiles()

Gaia.WebWidgets.Manager.Instance.AddInclusionOfFileFromResource("RefSchedules.Common.getElement.js", GetType(TextEditor), "TextEditorgetElementFinishedLoading")

End Sub

Private Sub TextEditor_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

Dim InternalEditor As System.Web.UI.Control = Me.Editor.FindControl("Editoredit")

If InternalEditor.GetType() Is GetType(DotNetNuke.HtmlEditor.FckHtmlEditorProvider.Fckeditor) Then

Dim FCKEditor As DotNetNuke.HtmlEditor.FckHtmlEditorProvider.Fckeditor = CType(Me.Editor.Controls(0), DotNetNuke.HtmlEditor.FckHtmlEditorProvider.Fckeditor)

Dim functionName As String = "getElement('" + Me.TransferField.ClientID & "').value = FCKeditorAPI.GetInstance('" + FCKEditor.ClientID & "').GetHTML();"

Dim Prop As PropertyInfo = SaveControl.GetType().GetProperty("OnClientClick")

If Prop IsNot Nothing Then

Prop.SetValue(SaveControl, functionName, Nothing)

Else

Throw New Exception("The SaveControl has not been set")

End If

End If

End Sub

End Class

End Namespace

 
Content of YourNamspace.getElement.js file:
 
function getElement(id) {
    var object = null;
    
    if( document.layers) { object = document.layers[id]; }
    else if( document.all) { object = document.all[id]; }
    else if(document.getElementById) { object = document.getElementById(id); }
 
    return object;
}
 
TextEditorgetElementFinishedLoading = true;
 
I made several changes to the code.   There was a problem when the editor is popup dynamically, the control would not work.   The above code does work just fine during a dynamically created popup control such as a window.   I also learned quite a bit about how to create Gaia controls with some more specific client side functionality.   I will be posting a blog/tutorial on that when I get some time.   You should be able to modify the above code slightly so that it will work with the non-DNN FCKEditor and shouldn't take much to do that.   This is much cleaner than my previous posted code.
 
One of the other things that I added is a simple reflection function that will check to see if the Property OnClientClick is part of the SaveControl and if so, it will attach it.  That removed several lines of code and the need to check every single type of control that you wanted it to work with.
 
Let me know what you guys think of this new version!
 
Chaitanya
2 Pages 12>
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.