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

Tools Toggling(advanced and strip down) on click of a custom button in Editor

4 Answers 108 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Akila Kumarasamy
Top achievements
Rank 1
Akila Kumarasamy asked on 12 Feb 2010, 06:12 PM
Hi,
I have to Toggle the tools on the Editor based on the custom button click in the Editor itself. Basically We are trying to implement to display only few tools when we load the editor and there is a custom button added in it clicking on which full editor tools need to be displayed. Again there would be a minimize tools button clicking on which it has to hide  all the tools except the basic tools which we were displaing when the editor is loaded. This toggling has to be done on the client side. So we dropped the plan of changing the tool file on the code behid using AJAX async postback.

I have tried implementing various options and implemented few stuffs. And I have few issues with it.

1. The Visible attribute for the Tools tag in XML is not working. - I have to hide the tools first time when I load the editor. still this tool set is visible in the tool bar. Sample:
<tools name="fullEditorToolSet2" visible="false">  
  <tool separator="true" /> 
  <tool name="Undo" /> 
  <tool name="Redo" /> 
  <tool separator="true" /> 
 </tools> 
 
Even setting visibility for a specific tool dosn't work.
<tool name="Undo" visible="false"/> 

2. I have gone throught this thread
http://www.telerik.com/community/forums/aspnet/editor/toolbars-tools-visible-fullscreen.aspx
and found code to create event handler to hide the seperator and also to hide the tool space and the final code given there 
editor.AttachEventHandler(  
 
"onfocus"function() { .......});   
 
 

 is throwing a javascript error saying object dosenot suppot this property.(I am working on the lates editor release)

3.I tried implementing this way....I already have 2 custom button and the event created for it. So I am trying to do some thing like this

 

Telerik.Web.UI.Editor.CommandList["AdvancedTools"] = function(commandName, editor, args) {  
 
var tool = editor.getToolByName("Paste");   
tool.set_visible(true);   
   
var tool = editor.getToolByName("ImageManager");   
tool.set_visible(true);   
   
var tool = editor.getToolByName("FlashManager");   
 tool.set_visible(true);  
 
var tool = editor.getToolByName("MinTools");   
tool.set_visible(true);   
   
var tool = editor.getToolByName("AdvancedTools");   
tool.set_visible(false);  
}  
 
Telerik.Web.UI.Editor.CommandList["MinTools"] = function(commandName, editor, args)   
 {  
 
 var tool = editor.getToolByName("Paste");   
 tool.set_visible(false);   
 
var tool = editor.getToolByName("ImageManager");   
 tool.set_visible(false);   
 
var tool = editor.getToolByName("FlashManager");   
 tool.set_visible(false);  
   
 var tool = editor.getToolByName("MinTools");   
 tool.set_visible(false);   
   
var tool = editor.getToolByName("AdvancedTools");   
 tool.set_visible(true);   
 }  
 
 

Show Advanced tools are working fine but when i minimize the tools there is a gap and seperators displayed(its just hiding the tool and so the space is left as such) and I am not able to hide the  tool seperator also.

Also I need some way to hide the tools(by default) when I load the editor first time.

Or Is there a way to change the tool file(XML) for the editor on the client side based on the toggling? so that I can create 2 files and toggle between those.

Can any one please help me?

Thanks,
Akila.

 

 





4 Answers, 1 is accepted

Sort by
0
Accepted
Dobromir
Telerik team
answered on 17 Feb 2010, 02:24 PM
Hi Akila,

RadEditor does not provide such functionality out-of-the box. It is not possible to change the ToolsFile on the client-side because the editor is rendered on the server and most of its elements are set before they are rendered on the page.

In order to achieve this, I would suggest you to create the editor with two set of tools (advanced and minimum), separate them in different tools groups and hide / show the groups that you want. The following example demonstrates how to do this:
var minToolsGroups = 2; //number of MinimumSetOfTools tools groups
 
function OnClientLoad(editor, args)
{
    //hide the MinimumSetOfTools on load
    var toolbar = editor.get_toolContainer(); //get toolbar container
    var toolgroups = toolbar.getElementsByTagName("UL"); //get all toolgroups containers
 
    for (var i = toolgroups.length - 1; i >= minToolsGroups; i--)
    {
        toolgroups[i].style.display = "none";
    }
}
 
Telerik.Web.UI.Editor.CommandList["AdvTools"] = function(commandName, editor, args)
{
    var toolbar = editor.get_toolContainer();
    var toolgroups = toolbar.getElementsByTagName("UL");
 
    for (var i = 0; i < toolgroups.length; i++)
    {
        if (i < minToolsGroups) toolgroups[i].style.display = "block";
        else toolgroups[i].style.display = "none";
    }
}
Telerik.Web.UI.Editor.CommandList["MinTools"] = function(commandName, editor, args)
{
    var toolbar = editor.get_toolContainer();
    var toolgroups = toolbar.getElementsByTagName("UL");
 
    for (var i = 0; i < toolgroups.length; i++)
    {
        if (i >= minToolsGroups) toolgroups[i].style.display = "block";
        else toolgroups[i].style.display = "none";
    }
}            


Regarding the problems that you report:
  1. Tools section in the ToolsFile does not have visible property - you can find more information regarding tools file in this article.
  2. This thread is quite old ( Aug 2007 ) and some of the client-side methods have been changed, for example: AttachEventHandler() is attachEventHandler() - this is because RadControls for ASP.NET AJAX are following the ASP.NET AJAX naming convention. Information regarding client-side API is available in the following article: Getting familiar with Client-Side API
  3. This is close to the recommended approach. The problem with empty spaces and separator occurs because RadEditor does not offer the functionality to select each element of the toolbar, but it can be done using JavaScript - for example separators have class name .reSeparator

In addition, you can find the following KB article helpful - Different Set Of Tools When Switching To Full Screen Mode

For your convenience I have attached a sample project with the suggested approach.

Regards,
Dobromir
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Akila Kumarasamy
Top achievements
Rank 1
answered on 18 Feb 2010, 08:13 PM

Hi Dobromir,


Thanks for a very simple solution. Great!! it worked with few minor changes....All your explanations are very neat and explanatory….Thanks a lot.

 

Regards,

Akila.

 

0
Akila Kumarasamy
Top achievements
Rank 1
answered on 18 Feb 2010, 09:23 PM
Hi,

I have one more question. How do I access this modules in javascript?I need to display these 2 modules when I display the complete tools (Advanced tools) and I need to hide it when I disply the strip down tools(minTools).
<modules> 
        <module name="RadEditorDomInspector" visible ="false"/>  
        <module name="RadEditorNodeInspector" visible="false" /> 
    </modules> 

Thanks,
Akila.

0
Dobromir
Telerik team
answered on 22 Feb 2010, 12:35 PM
Hi Akila,

the following sample code will toggle the visibility of RadEditorDomInspector:
function OnClientCommandExecuting(editor, args)
{
    if (args.get_commandName() == "MinTools")
    {
        toggleModuleVisibility(editor, "RadEditorDomInspector");
    }
    if (args.get_commandName() == "AdvTools")
    {
        toggleModuleVisibility(editor, "RadEditorDomInspector");
    }
}
 
function toggleModuleVisibility(editor, moduleName)
{
    var module = editor.get_modulesManager().getModuleByName(moduleName);
    module.toggleVisibility();
}

Also you can use the client methods get_visiblity() and set_visiblity() instead of toggleVisibility().

I hope this helps.

Greetings,
Dobromir
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
Tags
Editor
Asked by
Akila Kumarasamy
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Akila Kumarasamy
Top achievements
Rank 1
Share this question
or