Chapter 5 FckEditor

AdamPembs · July 1st, 2010, 05:33 PM

Downloaded the source code for chapter 5 but couldnt use the installer, kept saying the installer was interrupted, so have done a manual install.

I can log in ok as administrator, but when I try to edit the content in AddEditContent.aspx the fckeditor is missing and I get the required field validator firing when I enter content in the textboxes. I have set modiy permissions for Network Service account for the app_data and userfiles folders. I am using Windows 7 enterprise. I have used the updated web.config and app_data files from the sticky.

I have also seen FCK editor has been replaced by the CK editor, has anyone used this successfully with this CMS?

Imar · July 2nd, 2010, 02:16 AM

Quote:

I have also seen FCK editor has been replaced by the CK editor, has anyone used this successfully with this CMS?

The editor that ships with the book is quite old. I would recommend getting the new CKEditor instead indeed. It's extremely simple to use. In your CMS pages. First, remove anything related to the FCKEditor. Then for the fields you want to turn into an editor, add a TextBox with TextMode set to MultiLine, set some special CSS class on the TextBox and include the scripts for the editor.

The CKEditor has more detailed information: http://docs.cksource.com/CKEditor_3.x/Developers_Guide

Cheers,

Imar

AdamPembs · July 2nd, 2010, 05:33 AM

Thanks Imar, took me 30 minutes to integrate the new code for the CKEditor.
The only thing I'm not completely happy about is having to use ctl00$MainContentPlaceholder$txtBodyText as the format for the javascript names. I think asp.net 4.0 has a clientname ClientId property, but Im still on 3.5. There might be a better way of doing this...but its working for me.

I posted the code below (if you want them for a sticky or link) The admin.master has this in the head section

Code:

 <script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

(Im having problems with virtual paths on this, so had to use .. parent path)

AddEditContent.aspx

Code:

<%@ Page Language="VB" MasterPageFile="~/AdminMaster.master" AutoEventWireup="false" CodeFile="AddEditContent.aspx.vb" Inherits="AddEditContent" Title="Create New Content Item" ValidateRequest="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceholder" runat="Server">
  <table cellpadding="0" cellspacing="0" style="width: 720px" runat="server" id="tblContentItem">
  <tr>
    <td style="width: 120px" class="Label">Title</td>
    <td style="width: 600px">
      <asp:TextBox ID="txtTitle" runat="server" Width="600px" />
      <asp:RequiredFieldValidator ID="reqTitle" runat="server" ControlToValidate="txtTitle" ErrorMessage="The title is required">The title is required</asp:RequiredFieldValidator>
      <br />
    </td>
  </tr>
  <tr>
    <td class="Label">Intro Text</td>
    <td>
    <textarea name="txtIntroText" cols="50" rows="10" ID="txtIntroText" runat="server">
   
    &lt;p&gt;Initial value.&lt;/p&gt;</textarea>
     
    </td>
  </tr>
  <tr>
    <td class="Label">Full Text</td>
    <td>
    <textarea name="txtBodyText" cols="50" rows="10" ID="txtBodyText" runat="server">
    </textarea>
     
    </td>
  </tr>
  <tr>
    <td class="Label">Content type</td>
    <td>
      <asp:DropDownList ID="lstContentTypes" runat="server" AutoPostBack="True" DataSourceID="sdsContentTypes" DataTextField="Description" DataValueField="Id"></asp:DropDownList>
      <br />
      <br />
    </td>
  </tr>
  <tr>
    <td class="Label">Category</td>
    <td>
      <asp:DropDownList ID="lstCategories" runat="server" DataSourceID="sdsCategories" DataTextField="Description" DataValueField="Id"></asp:DropDownList>
      <br />
      <br />
    </td>
  </tr>
  <tr>
    <td class="Label">Visible?</td>
    <td>
      <asp:CheckBox ID="chkVisible" runat="server" />
      <br />
      <br />
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <asp:Button ID="btnSave" runat="server" Text="Save" CausesValidation="False" />
      <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />
    </td>
  </tr>
  </table>
  <asp:SqlDataSource ID="sdsContentTypes" runat="server" ConnectionString="<%$ ConnectionStrings:Cms %>" SelectCommand="sprocContentTypeSelectList" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
  <asp:SqlDataSource ID="sdsCategories" runat="server" ConnectionString="<%$ ConnectionStrings:Cms %>" SelectCommand="sprocCategorySelectlist" SelectCommandType="StoredProcedure">
    <SelectParameters>
      <asp:ControlParameter ControlID="lstContentTypes" Name="contentTypeId" PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
  </asp:SqlDataSource>
  
  <script type="text/javascript">
      CKEDITOR.replace('ctl00$MainContentPlaceholder$txtBodyText');
</script><script type="text/javascript">
             CKEDITOR.replace('ctl00$MainContentPlaceholder$txtIntroText');
</script>
</asp:Content>

Imar · July 2nd, 2010, 06:21 AM

Hi Adam,

You don't have to use the ID. You should be able to simp,y assign a CssClass of ckeditor:

<asp:TextBox ....... CssClass="ckeditor" .... />

and then it should work.
http://docs.cksource.com/ckeditor_ap...ByClassEnabled

Not sure why this is not explicitly mentioned in the CKEditor docs.

Alternatively, you can use the control's ClientID:

CKEDITOR.replace('<%=txtIntroText.ClientID%>);

Hope this helps,

Imar

AdamPembs · July 2nd, 2010, 06:52 AM

The css replace worked a treat, thanks Imar. May I add for anyone else that you have to use a single cssclass for both the bodytext and the introtext textboxes. (N.B IIRC I cant use clientid as its asp.net 4 that introduced clientid?)
ie.

Code:

  <asp:TextBox ID="txtIntroText" runat="server" TextMode="MultiLine" CssClass="CMSText"></asp:TextBox>
    
 <asp:TextBox  ID="txtBodyText"  runat="server" TextMode="MultiLine" CssClass="CMSText"  ></asp:TextBox>

................

<script type="text/javascript">
      CKEDITOR.replaceClass = 'CMSText';
</script>

Imar · July 2nd, 2010, 06:56 AM

And if you use the default class of ckeditor, you don't even need the JavaScript:

Code:

 
<asp:TextBox ID="txtIntroText" runat="server" TextMode="MultiLine" CssClass="ckeditor WhateverOtherClassesYouNeed"></asp:TextBox>
    
<asp:TextBox  ID="txtBodyText"  runat="server" TextMode="MultiLine" CssClass="ckeditor WhateverOtherClassesYouNeed"  ></asp:TextBox>

Cheers,

Imar