[CLOSED] HtmlEditor issue: stylizing

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] HtmlEditor issue: stylizing

    Hi,

    This is related to http://forums.ext.net/showthread.php...d=1#post274443. Applying a custom styling rule to stylize an HtmlEditor control as in v1.7 doesn't work as expected. The test case below shows how the rule affects 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%;
        }
    
        .read-only-htmleditor .x-html-editor-input {
            border-top-width: 1px;
        }
    </style>
    <script type="text/javascript">
        var onDocumentReady = function () {
            App.TextArea1.setVisible(false);
            App.HtmlEditor1.addCls('read-only-htmleditor');
            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; Sep 01, 2015 at 4:48 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    Yes, styling and markup have been quite revised since v1. Unfortunately, there is no a changelog on that. The only way would be inspecting a rendered markup of HtmlEdtior and CSS rules and override them accordingly. I am afraid I cannot suggest anything better. Personally, I am always do that when dealing with such kind of requirements and I don't see any better and easier way.
  3. #3
    Hi Daniil,

    Here's the list of style related attributes of the HtmlEditor control that can be defined in the markup. If you had to guess, which ones would you pick to work with in order to modify the style of the editor input? Are there any general guidelines by Sencha or Ext.Net on usage?

    • BaseBodyCls
    • BaseCls
    • CellCls
    • ClearCls
    • ComponentCls
    • CtCls
    • DirtyCls
    • DisabledCls
    • FieldBodyCls
    • FieldCls
    • FocusCls
    • FormItemCls
    • InvalidCls
    • LabelCls
    • LabelClsExtra
    • NoteCls
    • OverCls
    • ReadOnlyCls
    • StyleHtmlCls
    • StyleSpec
  4. #4
    I have not seen any thorough guidelines on that. It looks like we can only count on ExtJS docs for those properties which, personally, I found quite helpful. Those docs comments are copied to our Ext.NET properties as XML docs comments and appear due to IntelliSense.

    For example, a FocusCls.
    http://docs.sencha.com/extjs/5.1/5.1...e-cfg-focusCls

    CSS class that will be added to focused Component, and removed when Component blurs.
    Defaults to: 'x-focus'
    So, if you need to change styling when a Component is focused, you might change its focusCls. Though, in this case you lose the default focus styling at all. So, if you need to do a slight change it would be better to use a Component's Cls and override a specific CSS rule. In that case you would keep all the default styling and have some piece overridden. Though, there is a trick with FocusCls (and many others ...Cls properties) - FocusCls="default-focus-class my-additional-focus-class" to keep the default functionality. Sometimes I used it.

    In my experience, a Component's .Cls property is almost always a way to customize styling.
    Actually, the docs has a recommendation to use it for adding customized styles.
    An optional extra CSS class that will be added to this component's Element. The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.
    In my practice, it happens but it is very-very rare when I end up using other ...Cls properties. It is usually setting a Component's .Cls property, then inspecting rendered HTML markup and its CSS, then actual overriding.
  5. #5
    Thanks for the pointers, Daniil. Trying to apply custom CSS rules to HtmlEditor has been largely an exercise in futility for me. At the end of the day, it may not be worth our while as I've grown to find style responsible attributes not very intuitive, unfortunately. For example, one would assume that ReadOnlyCls should work in conjunction with ReadOnly when it's set to "true" in the control's markup. However, this unexpectedly modifies the label of TextArea and essentially does nothing to HtmlEditor appearance.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                HtmlEditor1.Text = "Some text goes here...";
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            // https://github.com/extnet/Ext.NET/issues/885
            Ext.layout.component.field.HtmlEditor.override({
                finishedLayout: function () {
                    var body;
    
                    this.callParent(arguments);
                    body = this.owner.getDoc().body;
    
                    if (body) {
                        body.style[Ext.isIE8 ? "height" : "minHeight"] = this.owner.iframeEl.getHeight() + "px";;
                    }
                }
            });
    
            var onDocumentReady = function () {
                App.TextArea1.setVisible(false);
                App.HtmlEditor1.addCls('read-only-htmleditor');
                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>
        <style>
            .readonly-text-area {
                background-color: blue;
            }
    
            .readonly-html-editor {
                color: #696969;
                border-width: 1px;
                border-style: double;
                border-color: #C6CBDA;
                background-color: #F2F6FB;
                width: 100%;
            }
    
            .x-html-editor-input {
                border-top-width: 1px;
            }
        </style>
    </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" ReadOnly="true" ReadOnlyCls="readonly-text-area">
                            </ext:TextArea>
                            <ext:HtmlEditor
                                ID="HtmlEditor1"
                                runat="server"
                                AutoScroll="true"
                                AnchorHorizontal="100%" FieldLabel="Notes" MaxWidth="685"
                                SubmitValue="false" EnableKeyEvents="true" ReadOnly="true" ReadOnlyCls="readonly-html-editor">
                            </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>
  6. #6
    ReadOnlyCls is just a CSS class applied to the component's main element when it is read-only.
    http://docs.sencha.com/extjs/5.1/5.1...fg-readOnlyCls

    I checked - a CSS class is correctly applied to an HtmlEditor's main element. According to your CSS rules all the styles are being applied to the main element, but it doesn't mean that the rules are applied to the element that you need.

    Please clarify, when inspecting HTML markup of a rendered HtmlEditor, were you able to determine an element which you should apply styles for?

    I should say that Ext.NET/ExtJS provide properties to ease applying CSS classes on a component, but actual CSS rules is a job of a developer. Ideally, it is a job for a designer who is well experienced in CSS styling. In very beginning when I started dealing with such kind of requirements i was also in trouble.
    Last edited by Daniil; Aug 31, 2015 at 8:00 AM.
  7. #7
    Hi Daniil,

    I believe I need to apply custom CSS rules to the HtmlEditor input element although I'm not sure if it's considered main or not. As far as I can tell, the styles don't get applied properly because the appearance of the control doesn't change. The same technique used to be working with no sweat under v1.7. However, I do realize that the object model in Sencha 5 has been completely redesigned so I'm not surprised that it's no longer working. When I run IE11 Developer Tools console and highlight the "main" element on the page, I don't see the custom rules applied. Please refer to the screen shot attached. Perhaps, I'm just missing something very basic.
    Click image for larger version. 

Name:	31-08-2015 7-40-53 AM.png 
Views:	107 
Size:	58.9 KB 
ID:	24192
  8. #8
    I believe I need to apply custom CSS rules to the HtmlEditor input element although I'm not sure if it's considered main or not.
    I think the "main" element in the ExtJS docs means the highest DOM element in the hierarchy of rendered component's markup. I would expect a component .getEl() returns a "main" element.

    As far as I can tell, the styles don't get applied properly because the appearance of the control doesn't change.
    Okay, there is a tip for troubleshooting that. At first, I recommend to ensure if a CSS class (ReadOnlyCls="readonly-html-editor" in your case) is being applied at all. To check that you could try to search for "readonly-html-editor" if Chrome's Developer Tools (for example). I did it and found out that a ReadOnlyCls is not applied at all. I consider it a bug. The Issue has been created and fixed in the revision 6554 (trunk). It goes to 3.3.

    Now (with SVN trunk) ReadOnlyCls="readonly-html-editor" is being applied:
    Click image for larger version. 

Name:	ReadOnlyCls.JPG 
Views:	106 
Size:	76.7 KB 
ID:	24193

    After ensuring that a CSS class is applied, the second possible reason - CSS rules are incorrect. Either selector is wrong or rules are too weak to override existing rules.

    The same technique used to be working with no sweat under v1.7.
    Not sure what exactly is meant under "technique". At least, I don't see ReadOnlyCls in v1. In my opinion the technique is to apply a custom CSS class (as I stated above it is usually done via a component .Cls) on a component and set up respective CSS rules. In this part there is no change between v1 and v3. But yes, actual CSS rules might be changed, because markup, names of CSS classes and default CSS rules have been changed substantially.

    As well, I am not sure how you get it working in v1. As far as I can see you need to apply CSS rules on an HtmlEditor's iframe element. It is what I am not sure how you implemented it in v1. Could you, please, provide a v1 test case?
  9. #9
    Here's the test case working in v1.7. BTW, I've just realized that it throws a JS error when the HtmlEditor control is clicked. I will open up a separate thread in the appropriate forum to raise the issue.

    Test case for Ext.Net 1.7
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                HtmlEditor1.Text = "Some text goes here...";
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            var onDocumentReady = function () {
                HtmlEditor1.setAnchor("100% -50", true);
                TextArea1.setVisible(false);
                HtmlEditor1.getToolbar().hide();
                FormPanel1.doLayout();
            };
    
            var showHide = function () {
                if (TextArea1.hidden) {
                    TextArea1.setVisible(true);
                    HtmlEditor1.setAnchor("100% -255", true);
                }
                else {
                    TextArea1.setVisible(false);
                    HtmlEditor1.setAnchor("100% -50", true);
                }
            };
        </script>
        <style>
            .x-theme-blue .read-only-htmleditor {
                color: #696969;
                border-width: 1px;
                border-style: double;
                border-color: #C6CBDA;
                padding: 3px;
                height: 14px;
                background-color: #F2F6FB !important;
                background-image: none;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <DocumentReady Handler="onDocumentReady();"></DocumentReady>
                </Listeners>
            </ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:FormPanel runat="server" ID="FormPanel1" 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"
                                SubmitValue="false" EnableKeyEvents="true" ReadOnly="true" Cls="read-only-htmleditor">
                            </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>
  10. #10
    Thank you for the test case. I either didn't know or completely forgot about this functionality.

    There is a piece of code in HtmlEditor to grab styles from a main component and apply to iframe.

    But it doesn't grab all the styles, but only:
    ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color')
    So, for example, the border rules that you set are not applied. And I see what was changed in v3.

    In any way, according to the fact that your v1 approach works partially, i.e. it applies only a limited set of rules to the iframe element, I suggest to apply them in this way:

    <ext:HtmlEditor ...>
        <Listeners>
            <Initialize Fn="onInitialize" />
        </Listeners>
    </ext:HtmlEditor>
    var onInitialize = function (htmlEditor) {
        var editorBody = htmlEditor.getEditorBody();
    
        Ext.DomHelper.applyStyles(editorBody, {
            backgroundColor: "#F2F6FB"
        });
    };
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Stylizing FieldLabel and BoxLabel
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 14, 2013, 12:52 PM
  2. [CLOSED] Stylizing a menu button Panel
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 07, 2013, 3:49 PM
  3. [CLOSED] Stylizing ToolbarTextItem
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 16, 2012, 3:42 AM
  4. [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
  5. HtmlEditor contains
    By okutbay in forum 1.x Help
    Replies: 0
    Last Post: May 06, 2010, 9:37 AM

Tags for this Thread

Posting Permissions