[CLOSED] HtmlEditor issues

  1. #1

    [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.

    <%@ 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]
  2. #2
    Hy Vadym,

    For starters, the top border of the HtmlEditor control seems to be missing.
    I see styling has been changed since v1 and there is no top border under a toolbar anymore. I guess an HtmlEditor is not meant to be used without a toolbar.

    Fortunately, that appeared easy to fix.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <style>
            .no-toolbar-htmleditor .x-html-editor-input {
                border-top-width: 1px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <DocumentReady Handler="App.HtmlEditor1.addCls('no-toolbar-htmleditor');
                                            App.HtmlEditor1.getToolbar().hide();" />
                </Listeners>
            </ext:ResourceManager>
    
            <br />
    
            <ext:HtmlEditor ID="HtmlEditor1" runat="server" />
        </form>
    </body>
    </html>
    Please do not change
    App.HtmlEditor1.addCls('no-toolbar-htmleditor');
    App.HtmlEditor1.getToolbar().hide();
    to
    App.HtmlEditor1.getToolbar().hide();
    App.HtmlEditor1.addCls('no-toolbar-htmleditor');
    A .hide() call force a layout update which is required if the top border is changed from 0px (that is by default) to 1px.

    Secondly, a vertical scroll bar appears after setting the HtmlEditor anchor.
    Please start a new forum thread.

    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 start a new forum thread.
  3. #3
    Thanks, Daniil. I will open two related threads and you may close this one down.

Similar Threads

  1. IE10 issues
    By yevhenii in forum 2.x Help
    Replies: 9
    Last Post: Nov 14, 2013, 5:24 AM
  2. Grid Issues
    By jcontreras in forum 2.x Help
    Replies: 12
    Last Post: Jul 02, 2013, 11:42 AM
  3. [CLOSED] ListView with HtmlEditor -> HtmlEditor value is null
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 17, 2012, 12:50 AM
  4. Tab Issues
    By dukefama in forum 1.x Help
    Replies: 1
    Last Post: Oct 14, 2008, 6:57 AM
  5. Tab and Issues
    By dukefama in forum 1.x Help
    Replies: 6
    Last Post: Jul 04, 2008, 2:47 AM

Tags for this Thread

Posting Permissions