3 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
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:
JavaScript:
Thanks,
Shinu.
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.
0
Cuneyt
Top achievements
Rank 1
answered on 20 Feb 2014, 10:15 AM
Thank you this is helpfull. but i am searching i bit different solution like custom button and command tools toggling. I found this forum post.
I think this will be solution.
Regards.
Thank you.
I think this will be solution.
Regards.
Thank you.
0
Cuneyt
Top achievements
Rank 1
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.
if you have white background , tools and editor border could be deleted like below:
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:
This may useful.
Thanks.
<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.