This is a migrated thread and some comments may be shown as answers.

Picking up internal CSS styles from HTML document

5 Answers 113 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 05 Oct 2014, 10:07 AM
Hi,

We use the editor for email marketing campaigns and sometime clients will have an email designed and the designer will set internal CSS styles within the HTML document. Is it possible for the editor to automatically pick up the internal CSS styles and set them in the CSS Class drop down box? I know it's possible to point this to an external CSS file but there is no mention of internal CSS styles.

Many thanks

Tim

5 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 07 Oct 2014, 11:18 AM
Hello Tim,

Could you please clarify how the CSS files or rules are inserted into the content area document?

Generally, a simple post back will reinitialize the RadEditor and populate the Apply Css Class dropdown with the additional classes. However, I am unable to firmly suggest you a possible approach as I am unable to exactly understand what is the situation and what is the goal.

Please provide exact details how the RadEditor is used and what is the expected behavior related to the CSS inserted.

Regards,
Ianko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Danny
Top achievements
Rank 1
answered on 07 Oct 2014, 02:43 PM
Ianko,

Below is the HTML content that is in the editor and which has a number of CSS styles defined internally. Attached is a screen shot showing that the drop down list of the styles hasn't picked up these styles that I've defined in the HTML file. I'd like it to pick them up like it has done here:
http://demos.telerik.com/aspnet-ajax/editor/examples/formatblock/defaultcs.aspx

Can the editor automatically pick these up from the internal CSS styles in the HTML or do they have to be defined in the paragraphs section of the tools.xml file?

Thanks

<html>
    <head>
        <style type="text/css">
            body {
            margin:0;
            font-family: Arial,Helvetica,Sans-Serif;
            background: #eeeeee;
            }
            p, td, tr {font-family: Arial,Helvetica,Sans-Serif;
            font-size: 14px;
            color:#6C6F72;
            }
            a:link {
            color: #ff9900 !important;
            }
            a:visited {
            color: #ff9900 !important;
            }
            a:hover {
            color: #666 !important;
            }
            a:active {
            color: #ff9900 !important;
            }
            .web a:link{color:#fff !important; text-decoration:none;}
            .web a:visited{color:#fff !important; }
            .web a:hover{color:#a6c8e3 !important; }
            .web a:active{color:#fff !important; }
            h1 {font-family: Arial,Helvetica,Sans-Serif;
            color: #ff9900;
            font-size: 28px;
            font-weight:normal;
            margin-bottom:10px;
            margin-top:10px;
            }
            h2 {font-family: Arial,Helvetica,Sans-Serif;
            color: #ff9900;
            font-size: 26px;
            margin-bottom:5px;
            margin-top:10px;
            }
            h3 {font-family: Arial,Helvetica,Sans-Serif;
            color: #ff9900;
            font-size: 24px;
            margin-bottom:10px;
            margin-top:10px;
            font-weight:normal;
            }
            h4 {font-family: Arial,Helvetica,Sans-Serif;
            font-size: 18px;
            color: #ff9900;
            font-weight:normal;
            }
            @media only screen and (max-device-width: 480px) {
            table {
            width: 100% !important;
            }
            p, td, tr {font-family: Arial,Helvetica,Sans-Serif;
            font-size: 14px !important;
            color:#6C6F72 !important;
            }
            /* Logo must not appear too large on mobile */
            img { max-width: 100%; }
        </style>
    </head>
    <body>
        <table align="center" style="width: 550px;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td style="text-align: center; padding-top: 5px; padding-bottom: 5px; vertical-align: middle;"><span style="font-size: 10px;"><span class="h6"></span>##header##</span><br>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; padding-top: 15px; padding-bottom: 15px; vertical-align: middle; background-color: rgb(255, 255, 255);"><a href="http://kulahub.com/"><img style="border-width: 0px; border-style: solid;" src="http://www2.kulahub.net/clients/f/warpmedia/images/mobile/Kulahub-logo200.png"></a><br>
                    </td>
                </tr>
            </tbody>
        </table>
        <table align="center" style="width: 550px;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td style="text-align: center; padding-top: 5px; padding-bottom: 5px; vertical-align: middle; border-bottom-color: rgb(51, 51, 51); background-color: rgb(255, 153, 0);">
                    <div class="web"><span style="color: rgb(255, 255, 255); font-size: 20px;">It's been a while</span></div>
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 5px; padding-bottom: 5px;">
                    <table style="width: 551px; height: 231px;" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td style="width: 4px; padding-top: 10px; padding-bottom: 10px; background-color: rgb(255, 153, 0);">&nbsp;</td>
                                <td style="padding: 10px; text-align: left; vertical-align: middle; background-color: rgb(255, 255, 255);">
                                <h3><strong><br>
                                <table width="120" height="177" align="right" class="img-responsive">
                                    <tbody>
                                        <tr>
                                            <td><a href="http:"></a><br>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </strong></h3>
                                <p style="margin-bottom: 10pt;"><span style="color: rgb(51, 51, 51); font-family: Arial; font-size: 14px;">Hi ##firstname##&nbsp;</span></p>
                                <span style="font-family: Arial; font-size: 14px;"></span>
                                <p style="margin-bottom: 10pt;">&nbsp;<span class="h6">Testing.</span></p>
                                <p style="margin-bottom: 0pt;">&nbsp;</p>
                                <p style="margin: 0px 0px 10pt; color: rgb(108, 111, 114); font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><span style='color: rgb(0, 0, 0); font-family: "Segoe UI"; font-size: 14px;'>Hope you are well,</span></p>
                                <p style="margin: 0px 0px 10pt; color: rgb(108, 111, 114); font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><span class="h2" style='color: rgb(0, 0, 0); font-family: "Segoe UI"; font-size: 14px;'>Testagain.</span></p>
                                <p style="margin: 0px 0px 10pt; color: rgb(108, 111, 114); font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><span style='color: rgb(0, 0, 0); font-family: "Segoe UI"; font-size: 14px;'><span style='color: rgb(51, 51, 51); font-family: "Segoe UI"; font-size: 14px;'>KulaHub is an easy to use CRM &amp; Email Marketing system, helping companies generate more revenue through managing contacts and intelligent email marketing. Our clients include Involution, Benchmark Trousers, Leeds Chamber of Commerce Head Office Interiors plus many other fantastic companies.</span><br>
                                </span></p>
                                <strong style="color: rgb(108, 111, 114); font-family: Arial, Helvetica, sans-serif; font-size: 14.44px;"><span style="font-size: 11pt;"><span style="color: rgb(73, 77, 79); font-family: Arial;">Here's a tip you may find helpful!<br>
                                </span><br>
                                </span><span style="color: rgb(255, 153, 13);"><strong style="color: rgb(255, 153, 0); font-family: Arial; font-size: 14px;">"Managing prospects through your CRM enables everyone in the business to know where they are in the sales cycle.</strong>
                                <p style="color: rgb(108, 111, 114); font-family: Arial, Helvetica, sans-serif; font-size: 14.44px;"><span style="font-family: Arial; font-size: 14px;"><strong><span style="color: rgb(255, 153, 0); font-size: 14px;">Whether its business cards or names on pieces of paper, having a CRM can help you get organised by having all notes, files, quotes and tasks for call backs all in one place.</span></strong></span></p>
                                <span style="color: rgb(108, 111, 114); font-family: Arial; font-size: 14px;">
                                <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><span style="color: rgb(255, 153, 0); font-size: 14px;"><span style="font-family: Arial; font-size: 14px;"><strong>Research states on average it takes 7 times to contact someone before they buy.</strong></span><br>
                                </span></p>
                                </span><strong style="color: rgb(108, 111, 114); font-family: Arial; font-size: 14px;"><span style="color: rgb(255, 153, 0); font-size: 14px;">Don&rsquo;t lose out to your competitors by not managing your prospects through an Easy to use CRM and Email Marketing system."<br>
                                </span></strong></span></strong><span style='color: rgb(0, 0, 0); line-height: 1.4285; font-family: "Segoe UI"; font-size: 14px;'><br>
                                Follow KulaHub on&nbsp;</span><a style='line-height: 1.4285; font-family: "Segoe UI"; font-size: 14px;' href="https://twitter.com/KulaHub"><span style="font-size: 14px;"><strong>Twitter</strong></span></a><span style='color: rgb(0, 0, 0); line-height: 1.4285; font-family: "Segoe UI"; font-size: 14px;'>&nbsp;for more Hints, Tips and interesting reads!</span>
                                <p style="margin: 0px 0px 10pt; color: rgb(108, 111, 114); font-family: Arial, Helvetica, sans-serif; font-size: 14.44px;"><span style='color: rgb(0, 0, 0); font-family: "Segoe UI"; font-size: 14px;'><br>
                                We've helped lots of businesses, just like yours, and&nbsp;we&rsquo;d love the opportunity to tell you more.&nbsp;Either take a look at our website&nbsp;at&nbsp;<strong style="color: rgb(255, 153, 0);"><a style="color: rgb(255, 153, 0);" href="http://kulahub.com&nbsp;or&nbsp;better'>http://kulahub.com/">http://kulahub.com</a>&nbsp;</strong>or&nbsp;better still, if you can spare 20 minutes, we can take you through a demo.&nbsp;&nbsp;Just call our UK based Sales support team to set this up, at your convenience on&nbsp;<strong>01423 796157</strong>.</span></p>
                                <p style="margin: 0px 0px 10pt; color: rgb(51, 51, 51); font-size: 14px;"><span style='font-family: "Segoe UI"; font-size: 16px;'><span style="font-size: 14px;">Don't take my word for it<strong>&nbsp;</strong>view our</span><strong style="font-family: verdana, arial;">&nbsp;</strong><span style='color: rgb(51, 51, 51); font-family: "Segoe UI"; font-size: 20px;'><strong><span><a style="color: rgb(255, 153, 0);" href="Testimonialshttp://kulahub.com/testimonials/">Testimonials</a></span></strong></span></span></p>
                                <span style='color: rgb(51, 51, 51); font-family: "Segoe UI"; font-size: 16px;'><span style="font-size: 14px;">
                                All the best and many thanks,</span><br>
                                <br>
                                </span><span style='color: rgb(51, 51, 51); font-family: "Segoe UI"; font-size: 14px;'></span><span style='color: rgb(51, 51, 51); font-family: "Segoe UI"; font-size: 14px;'></span>
                                <div style="text-align: center; color: rgb(51, 51, 51); font-family: verdana, arial; font-size: 14px;"><span><span style='font-family: "Segoe UI";'></span>
                                <p style="margin: 0px 0px 10px; text-align: left;"><span><strong><span style='font-family: "Segoe UI"; font-size: 16px;'>The KulaHub Team</span><span style='font-family: "Segoe UI"; font-size: 16px;'><br>
                                <span style="font-size: 16px;">Tel: 0845 249 3749<br>
                                Email:&nbsp;<a style="color: rgb(255, 153, 0);" href="hello@kulahub.commailto:hello@kulahub.com">hello@kulahub.com</a></span></span></strong></span></p>
                                </span></div>
                                <div style="text-align: center; color: rgb(0, 0, 0); line-height: normal; font-size: medium;"><span style="line-height: 1.4285; font-size: 14px;">
                                <p style="text-align: left;"><span style="line-height: 1.4285; font-size: 14px;"><strong><span style='font-family: "Segoe UI"; font-size: 14px;'></span></strong></span></p>
                                </span></div>
                                <div style="text-align: center; color: rgb(0, 0, 0); line-height: normal; font-size: medium;"><span style="line-height: 1.4285; font-size: 14px;">
                                <p style="text-align: left;"><span style="line-height: 1.4285; font-size: 14px;"><strong><span style='font-family: "Segoe UI"; font-size: 14px;'></span></strong></span></p>
                                </span></div>
                                <p><strong><span style="font-family: Arial;"><a href="http://www.kulahub.com/"></a></span></strong></p>
                                </td>
                                <td style="width: 4px; text-align: left; padding-top: 10px; padding-bottom: 10px; vertical-align: middle; background-color: rgb(255, 153, 0);">&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                    </td>
                </tr>
                <tr>
                    <td>
                    <table style="width: 100%;" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td style="width: 4px; padding-top: 7px; padding-bottom: 5px; background-color: rgb(255, 153, 0);">&nbsp;</td>
                                <td style="text-align: center; padding-top: 7px; padding-bottom: 5px; vertical-align: middle; background-color: rgb(255, 153, 0);">
                                <div class="web"></div>
                                </td>
                                <td style="width: 4px; padding-top: 7px; padding-bottom: 5px; background-color: rgb(255, 153, 0);">&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px; text-align: center; vertical-align: middle; border-bottom-color: rgb(255, 255, 255); border-bottom-width: 1px; border-bottom-style: solid;">
                    <p><strong>TEL:</strong> <span style="color: rgb(102, 102, 102);">Knaresborough: 0845 299 3749</span><br>
                    <strong>
                    EMAIL:</strong> <a href="mailto:hello@kulahub.com"><strong></strong></a><strong><a href="hello@kulahub.commailto:hello@kulahub.com">hello@kulahub.com</a></strong><br>
                    <strong>
                    WEB:</strong> <strong><a href="www.kulahub.comhttp://www.kulahub.com/">www.kulahub.com</a></strong></p>
                    <span style="color: rgb(33, 58, 113);"></span><strong>KulaHub (Yorkshire)<br>
                    </strong>Knaresborough Technology Park, Manse Lane, Knaresborough HG5 8LF<br>
                    <strong>KulaHub (London)<br>
                    </strong>One Alfred Place<strong></strong>, 1 Alfred Place, London WC1E 7EB<br>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; padding-top: 15px; vertical-align: middle;"><span style="font-size: 10px;">##footer##</span></td>
                </tr>
            </tbody>
        </table>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </body>
</html>

Tim



​
0
Ianko
Telerik team
answered on 08 Oct 2014, 09:57 AM
Hi Tim,

The dropdown shown in the snapshot is the Pragraph Styles tool and it is not related to the CSS added to the content area. 

The visual appearance of the elements in the dropdown is defined by the added EditorParagraph items as explained in the article provided. It can be used for text formatting. For example, the user can select a part of the text and select a predefined paragraph style. This way the selected text will be wrapped in the defined HTML element (e.g., <h4>, <p>, <div> etc.).

This tool cannot be populated according to the CSS, because it is not designed to be related to it.

Regards,
Ianko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Danny
Top achievements
Rank 1
answered on 08 Oct 2014, 12:16 PM
Ianko,

Thank you for your reply. That has clarified the paragraph styles.

Final question though, can the 'Apply CSS Class' drop down list be automatically populated with the internal CSS styles that are defined in the HTML document?

Thanks

Tim
0
Ianko
Telerik team
answered on 09 Oct 2014, 02:38 PM
Hi Tim,

Yes, the CSS class tool can be populated with the inserted styles, although, note that only class names will appear and only after a post back.

This tool is mainly via browser functionality to retrieve a list of the used class names. As a result, to repopulate the list you should insert  a CSS rule with a class name used in the selector; the post back will re-render the iframe and repopulate the dropdown. You can examine this screencast to examine the described behavior.

Regards,
Ianko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Editor
Asked by
Danny
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Danny
Top achievements
Rank 1
Share this question
or