Water mark text

[komathi priya]

Hi,

how to add water mark  text to the rad editor control

regards
priya

[Rumen]

Hi Priya,

Please, find attached here the requested example which shows how to add a watermark to the uploaded image through the Image manager.

Sincerely yours,
Rumen
the Telerik team

[komathi priya]

it's not working for me, i'm not getting any thing.

i want to add watwer mark  text to rad editor as same as
the  text box were we use the ajax water mark extend 

[Rumen]

Hello Komathi,

Here is the requested example:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script type="text/javascript">
    var defaultContent = "Enter Some Content Here.";

    function OnClientLoad(editor, args) {
        editor.set_html(defaultContent);
        $telerik.addExternalHandler(editor.get_document().body, "click", function (e) {
            if (editor.get_html(true).trim() == defaultContent) {
                editor.set_html("");
            }
        });

        $telerik.addExternalHandler(editor.get_document().body, "blur", function (e) {
            if (editor.get_html(true).trim() == "") {
                editor.set_html(defaultContent);
            }
        });
    }
</script>

Regards,
Rumen
the Telerik team

[komathi priya]

hi Rumen, 

thanks for your reply, this is what i needed, it's working good for me,

but for first time i'm getting the water mark text, if i click on the rad editor and came out without typing any thing 
water mark text is not working , how to get the water mark text even in mouse out?

[Rumen]

Hi,

I noticed that this issue is observed in Firefox, but not in IE. Here is the updated code that works in Firefox too:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script type="text/javascript">
    var defaultContent = "Enter Some Content Here.";

    function OnClientLoad(editor, args) {
        editor.set_html(defaultContent);

        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "click", function (e) {
            if (editor.get_html(true).trim() == defaultContent) {
                editor.set_html("");
            }
        });

        $telerik.addExternalHandler(element, "blur", function (e) {
            if (editor.get_html(true).trim() == "") {
                editor.set_html(defaultContent);
            }
        });
    }
</script>

Kind regards,
Rumen
the Telerik team

[almeda]

Hey thanks guys for such informative thred. I wanted to do the same in my new project and not getting the propre solution. Finally I got what i was looking for. Thanks to you guys. :)

[komathi priya]

Hi rumen,

i'm really we sorry , the above Script is working fine only in fire fox, not working in ie and chrome
please give me solution for this soon

[Rumen]

Hi Komathi,

The code works fine in IE and Firefox on my end. It dost not work in Chrome due to browser problems.

I verified that this is an IFRAME Chrome blur bug by changing the RadEditor's content area rendering to editable DIV element (ContentAreaMode="Div") and modifying the code as follows:

<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="Div" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script type="text/javascript">
    var defaultContent = "Enter Some Content Here.";

    function OnClientLoad(editor, args) {
        editor.set_html(defaultContent);

        var element = document.all ? editor.get_document().body : editor.get_document();
        $telerik.addExternalHandler(element, "click", function (e) {
            if (editor.get_html(true).trim() == defaultContent) {
                editor.set_html("");
            }
        });

        editor.attachEventHandler("blur", function (e) {
            if (editor.get_html(true).trim() == "") {
                editor.set_html(defaultContent);
            }
        });
    }
</script>

The solution works in IE, Firefox and Chrome.

The ContentAreaMode="Div" mode was introduced in Q2 2010 (version 2010.2.713) of RadControls for ASP.NET AJAX.

Best regards,
Rumen
the Telerik team