[Solved] Adding custom button using ApplyClass

[Kent-Remi]

Hi!
I am using the Prometheus RadEditor, and trying to achieve a simple task:
I want to add a button who applies a custom css class ("HighLight").
I am using editor.fire("ApplyClass","HighLight") to do this,
but I can't find any way to send the class name to the function.
The class gets applied as <span class="undefined">Hello world!</span>

Anyone knows how to do this?

Thanx,
Kent

[Rumen]

Hello Kent-Remi,

Here is the requested example:

<telerik:radeditor runat="server" ID="RadEditor1"></telerik:radeditor>
<input type="button" onclick="ApplyCssClass(); return false;" value="Apply Class" />
<script type="text/javascript">
function ApplyCssClass()
{
    var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
    var args = new Object();   
    args.value = "HighLight";    
    editor.fire("ApplyClass", args);
}
</script>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kent-Remi]

Thank you very much for your quick response!
Works as a charm, but brings me another problem :)
I want to use the "HightLight" button in the same manner as f.ex. "Bold".
In other words, I want to remove the <span class=... if I select the formatted text and click my highlight button again.
I tried to use the editor.getSelectionHtml().search("HightLight") == 1 to determine if the text is already formatted or not, and that works.
But I don't know what command to call...
Any ideas would be appreciated! 

[Rumen]

Hi Kent-Remi,

Here is an example demonstrating how to check whether the selected element has applied class formatting:

<telerik:radeditor runat="server" ID="RadEditor1">
   <Content>
       <span class="HighLight">dasasd</span>
   </Content>
   </telerik:radeditor>
<input type="button" onclick="ApplyCssClass(); return false;" value="Apply Class" />
<script type="text/javascript">

function ApplyCssClass()
{
    var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
    var selectedElement = editor.getSelectedElement();
    var args = new Object();  
    if (selectedElement.getAttribute("className") == "")
    {
        args.value = "HighLight";   
    }
    else
    {
        args.value = ""; 
        selectedElement.removeAttribute("className", "")  ;
    }

    editor.fire("ApplyClass", args);
}
</script>


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kent-Remi]

Hi!
Works fine, but in IE only..
This works fine in IE and FF, but in Safari, it will not remove the formatting:

Telerik.Web.UI.Editor.CommandList["Marker"] = function(commandName, editor, args)
{ 
    var selectedElement = editor.getSelectedElement();
    var args = new Object();
    if(selectedElement.innerHTML.search('HighLight') == "-1")
    {
        args.value = "HighLight";
    }
    else
    {
        args.value = ""; 
        selectedElement.removeAttribute("className", "") ;
    }
    editor.fire("ApplyClass", args);
};

Any ideas appreciated

[George]

Hi Kent-Remi,


It seems that under Safari (in my test I used Version 3.0.4) the innerHTML returns only the text of the node, not the HTML - most probably a Safari bug. However, I tried with outerHTML and it do the trick.


Also, my test showed that under Safari the following code does not work:
    selectedElement.removeAttribute("className", "") ; 

It should be: 
    selectedElement.removeAttribute("class", "") ; 


Note that, the latest version of RadEditor "Prometheus" (SP 2) gives the opportunity to detect if the browser is Safari. See the following code:
    if($telerik.isSafari) alert('The browser is Safari');


I hope this helps.

Best regards,
George
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kent-Remi]

Hi!
Won't work in Safari.
Seems that the removeAttribute function doesn't work.

var selectedElement = editor.getSelectedElement();
var args = new Object();

if($telerik.isSafari)
{
if(selectedElement.outerHTML.search('HighLight') == "-1")
{
    args.value = "HighLight";
}
else
{
    args.value = "";
    selectedElement.removeAttribute("class", "") ;
}
}
else
{
if(selectedElement.innerHTML.search('HighLight') == "-1")
{
    args.value = "HighLight";
}
else
{
    args.value = ""; 
    selectedElement.removeAttribute("className", "") ;
}
}

editor.fire("ApplyClass", args);

[George]

Hi Kent-Remi,

Please, review bellow your modified code:

<telerik:radeditor runat="server" ID="RadEditor1" >
<Tools>
   <telerik:EditorToolGroup >
       <telerik:EditorTool Name="Marker" />
   </telerik:EditorToolGroup>
</Tools>
</telerik:radeditor>
<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["Marker"] = function(commandName, editor, args)
    {
        var selectedElement = editor.getSelectedElement();
        var args = new Object();

        if($telerik.isSafari) {
         if(selectedElement.outerHTML.search('HighLight') == "-1")
             {
                 args.value = "HighLight";
             }
             else
             {
                 args.value = "";
                 selectedElement.removeAttribute("class", "") ;
             }

         }
        else{
             if(selectedElement.innerHTML.search('HighLight') == "-1")
             {
                 args.value = "HighLight";
             }
             else
             {
                 args.value = "";
                 selectedElement.removeAttribute("className", "") ;
             }
          }
        editor.fire("ApplyClass", args);
    };
</script>

In addition please, make sure that you are using the latest version of RadEditor "Prometheus" (14.25).


For convenience I attached a sample video that demonstrates my test.

Best regards,
George
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Kent-Remi]

Hi George!
I can't see any differences in the JavaScript I sent you vs. the JavaScript you sent me. But anyway, it works ok. Not 100%, but decent.
If I make longer text, and then add a class to a textpart, remove the class, and then add to another part, it doesn't work all the time. For example:
1. I add a class like this:
    lorem <span="ClassName">ipsum</span> dolar sit amet
2. I remove the class:
    lorem <span>ipsum</span> dolar sit amet
3. I try to add a class like this:
    <span class="ClassName">lorem ipsum</span> dolar sit amet
What actually happens then is this:
    <span>lorem</span><span>ipsum</span> dolar sit amet
But as mentioned, it is not a big issue for me.
I really appreciate the quick and good response from you! :-)

Thanx, Kent-Remi

[George]

Hi Kent,

The current apply class algorithm depends on different factors - how you do the selection, are there empty spaces etc.
 
Unfortunately, it cannot be done better than it is and at this moment we cannot provide you with a 100% working solution under SAFARI.

Best regards,
George
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center