Aug 27, 2015, 12:43 PM
[CLOSED] HtmlEditor issues
Hi,
Please run the test case below. There're a few issues affecting this setup. For starters, the top border of the HtmlEditor control seems to be missing. Secondly, a vertical scroll bar appears after setting the HtmlEditor anchor. Thirdly, applying a custom styling rule as in v1.7 doesn't work as expected any more affecting the label only. I presume the HtmEditor control now features more style related attributes that can be used alone or in combination to achieve the desired effect. Please explain how to use them properly.
Please run the test case below. There're a few issues affecting this setup. For starters, the top border of the HtmlEditor control seems to be missing. Secondly, a vertical scroll bar appears after setting the HtmlEditor anchor. Thirdly, applying a custom styling rule as in v1.7 doesn't work as expected any more affecting the label only. I presume the HtmEditor control now features more style related attributes that can be used alone or in combination to achieve the desired effect. Please explain how to use them properly.
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
HtmlEditor1.Text = "Some text goes here...";
}
}
</script>
<style>
.x-theme-blue .read-only-htmleditor {
color: #696969;
border-width: 1px;
border-style: double;
border-color: #C6CBDA;
background-color: #F2F6FB;
width: 100%;
}
</style>
<script type="text/javascript">
var onDocumentReady = function () {
App.TextArea1.setVisible(false);
App.HtmlEditor1.getToolbar().hide();
App.HtmlEditor1.setAnchor("100% -50", true);
};
var showHide = function () {
if (App.TextArea1.hidden) {
App.TextArea1.setVisible(true);
App.HtmlEditor1.setAnchor("100% -255", true);
}
else {
App.TextArea1.setVisible(false);
App.HtmlEditor1.setAnchor("100% -50", true);
}
};
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>HtmlEditor - Ext.NET Examples</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<DocumentReady Fn="onDocumentReady"></DocumentReady>
</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:FormPanel runat="server" Padding="10" ButtonAlign="Left" Frame="false" Border="true">
<Items>
<ext:ToolbarSpacer Height="5"></ext:ToolbarSpacer>
<ext:TextArea ID="TextArea1" runat="server" AutoScroll="true"
AnchorHorizontal="100%" FieldLabel="My Notes" Height="200" MaxWidth="685"
SubmitValue="false" EnableKeyEvents="true" AllowBlank="false">
</ext:TextArea>
<ext:HtmlEditor
ID="HtmlEditor1"
runat="server"
AutoScroll="true"
AnchorHorizontal="100%" FieldLabel="Notes" MaxWidth="685" Cls="read-only-htmleditor"
SubmitValue="false" EnableKeyEvents="true" ReadOnly="true">
</ext:HtmlEditor>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Toggle">
<Listeners>
<Click Fn="showHide"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:FormPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 27, 2015 at 4:15 PM.
Reason: [CLOSED]