Welcome Guest Search | Active Topics | Sign In | Register

HTML Editor - wrapping text input Options
mephoenix
Posted: Friday, October 10, 2008 5:47:25 AM
Rank: Newbie
Groups: Member

Joined: 9/12/2008
Posts: 5
My users would like for any text entered into an HTML Editor to wrap at the end of the shown boundry of the editor. I realize that on this forum the text does wrap, however, my editors do not currently wrap. I am dynamically loading some of the properties in an effort to reduce making one change in many places. I am also using style sheets. I have included my code below. Please give me a clear answer and example of what I need to do to get my editors to wrap as I am using about 28 editors in this particular web site. Thank you

On the aspx page:
<eo:Editor runat="server" id="editor">
<CustomHeaderTemplate>
<eo:ToolBar id="HeaderToolBar0" runat="server">
<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 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 Type="Separator"></eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Insert Link" ImageUrl="00101021" CommandName="InsertOrEditLink"></eo:ToolBarItem>
<eo:ToolBarItem Type="Separator"></eo:ToolBarItem>
<eo:ToolBarItem ToolTip="Spell Check" ImageUrl="00101018" CommandName="SpellCheck"></eo:ToolBarItem>
</Items>
</eo:ToolBar>
</CustomHeaderTemplate>
</eo:Editor>

In the style sheet:
.eoEditor
{
Width:100%;
Height:333px;
overflow:auto;
}

.eoEditor_HtmlBody
{
background-color:#FFFFE0;
font-size: 12pt;
color: #000000;
line-height: 10px;
font-family: Arial, sans-serif, Tahoma, Verdana, Geneva, Helvetica;
overflow:auto;
}

.eoEditor_HeaderStyle
{
border-right: gray 1px solid;
border-top: gray 1px solid;
border-left: gray 1px solid;
border-bottom: gray 1px;
}

.eoEditor_EditAreaStyle
{
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;
background-color:#FFFFE0;
font-size: 12pt;
line-height: 10px;
font-family: Arial, sans-serif, Tahoma, Verdana, Geneva, Helvetica;
overflow:auto;
}

.eoEditor_Footer
{
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;
}

.eoEditor_TabButtonSelectedStyle
{
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
}

.eoEditor_TabButtonNormalStyle
{
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: font-family:Arial, sans-serif, Tahoma, Verdana, Geneva, Helvetica;
background-color: white
}

.eoEditor_TabButtonHoverStyle
{
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: font-family:Arial, sans-serif, Tahoma, Verdana, Geneva, Helvetica;
background-color: #c2cfe5
}

Part of the class that loads other properties:
editor.CssFile = "~/css/XXXXXX.css";
editor.TextAreaCssFile = "~/css/XXXXXX.css";
editor.CssClass = "eoEditor";
editor.HtmlBodyCssClass = "eoEditor_HtmlBody";
editor.HighlightColor = System.Drawing.Color.Yellow;
editor.ToolBarSet = EO.Web.EditorToolBarSet.Custom;
editor.SpellCheckerID = "SpellChecker1";
editor.Font.Bold = false;
editor.Font.Italic = false;
editor.Font.Overline = false;
editor.Font.Strikeout = false;
editor.Font.Underline = false;
editor.EditAreaStyle.CssClass = "eoEditor_EditAreaStyle";
editor.HeaderStyle.CssClass = "eoEditor_HeaderStyle";
editor.BreadcrumbLabelText = "";
editor.DesignTabButtonText = "";
editor.PreviewTabButtonText = "";
editor.HtmlTabButtonText = "";
editor.FooterVisible = false;
editor.TabButtonStyles.SelectedStyle.CssClass = "eoEditor_TabButtonSelectedStyle";
editor.TabButtonStyles.NormalStyle.CssClass = "eoEditor_TabButtonNormalStyle";
editor.TabButtonStyles.HoverStyle.CssClass = "eoEditor_TabButtonHoverStyle";
editor.Visible = true;
eo_support
Posted: Friday, October 10, 2008 6:33:48 AM
Rank: Administration
Groups: Administration

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

We tried with your code and it works just fine:



So the clear answer to your question is: you do not need to do anything special to make the editor wrap. The only major difference between our test and your environment is that we do not have all your style sheet files. So try without any of your styles first.

If this still does not solve the problem, please try to isolate the problem first. First try the same setting in a blank page and see if that works for you. If the problem continues, please either create a test page or test project that demonstrates the problem and send it to us. Make sure all files are included and the project can run independently. As long as we can see the problem, it should not be difficult for us to locate the root cause.

Thanks
mephoenix
Posted: Friday, October 10, 2008 6:46:49 AM
Rank: Newbie
Groups: Member

Joined: 9/12/2008
Posts: 5
Try just holding down the 'k' key and see what happens
eo_support
Posted: Friday, October 10, 2008 7:01:22 AM
Rank: Administration
Groups: Administration

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

The editor wraps text based on "word". So if you have a word that is 1000 characters long, it will stay in a single line without wrapping. That behavior is by design. In reality, it is very rare for user documents to contain a single word that are longer than a whole line. Holding down a single key to repeat to fill the full line is a valid test case but is not common in real use, so we do not believe wrapping text in this case has any practical meaning.

Let us know if you believe otherwise, we'd be happy to hear your reasons.

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.