Stylesheet for HTML mode

8 posts, 0 answers
  1. TERRY
    TERRY avatar
    12 posts
    Member since:
    Oct 2008

    Posted 16 Feb Link to this post

    Hi there. 

     I've been doing a lot of searching for this but I can't seem to find any answer anywhere.

     I'm trying to get access to the html document element for the editor when it is in HTML mode.  I want to be able to add a stylesheet so that I can control the font size, font family etc. when using the editor in HTML mode.  All of the answers that I've found so far only show you how to add stylesheets for the editor in Preview and Design mode.

     Thanks in advance

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 17 Feb Link to this post

    Hi Terry,

    The content area in HTML mode is a <textarea> element so you cannot add stylesheets to it.

    You can, however, use CSS on the main page and the element's class to control its appearance, just like with any other <textarea> node:

    textarea.reTextArea
    {
        font-size: 40px;
    }


    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. TERRY
    TERRY avatar
    12 posts
    Member since:
    Oct 2008

    Posted 18 Feb in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thank you for the reply.  However I think your solution doesn't work.  The reason is because the textarea is inside an iFrame that does not pull styles from the main page.  That is why telerik provides the "ContentAreaCssFile" attribute which works for the Design mode.  However there is no attribute for HTML mode.

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 22 Feb Link to this post

    Hello Terry,

    The <iframe> that is used for content editing in Design mode is a sibling in the DOM tree to the <textarea> used for editing in HTML mode. I am attaching here a short video that showcases the difference the rule I suggested makes and how the DOM hierarchy looks like as a reference.

    Here is the full page markup that you can use to get the same effect as in the video:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
        <head runat="server">
            <title></title>
            <style type="text/css">
                textarea.reTextArea
                {
                    font-size: 40px;
                    color: red;
                }
            </style>
     
        </head>
        <body>
            <form id="form1" runat="server">
                <asp:ScriptManager ID="Scriptmanager1" runat="server" />
                <telerik:RadEditor ID="RadEditor1" runat="server">
                    <Content>
                        lorem ipsum
                    </Content>
                </telerik:RadEditor>
            </form>
        </body>
    </html>


    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. TERRY
    TERRY avatar
    12 posts
    Member since:
    Oct 2008

    Posted 22 Feb in reply to Marin Bratanov Link to this post

    Hi Marin

    I can see clearly from your video that your solution works perfectly for you.  However when I try this it does not work. I tried to attach a video showing me doing exactly what your video does, but this page doesn't allow videos to be added.  But I copied and pasted your code exactly and when I view the page the styles do not get applied to the textarea for the editor in html mode.

    Is there another way to accomplish this? Maybe some way to insert the stylesheet into the document element while the editor is loading?  Similar to how the ContentAreaCSSFile attribute works

  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 23 Feb Link to this post

    Hi Terry,

    There is no reason why a CSS rule placed on the page will not affect the HTML on that page. This is the way to style the HTML area and I advise you open a support ticket where you can attach a video and a sample that showcases the issue.

    The ContentAreaCssFile needs to add a <link> element in the document of the editable <iframe> used in Design and Preview modes, which is a separate context, but the HTML mode <textarea> is in the main document.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. TERRY
    TERRY avatar
    12 posts
    Member since:
    Oct 2008

    Posted 23 Feb in reply to Marin Bratanov Link to this post

    I completely agree that is how you style a text area that is in the main document.  The issue is that the textarea for the editor in html is not part of the main document.  It is in its own document.  I will attach an image so that you can see where the editor is rendering the html text area
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 24 Feb Link to this post

    Hello Terry,

    What is your RadEditor declaration? Such rendering is not expected (I am attaching a screenshot with more of the markup visible in the dev toolbar). Also, does upgrading to the latest (2016.1.113 at the time of writing) help? If not, I strongly advise you open a support ticket where you can send us an example that reproduces this behavior so we can look into it.

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017