Logo
My Account |  Site Map | Contact Us  
Welcome Guest Search | Active Topics | Sign In | Register

Problem with InsertHTML Options
katie
Posted: Tuesday, February 14, 2017 9:24:37 AM
Rank: Member
Groups: Member

Joined: 12/7/2007
Posts: 20
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">
//<!--JS_SAMPLE_BEGIN-->
//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
);
}
}
//<!--JS_SAMPLE_END-->
</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: 19,074
Hi,

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

Code: HTML/ASPX
<div class="pagebreak" id="pagebreak"></div>

You can use:

Code: HTML/ASPX
<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
<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.