Problem with InsertHTML - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Problem with InsertHTML

Problem with InsertHTML

Options

Previous Topic · Next Topic

katie

Posted: Tuesday, February 14, 2017 9:24:37 AM

Rank: Member
Groups: Member

Joined: 12/7/2007
Posts: 21

I am trying to add in a div with class pagebreak when a custom toolbar item is clicked. I can get this to work, but when I click on design / html/ preview it disappears. Or if I press the return key.

My code is as follows:

<script type="text/javascript">
//
//This function handles our custom toolbar button event
function toolbar_click_handler(toolBar, toolBarItem, subMenu) {
if (toolBarItem.getCommandName() == "InsertPageBreakLine") {
//Get the editor object
var editor = eo_GetObject("Editor1");

editor.execCommand(
"InsertHTML", //Command
"<div class=\"pagebreak\" id=\"pagebreak\"></div>" //Additional argument
);
}
}
//
</script>
<eo:Editor ID="Editor1" TextAreaCssFile="~\resources\css\EOWebDemo.css" runat="server" PasteFilter="MsWordWithConfirm" LineBreakMode="Div" ToolBarSet="Custom" ColorPickerID="ColorPicker1" SpellCheckerID="SpellChecker1" HtmlBodyCssClass="demo_editor_body" ToolBarSkin="Office2003_XPStyle">
<CustomHeaderTemplate>
<eo:ToolBar ID="HeaderToolBar0" runat="server" Width="100%" ClientSideOnItemClick="toolbar_click_handler" 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="Undo" ImageUrl="00101023" CommandName="Undo">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Redo" ImageUrl="00101024" CommandName="Redo">
</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="Font Sizes" CommandName="FontSizes" Type="Custom">
<CustomItem>
<asp:DropDownList runat="server" ID="FontSizeDropDown" Style="width: 50px">
</asp:DropDownList>
</CustomItem>
</eo:ToolBarItem>
<eo:ToolBarItem CommandName="ForeColor" ImageUrl="00101029"
ToolTip="Fore Color" Type="DropDownMenu">
</eo:ToolBarItem>
<eo:ToolBarItem CommandName="BackColor" ImageUrl="00101030"
ToolTip="Back Color" Type="DropDownMenu">
</eo:ToolBarItem>

<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Align Left" ImageUrl="00101014" CommandName="AlignLeft">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Align Center" ImageUrl="00101015" CommandName="AlignCenter">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Align Right" ImageUrl="00101016" CommandName="AlignRight">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Align Justify" ImageUrl="00101017" CommandName="AlignJustify">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Bullet List" ImageUrl="00101019" CommandName="BulletList">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Numbered List" ImageUrl="00101020" CommandName="NumberedList">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Insert or Edit Table" ImageUrl="00101031" CommandName="InsertOrEditTable">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Insert Emoticon" ImageUrl="00101033" CommandName="InsertEmoticon">
</eo:ToolBarItem>
<eo:ToolBarItem Type="Separator">
</eo:ToolBarItem>
<eo:ToolBarItem CommandName="SpellCheck" ImageUrl="00101018" ToolTip="Spell Check"></eo:ToolBarItem>
<eo:ToolBarItem ImageUrl="~\resources\images\ed_pagebreak_n.gif" CommandName="InsertPageBreakLine"></eo:ToolBarItem>
</Items>
</eo:ToolBar>
</CustomHeaderTemplate>
</eo:Editor>
<eo:ColorPicker ID="ColorPicker1" runat="server" Height="20px" Width="30px"></eo:ColorPicker>
<eo:SpellChecker ID="SpellChecker1" Language="en_US" runat="server" DialogID="SpellCheckerDialog1">
</eo:SpellChecker>
<eo:SpellCheckerDialog ID="SpellCheckerDialog1" CssFile="~\resources\css\EOWebDemo.css" Width="320px" Height="216px" runat="server" ControlSkinID="None"
CloseButtonUrl="00020440" HeaderHtml="Dialog Title" MinHeight="100" MinWidth="150" HeaderImageHeight="27"
HeaderImageUrl="00020441" HeaderHtmlFormat='<div style="padding-top:4px">{0}</div>' AllowResize="True">
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma"></FooterStyleActive>
<HeaderStyleActive CssText="background-image:url(00020442);color:#444444;font-family:'trebuchet ms';font-size:10pt;font-weight:bold;padding-bottom:7px;padding-left:8px;padding-right:0px;padding-top:0px;"></HeaderStyleActive>
<ContentStyleActive CssText="background-color:#f0f0f0;font-family:tahoma;font-size:8pt;padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px"></ContentStyleActive>
<BorderImages BottomBorder="00020409,00020429" RightBorder="00020407,00020427" TopRightCornerBottom="00020405,00020425"
TopRightCorner="00020403,00020423" LeftBorder="00020406,00020426" TopLeftCorner="00020401,00020421"
BottomRightCorner="00020410,00020430" TopLeftCornerBottom="00020404,00020424" BottomLeftCorner="00020408,00020428"
TopBorder="00020402,00020422"></BorderImages>
</eo:SpellCheckerDialog>

Thank you

eo_support

Posted: Wednesday, February 15, 2017 1:56:50 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229

Hi,

Please use a non-block element. For example, instead of:

Code: HTML/ASPX

Copy

<div class="pagebreak" id="pagebreak"></div>

You can use:

Code: HTML/ASPX

Copy

<span class="pagebreak" id="pagebreak"></span>

Inside your CSS class pagebreak you can add additional CSS property to make sure this span element is treated as a block element (for example, by applying "display:block" CSS attribute. The reason is if you add a DIV into a place where inline contents is expected, then the browser will treat it as invalid and try to adjust it. For example, the following HTML is invalid:

Code: HTML/ASPX

Copy

<p>
   <div class="pagebreak" id="pagebreak"></div>
</p>

Because DIV can not appear inside a P element. When that happens the browser will try to adjust it and it can cause the DIV element to be lost or moved to a different location.

The return key issue is a bug on our end for IE 11. We should be able to fix it in our next build.

Thanks!

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.

Message