Small width layout Medium width layout Maximum width layout Small text Medium text Large text
     Search
Downloads Downloads Directory Directory Forums Forums Forge Forge Blogs Blogs        Marketplace Marketplace Careers Program Careers
Products › Development › Forge › Provider - FCKeditor Register  |  

 

Project Avatar

 
  Quick Links  
 


  Contributors  
 


  Team Leadership  

Mauricio Marquez
( Project Leader )

MauricioMarquez.jpg
 


  Team Members  
Dan Ferguson
 


  DotNetNuke Projects  
The DotNetNuke Projects are a special category of platform extensions which are developed by volunteers to conform to the high professional standards mandated by DotNetNuke Corporation. The DotNetNuke Projects are distributed as a standard part of the DotNetNuke core application release offerings.
 


  Ads  
r2i.ntegrated
 


  Sponsors  

Meet Our Sponsors

FCKeditor Project
Salaro -- Skins and more
OnyakTech
The best choice for your web site host, email hosting, and domain registration.
CrystalTech Web Hosting™
Webhost4life, specialists in DNN hosting
 


DotNetNuke® Project :: FCKeditor Provider

As today, the on-line editor has become one of the most important tools when talking about on-line content editing. This makes the on-line editor one of the most important tools included on the DotNetNuke® framework.

FCKeditor™ is one of the best free on-line rich text editor existent on the Internet and its great features are well known by the internet comunity.

The provider started as a personal project by Mauricio Marquez (dnn.tiendaboliviana.com), and then it gained a lot of popularity. Now, in an effort to guaranty its freedom and a better integration with the core framework, it has become a real DotNetNuke® Project.

The provider includes the following features at the moment:

  • Make most FCKeditor features available to users
  • It has a custom configuration page included. (You can make each custom option available as per instance, per module and per portal.
  • Tries to include some features not available inside DNN (This will change soon) like a root folder per instance, role based toolbars, etc
  • Much more…

The following tasks will be accomplished by this team

  • Create a better integration between DNN and FCKeditor (This one will need real help from other project members)
  • Make the most features of this on-line editor available to final users and content administrators.
 


Team Lead Blog

The "Width" problem (and the 100%)

Aug 3

Posted by: Mauricio Márquez
8/3/2006

There are some aspects of HTML coding that developers not always take care when creating a module. The experience then gives the last details.
The following are common issues made by developers, skinners, etc (yes...me included)
Let me try to explain by giving a few samples
1)      Problem 1
Let say we have two HTML objects A and B. B object is inside A
            A

 
B
 
 

Then be sure width property for A is set to “100%” and width for B is set as default (Empty)
            A

 
B
 

The result: A increases and B keeps the same
2)      Problem 2
Let say we have two HTML objects A, B and C. B object is inside A and C is inside B
            A

 
B
 
C
 

Set width property of A to 100% and C to 100%. Set B to default (Empty)
            A

 
B
 
C
 

Result: A increases, but B and C are still the same. C only increases to B size because it is the 100% possible
Well, That is the main problem for the text editor (FCK and FTB). Let’s see the  code of the main container for all editor providers (TextEditor.ascx)
 

<%@ Control language="vb" CodeBehind="TextEditor.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.UserControls.TextEditor" %>
<table cellSpacing="2" cellPadding="2" summary="Edit HTML Design Table" border="0">
 <tr vAlign="top">
  <td align="center">
   <asp:panel id="pnlOption" Visible="True" Runat="server">
   <asp:RadioButtonList id="optView" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
   </asp:panel></td>
 </tr>
 <tr vAlign="top">
  <td><asp:panel id="pnlBasicTextBox" Visible="False" Runat="server">
   <asp:TextBox id="txtDesktopHTML" CssClass="NormalTextBox" runat="server" textmode="multiline"
   rows="12" width="600" columns="75"></asp:TextBox>
   <BR>
   <asp:Panel id="pnlBasicRender" Runat="server" Visible="True">
   <asp:RadioButtonList id="optRender" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
   </asp:Panel>
   </asp:panel><asp:panel id="pnlRichTextBox" Visible="False" Runat="server">
   <asp:PlaceHolder id="plcEditor" runat="server"></asp:PlaceHolder>
   </asp:panel><
  /td>
 </tr>
</table>

If the editor control is set to 100%, then its 100% is the current with of the main table on this control

Yes, that could depend of the type of html element used inside the editor, but most cases could give to this.

Solution 1: (not my favorite, but works without touching vb code)

                Include a “Width” for those HTML containers:

<%@ Control language="vb" CodeBehind="TextEditor.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.UserControls.TextEditor" %>
<table cellSpacing="2" cellPadding="2" summary="Edit HTML Design Table" border="0" Width=”100%”>
 <tr vAlign="top">
  <td align="center">
   <asp:panel id="pnlOption" Visible="True" Runat="server">
   <asp:RadioButtonList id="optView" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
   </asp:panel></td>
 </tr>
 <tr vAlign="top">
  <td Width=”100%”><asp:panel id="pnlBasicTextBox" Visible="False" Runat="server">
   <asp:TextBox id="txtDesktopHTML" CssClass="NormalTextBox" runat="server" textmode="multiline"
   rows="12" width="600" columns="75"></asp:TextBox>
   <BR>
   <asp:Panel id="pnlBasicRender" Runat="server" Visible="True">
   <asp:RadioButtonList id="optRender" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
   </asp:Panel>
   </asp:panel><asp:panel id="pnlRichTextBox" Visible="False" Runat="server">
   <asp:PlaceHolder id="plcEditor" runat="server"></asp:PlaceHolder>
   </asp:panel><
  /td>
 </tr>
</table>

Solution 2: Use current width from the text editor control and apply it to each container

<%@ Control language="vb" CodeBehind="TextEditor.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.UserControls.TextEditor" %>
<table cellSpacing="2" cellPadding="2" summary="Edit HTML Design Table" border="0" id=”tblTextEditor” Runat=”server”>
 <tr vAlign="top">
  <td align="center">
   <asp:panel id="pnlOption" Visible="True" Runat="server">
   <asp:RadioButtonList id="optView" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
   </asp:panel></td>
 </tr>
 <tr vAlign="top">
  <td id=”celTextEditor” Runat=”Server”><asp:panel id="pnlBasicTextBox" Visible="False" Runat="server">
   <asp:TextBox id="txtDesktopHTML" CssClass="NormalTextBox" runat="server" textmode="multiline"
   rows="12" width="600" columns="75"></asp:TextBox>
   <BR>
   <asp:Panel id="pnlBasicRender" Runat="server" Visible="True">
   <asp:RadioButtonList id="optRender" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
   </asp:Panel>
   </asp:panel><asp:panel id="pnlRichTextBox" Visible="False" Runat="server">
   <asp:PlaceHolder id="plcEditor" runat="server"></asp:PlaceHolder>
   </asp:panel><
  /td>
 </tr>
</table>

 

Then, include those elements when applying size inside the texteditor.ascx.vb

                RichTextEditor.Width = Width
                RichTextEditor.Height = Height
                txtDesktopHTML.Height = Height
                txtDesktopHTML.Width = Width
                tblTextEditor.Width=Width
                celTextEditor.Width=width

Hope this information could be useful and maybe lead to a fixed solution for all. I sent tis information to Charles Nurse and he is taking this into consideration for the next release

Finally, I can say that nobody is safe, because you could take care of the problem inside our code, but maybe there are some modules out there doing the same mistakes at the upper containers

Trackback Print
Location: Blogs Mauricio Márquez
Tags:

Re: The "Width" problem (and the 100%)

Fixed. The problem was the HTML code. Now I used FCKeditor at my own site, and then copy the source to this blog. FCKeditor is really great managing content

By locopon on   8/3/2006

Re: The "Width" problem (and the 100%)

There is not a fix included at the moment (3.3.4 or 4.3.4). I said that the core team will take this information into consideration for the next release. At the moment, you can use this information to fix your own DNN instance

By locopon on   8/13/2006
 


Smart-Thinker
DNN Modules for Social Networks for as low as $69 for 6 modules! We also maintain the DotNetNuke Directory - http://DNNDir.com
www.smart-thinker.com 		DNN Photo Gallery
Complete Photo Gallery Management!
www.dnnPhotoGallery.com 		R2i - Delivering Serious DNN Services & Solutions
Award Winning Design, Skin construction, Custom Modules and Consulting Services for the Enterprise organization. R2i is the DNN:Map module Project Lead and one of the largest DNN service providers with offices in New York City, Virginia and Baltimore.
www.bi4ce.com

DotNetNuke Corporation   Terms Of Use  Privacy Statement
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation
Hosted by MaximumASP