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

[Solved] showing/hiding tools like Telerik Forum New Thread page.

3 Answers 111 Views

Editor

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

3 Answers, 1 is accepted

answered on 20 Feb 2014, 04:12 AM

Hi Cuneyt,

Please have a look into the following code snippet to hide/show the RadEditor ToolBar.

ASPX:

<telerik:RadEditor ID="RadEditor1" runat="server">

</telerik:RadEditor>

<telerik:RadButton ID="RadButton1" runat="server" Text="Show tool" AutoPostBack="false"

OnClientClicked="ShowTool">

</telerik:RadButton>

JavaScript:

<script type="text/javascript">

function pageLoad() {

var editor = $find("<%=RadEditor1.ClientID %>");

editor._element.getElementsByClassName("reToolCell").RadEditor1Top.style.display = "none";

}

function ShowTool(sender, args) {

var editor = $find("<%=RadEditor1.ClientID %>");

editor._element.getElementsByClassName("reToolCell").RadEditor1Top.style.display = "block";

}

</script>

Thanks,
Shinu.

answered on 20 Feb 2014, 03:26 PM

Ok this is my working sample. I want to share this. This may not be perfect but could be a starter point to someone.

<telerik:RadEditor ID="eCevap" runat="server"

Width="820px"

EditModes="Design"

Height="200px"

AutoResizeHeight="True"

ToolsWidth="820px"

Skin="Sitefinity"

DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"

ExternalDialogsPath="~/Dialogs/EditorDialogs/"

ContentAreaMode="Div"

BorderColor="White"

IsSkinTouch="True"

RenderMode="Lightweight"

OnClientLoad="OnClientLoad">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="AdvancedTools" Text="Show Format" ShowText="true" ShowIcon="false" />

<telerik:EditorTool Name="MinTools" Text="Hide format" ShowText="true" ShowIcon="false"/>

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="InsertLink" />

<telerik:EditorTool Name="FormatCodeBlock" />

<telerik:EditorTool Name="InsertOrderedList" />

<telerik:EditorTool Name="InsertUnorderedList" />

<telerik:EditorTool Name="InsertHorizontalRule" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function OnClientLoad(editor, args) {

var cevapeditor = $find("<%=eCevap.ClientID %>");

cevapeditor.fire("MinTools");

}

Telerik.Web.UI.Editor.CommandList["AdvancedTools"] = function (commandName, editor, args) {

var tool = editor.getToolByName("Bold");

tool.set_visible(true);

var tool = editor.getToolByName("Italic");

tool.set_visible(true);

var tool = editor.getToolByName("InsertLink");

tool.set_visible(true);

var tool = editor.getToolByName("FormatCodeBlock");

tool.set_visible(true);

var tool = editor.getToolByName("InsertOrderedList");

tool.set_visible(true);

var tool = editor.getToolByName("InsertUnorderedList");

tool.set_visible(true);

var tool = editor.getToolByName("InsertHorizontalRule");

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("Bold");

tool.set_visible(false);

var tool = editor.getToolByName("Italic");

tool.set_visible(false);

var tool = editor.getToolByName("InsertLink");

tool.set_visible(false);

var tool = editor.getToolByName("FormatCodeBlock");

tool.set_visible(false);

var tool = editor.getToolByName("InsertOrderedList");

tool.set_visible(false);

var tool = editor.getToolByName("InsertUnorderedList");

tool.set_visible(false);

var tool = editor.getToolByName("InsertHorizontalRule");

tool.set_visible(false);

var tool = editor.getToolByName("MinTools");

tool.set_visible(false);

var tool = editor.getToolByName("AdvancedTools");

tool.set_visible(true);

}

</script>

</telerik:RadScriptBlock>

if you have white background , tools and editor border could be deleted like below:

.RadEditor .reToolbar {

border:none !important;

}

if you are using divmode and autoresize height you want to change height like this. Because content area is a single line at first load.
solution:

.RadEditor .reContentArea {

min-height:200px;

}

This may useful.
Thanks.