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
7 Answers, 1 is accepted
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
Rank 1
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.
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"><html xmlns="http://www.w3.org/1999/xhtml"> <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
Rank 1
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
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,
Telerik
Rank 1
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,
Telerik