Getting Started
Basic Examples
Input and Output
Interface Customization
Advanced Topics

Welcome to the Common Tasks QuickStart

The Common Task QuickStart is designed to help you quickly find the answers to your most frequent programming questions. This section may be used as a topical reference. If there are topics not addressed here that you'd like to see in future releases, please drop us an email at Support@CuteSoft.net .


Customization:

  • Changing the default font style in editor

    Please check the Editor.EditorBodyStyle and EditorWysiwygModeCss property. 

    Editor.EditorWysiwygModeCss Property
    Specifies the location of the style sheet that will be used by the editable area. Multiple Style Sheets are supported. Example EditorWysiwygModeCss="example.css,~/portal.css,/default.css"  

     

    Editor.EditorBodyStyle Property

    The style to be applied to the Editor body.   

    Cute Editor uses default font of the current page.  The default font of web page is Times new roman. If you want to change the default font from Times new roman to Verdana, you can add the following code into the style sheet file:

    body, td { font-family: Verdana; }

    Or you can use Editor.EditorBodyStyle Property:

    Editor1.EditorBodyStyle="font-family: Verdana";
  • Changing Behavior of TAB Key

    By default Cute Editor automatically inserts a certain number of " " characters when user clicks the tab key.

    If you want to modify the behavior of the TAB key within the CuteEditor box so that it tabs out of the box to the next control in the page, please set Editor.TabSpaces property to -1.



    <CE:Editor TabSpaces="-1" id="Editor1" runat="server" ></CE:Editor>
  • HTML option onload by default
    <CE:Editor ActiveTab="Code" id="Editor1" runat="server" ></CE:Editor>
  • Preview option onload by default
    <CE:Editor ActiveTab="Preview" id="Editor1" runat="server" ></CE:Editor>
  • Full screen mode on by default
    <CE:Editor FullPage="True" id="Editor1" runat="server" ></CE:Editor>
  • Printing a full web page

    Please set the Editor.PrintFullWebPage Property to true.

    By default Cute Editor will print the content in the editing area only. When this property is set to true, Cute Editor will print the whole web page.

    For example:
    <CE:Editor id="Editor1" runat="server" PrintFullWebPage="true"></CE:Editor>
  • Setting focus to editor onload

    Please set the Editor.Focus Property to true.

    By default Cute Editor will not grabs focus when the page loads. If the Editor.Focus Property is set to true then the editor will take focus, if it is set to false it will not.

    <CE:Editor Focus="True" id="Editor1" runat="server" ></CE:Editor>
  • Displaying read-only content
    You can set Editor.ReadOnly property to true if you would like to display read-only content in the Cute Editor in some situations.

    <CE:Editor ReadOnly="True" id="Editor1" runat="server" ></CE:Editor>
  • Relative or Absolute URLs


    When you're creating links to documents and images on the Web, you need to think about how you're going to link to them.

    CuteEditor supports three standard ways to create links:

    1. Site root relative path ( <a href="/default.aspx">Home</a> )
    2. Absolute path ( <a href="http://cutesoft/default.aspx">Home</a> )
    3. Relative paths ( <a href="default.aspx">Home</a> or <a href="#top">Top</a>)  

     

    To create links correctly in CuteEditor, you need to use Editor.URLType Property and URLType Enumeration.

    Editor.URLType Property

    Specify whether the URL should be converted to a site root relative path (/html/images/image1.gif) or an absolute path (http://www.mysite.com/images/image1.gif).

    URLType Enumeration


    Default The URL is not converted.
    SiteRelative The URL is converted into a site root relative path. A site root relative path describes the location of the destination file by describing the route the browser must take from the Web site's root folder (top level in the folder structure). For example, a site root-relative path to an image may appear as: /html/images/image1.gif
    Absolute The URL is converted into an absolute path. An absolute path describes the physical location of a file on a machine or the exact location of a file on the Internet. An absolute path on your hard drive might appear as: An absolute path might appear as: http://www.mysite.com/images/image1.gif

    Example:

    <CE:Editor id="Editor1" URLType="Absolute" runat="server"></CE:Editor>
  • How to Change the InsertLayer behavior?
    Please open CuteSoft_Client\CuteEditor\Scripts\Constant.js file and modify the following code:
    var layerdefaultstyle = "position:absolute;width:104px; height: 104px";

  • How to disable the tag property window when users double click a control?

    Please open CuteSoft_Client\CuteEditor\Scripts\Constant.js file and modify the following code:

    //By default, when users double click a control, a tag property dialog will open. Set it to true if you want to disable this feature.
    editorconstant.DisableDoubleClickEvent = false;

  • How to Ctrl+Z behavior?

    Please open CuteSoft_Client\CuteEditor\Scripts\Constant.js file and modify the following code:

    editorconstant.DisableCtrlZ = false;


HTML Filtering options:

  • Editing ASCX, ASPX, ASP... files

    Please set the Editor.AllowEditServerSideCode Property to true.

    By default Cute Editor doesn't allow edit the Server side code. When this property is set to true, Cute Editor will allow edit the Server side code. (<%@ Page Language="C#" %> <%=MyString %> <asp:textbox id="textbox1" runat="server"></asp:textbox>)

  • Preventing JavaScript Injection
    By default Cute Editor automatically strips all script elements and script contents from the html to prevent javaScript injection.

    You can turn this feature off by setting Editor.EnableStripScriptTags property to false.
  • Anti Spam Email Encoder
    If you want to list your email address on your Web site and protect it from spammers too, you have to encode it in some way. CuteEditor can help you to come up with a spam-safe mailto link.

    Anti Spam Email Encoder

    Email contact links are an invaluable part of any web page. However, they are also vulnerable to a particular type of web robot known as the spam harvester or spambot.

    A spam harvester can read through the pages in your site and extract email addresses which are then added to bulk marketing databases.

    CuteEditor allows you reduce possible spam by 'disguising' a raw email address in an encoded ASCII form.

    You can turn this feature off by setting Editor.EnableAntiSpamEmailEncoder property to "false

  • Clean Up HTML on the server side
    You can teach your end users use the Clean Up HTML button (Clean Up HTML) in Cute Editor to remove extraneous tags and streamline your HTML code.

    But it's easy to make mistakes if your end users forget Clean Up HTML before saving the content into database.

    Cute Editor provides two server side methods which can fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup.

    You can use Editor.CleanUpHTMLCode method to remove empty tags, combine nested FONT tags, and otherwise improve messy or unreadable HTML code.

    You can aslo Editor.CleanUpMicrosoftWordHTML method to remove the extraneous HTML code generated by Microsoft Word.

Accessibility :

  • Using <b> instead of <strong>
    logical formatting tags

    These are two types of text formatting tags -- logical formatting tags ( <strong> and <em> ), which describe the information in the element, and physical formatting tags (<b> and <i>), which specify its appearance.

    By default CuteEditor use the logical formatting tags ( <strong> and <em> ). If you want to use the physical tags (<b> and <i>), you can set Editor.UsePhysicalFormattingTags Property to true.
  • Removing <TBODY> tag

    Please set the Editor.RemoveTBODYTag Property to true.

    By default Internet Explorer HTML parser automatically insert TBODY tag after any TABLE tag. When this property is set to true, CuteEditor strips out the TBODY tags.

    For example:
    <CE:Editor id="Editor1" runat="server" RemoveTBODYTag="true"></CE:Editor>
  • Using Simple Ampersand

    Please set the Editor.UseSimpleAmpersand Property to true.

    W3C recommend that all '&' in query strings be converted to &amp;This is the only way to get a piece of HTML validated. The reason is that & is the start of an HTML entity, such as &pound;

    So this:

    <a href="page.aspx?var1=one&amp;var2=two">link</a>
    is valid, whereas:
    <a href="page.aspx?var1=one&var2=two">link</a>
    isn't.

    If you still want to use simple Ampersand in query strings, you can set this property to true. if you want to retrieve the CuteEditor HTML content in XHTML format, the 'UseSimpleAmpersand' property will be ignored.

    For example:
    <CE:Editor id="Editor1" runat="server" UseSimpleAmpersand ="true"></CE:Editor>
  • Replacing outdated <FONT> tags with CSS
    Compliant with the web standardsFont tags are now deprecated, meaning that they aren't used any more and will cause validation errors. Many legacy pages still contain style information in font tags. It is possible to resolve this by replacing with style tags instead.

    CSS styles can be overriden by browser settings whereas font tags can't, therefore styles are much better for accessibility. In addition, because the browser can't override font tags, it's not possible for users to make changes if they have a high resolution screen and the font size is too small to be legible, or if the text cannot be displayed at all because the user doesn't have the right font.

    By default Cute Editor converts font tags to span tags. <font face=times color=#ffffff size=4>your text</font> would be replaced with <span style="FONT-SIZE: 110%; COLOR: #ffffff; FONT-FAMILY: times, serif"><font size=4>your text</font></span>.

    If you still want to use font tags, you can set Editor.UseFontTags property to true.