Welcome Guest Search | Active Topics | Sign In | Register

Editor emoticon is placed outside <p> tags Options
Jan Rygh
Posted: Wednesday, February 11, 2009 7:35:06 AM
Rank: Member
Groups: Member

Joined: 2/9/2009
Posts: 23
Hi, I use an editor and callbackpanel to postback content from the editor.
The editor is placed outside the callbackpanel. I use Editor1.setHtml = ""; in the ClientSideAfterUpdate javascript to empty the Editor after a callback.

The problem is that if I paste a new emoticon into the editor after I have emtied the editor, it is pasted after the </p> tag in the Editor1.Html, i.e.

Editor1.Html = "<p>&nbsp;</p>\r\n<img height=\"19\" alt=\"Disappointed\" src=\"/EO/eo_web.ashx id=emoticon&amp;i=11\" width=\"19\" />"

Any suggestions on how to solve this?

eo_support
Posted: Wednesday, February 11, 2009 9:17:36 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Try to set the focus back to the editor once you have cleared its contents. For example:

Code: JavaScript
//Clear editor contents
Editor1.setHtml("");

//Set focus back to the editor
Editor1.focus();


That should resolve the issue.

Thanks!
Jan Rygh
Posted: Wednesday, February 11, 2009 9:50:53 AM
Rank: Member
Groups: Member

Joined: 2/9/2009
Posts: 23
I tried that, but now the new text written in the editor after Editor1.focus(); is inserted after </p>: Editor1.Html = "<p>&nbsp;</p>\r\nhere I enter new text"
eo_support
Posted: Wednesday, February 11, 2009 9:58:14 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Jan Rygh wrote:
I tried that, but now the new text written in the editor


Did you just type in the editor or insert text by code? The matter always has to do with focus and cursor position. We tried to type in directly and it works fine. If you continue to have problem, please provide a test page and detailed step by step instructions on how to reproduce the problem.

Thanks!
Jan Rygh
Posted: Wednesday, February 11, 2009 11:14:49 AM
Rank: Member
Groups: Member

Joined: 2/9/2009
Posts: 23
OK, here is a test page that demonstrates the effect. write something in the editor, press send, and type something else without using the mouse to put focus on the editor.

Page Default2,aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script type="text/javascript">

function CleanEditor() {
alert("msg:" + Editor1.getHtml())
Editor1.setHtml("");
Editor1.focus();
}

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<eo:CallbackPanel runat="server" ID="cpEditorSend" Triggers="{ControlID:EditorSend;Parameter:},{ControlID:Exit;Parameter:}"
ClientSideAfterUpdate="CleanEditor">
</eo:CallbackPanel>
<eo:Editor runat="server" ID="Editor1" Width="500px" HighlightColor="255, 255, 192"
Height="120px" ToolBarSet="Basic" HtmlBodyCssClass="demo_editor_body" FooterVisible="false"
TextAreaCssFile="~\EOWebDemo.css"
>
<FooterStyle CssText="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa">
</FooterStyle>
<BreadcrumbLabelStyle CssText="padding-right: 6px; padding-left: 6px; font-size: 12px; padding-top: 1px; font-family: tahoma">
</BreadcrumbLabelStyle>
<EditAreaStyle CssText="border-right: gray 1px solid; padding-right: 0px; border-top: gray 1px solid; padding-left: 0px; padding-bottom: 0px; border-left: gray 1px solid; padding-top: 0px; border-bottom: gray 1px solid">
</EditAreaStyle>
<HeaderStyle CssText="border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px">
</HeaderStyle>
<EmoticonStyle CssText="background-color:white;border-bottom-color:#c5d3ed;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#c5d3ed;border-left-style:solid;border-left-width:1px;border-right-color:#c5d3ed;border-right-style:solid;border-right-width:1px;border-top-color:#c5d3ed;border-top-style:solid;border-top-width:1px;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
</EmoticonStyle>
<BreadcrumbItemHoverStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma; background-color:#e0e0e0;">
</BreadcrumbItemHoverStyle>
<CustomHeaderTemplate>
<eo:ToolBar ID="HeaderToolBar0" runat="server" Width="100%" SeparatorImage="00100104"
BackgroundImageLeft="00100101" BackgroundImage="00100103" BackgroundImageRight="00100102">
<DownStyle CssText="border-right: #335ea8 1px solid; padding-right: 2px; border-top: #335ea8 1px solid; padding-left: 4px; padding-bottom: 1px; border-left: #335ea8 1px solid; padding-top: 3px; border-bottom: #335ea8 1px solid; background-color: #99afd4; cursor:hand; FONT-SIZE: 12px; FONT-FAMILY: Tahoma;">
</DownStyle>
<HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 3px; border-top: #335ea8 1px solid; padding-left: 3px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; background-color: #c2cfe5; cursor:hand; FONT-SIZE: 12px; FONT-FAMILY: Tahoma;">
</HoverStyle>
<NormalStyle CssText="padding-right: 4px; padding-left: 4px; padding-bottom: 3px; border-top-style: none; padding-top: 3px; border-right-style: none; border-left-style: none; border-bottom-style: none; cursor:hand; FONT-SIZE: 12px; FONT-FAMILY: Tahoma;">
</NormalStyle>
<ItemTemplates>
<eo:ToolBarItem Type="Custom">
<HoverStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;">
</HoverStyle>
<DownStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;">
</DownStyle>
<NormalStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;">
</NormalStyle>
</eo:ToolBarItem>
<eo:ToolBarItem Type="DropDownMenu">
<HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 3px; border-top: #335ea8 1px solid; padding-left: 3px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; background-color: #c2cfe5; cursor:hand; background-image: url(00100106); background-position-x: right;">
</HoverStyle>
<DownStyle CssText="border-right: #335ea8 1px solid; padding-right: 2px; border-top: #335ea8 1px solid; padding-left: 4px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 3px; border-bottom: none; background-color:transparent; cursor:hand; background-image: url(00100105); background-position-x: right;">
</DownStyle>
<NormalStyle CssText="padding-right: 4px; padding-left: 4px; padding-bottom: 3px; border-top-style: none; padding-top: 3px; border-right-style: none; border-left-style: none; border-bottom-style: none; cursor:hand; background-image: url(00100105); background-position-x: right;">
</NormalStyle>
</eo:ToolBarItem>
</ItemTemplates>
<Items>
<eo:ToolBarItem ToolTip="Fonts" CommandName="Fonts" Type="Custom">
<CustomItem>
<asp:DropDownList runat="server" ID="FontDropDown" Style="width: 110px">
</asp:DropDownList>
</CustomItem>
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Font Sizes" CommandName="FontSizes" Type="Custom">
<CustomItem>
<asp:DropDownList runat="server" ID="FontSizeDropDown" Style="width: 50px">
</asp:DropDownList>
</CustomItem>
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Bold" ImageUrl="00101011" CommandName="Bold">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Italic" ImageUrl="00101012" CommandName="Italic">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Underline" ImageUrl="00101013" CommandName="Underline">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Fore Color" ImageUrl="00101029" CommandName="ForeColor">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Bullet List" ImageUrl="00101019" CommandName="BulletList">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Insert Emoticon" ImageUrl="00101050" CommandName="InsertEmoticon">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Insert Link" ImageUrl="00101021" CommandName="InsertOrEditLink">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Insert Image" ImageUrl="00101033" CommandName="InsertOrEditImage">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Spell Check" ImageUrl="00101018" CommandName="SpellCheck">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Attachments" ImageUrl="00101059" CommandName="Upload">
</eo:ToolBarItem>
<eo:ToolBarItem Text="Cancel Upload" ToolTip="Cancel Upload" ImageUrl="00101059"
CommandName="CancelUpload">
</eo:ToolBarItem>
</Items>
</eo:ToolBar>
</CustomHeaderTemplate>
<TabButtonStyles>
<SelectedStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: white">
</SelectedStyle>
<NormalStyle CssText="border-right: #335ea8 1px; padding-right: 7px; border-top: #335ea8 1px; padding-left: 7px; font-size: 12px; padding-bottom: 3px; border-left: #335ea8 1px; padding-top: 3px; border-bottom: #335ea8 1px; font-family: tahoma; background-color: white">
</NormalStyle>
<HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: #c2cfe5">
</HoverStyle>
</TabButtonStyles>
<BreadcrumbDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa">
</BreadcrumbDropDownStyle>
<BreadcrumbItemSeparatorStyle CssText="width: 3px; height: 10px"></BreadcrumbItemSeparatorStyle>
<EmoticonDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa">
</EmoticonDropDownStyle>
<BreadcrumbItemStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma">
</BreadcrumbItemStyle>
</eo:Editor>
<asp:Button ID="EditorSend" runat="server" Text="Send" />
<asp:Button ID="Exit" runat="server" Text="Exit current session" />
</div>
</form>
</body>
</html>









code behind Default2.apsx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.cpEditorSend.Execute += new EO.Web.CallbackEventHandler(this.cpEditorSend_Execute);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
private void cpEditorSend_Execute(object sender, EO.Web.CallbackEventArgs e)
{

string msg = Editor1.Html.Trim();
}

}
eo_support
Posted: Wednesday, February 11, 2009 11:29:23 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Thank you very much for the code. We are looking into it and will let you know as soon as we find anything.

Thanks!
eo_support
Posted: Thursday, February 12, 2009 12:29:54 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

We have posted a new build that addressed this issue. Please check your private message for download locations.

Thanks!
Jan Rygh
Posted: Monday, February 16, 2009 3:04:22 AM
Rank: Member
Groups: Member

Joined: 2/9/2009
Posts: 23
Tkanks, the new build solved the problem :-)


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.