[Solved] RadEditorNodeInspector hide classname

[Rajesh Venkataraman]

Hi,

I am using the latest version of the RadEditor for Ajax (0619), i want to use the RadEditorNodeInspector, but i dont want to expose the classname, tooltip, target, hyperlink manager etc. I just want to expose only the URL, so the user can change it; also i want to increase the size of the URL box. Is this possible, if yes, how.

Thanks,
Raj

[Rumen]

Hi Rajesh,

In order to achieve your goal you should copy the Scripts folder from the RadControls for ASP.NET AJAX to the root of your web application and configure RadEditor to read its script files from it, e.g.

<asp:scriptmanager id="ScriptManager" runat="server" >   
<Scripts>
   <asp:ScriptReference Path="~/Scripts/Common/Core.js" />
   <asp:ScriptReference Path="~/Scripts/Common/PopUp/PopUpScripts.js" />          
   <asp:ScriptReference Path="~/Scripts/Editor/RadEditor.js" />
   <asp:ScriptReference Path="~/Scripts/Dialogs/DialogOpener.js" />
   <asp:ScriptReference Path="~/Scripts/Editor/Modules.js" />         
   <asp:ScriptReference Path="~/Scripts/Spell/SpellCheckService.js" />
   <asp:ScriptReference Path="~/Scripts/Editor/AjaxSpellCheck.js" />
   <asp:ScriptReference Path="~/Scripts/Window/RadWindow.js" />
</Scripts>
</asp:ScriptManager>
<telerik:radeditor runat="server" EnableEmbeddedScripts="false" ID="RadEditor1"></telerik:radeditor>

After that open the \Scripts\Editor\Modules.js file and modify the following function by deleting the undesired attributes:

Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.prototype={_nodeAttributesArray:{TABLE:["width","cellSpacing","bgColor","className","SetTableProperties","height","cellPadding","align","border"],TH:["width","bgColor","className","SetCellProperties","height","align","noWrap"],TD:["width","bgColor","className","SetCellProperties","height","align","noWrap"],TR:["width","className","height"],A:["href","className","LinkManager","title","target"],IMG:["width","borderColor","className","SetImageProperties","height","align","border","alt"],INPUT:["NAME","width","height","id","title","value","className"],FORM:["className","width","height","NAME","action","id"],TEXTAREA:["className","width","height","NAME","id","rows","cols"]},_nodeInspectorAttributesArray:[["rows","NAME","width","cellSpacing","align","href","value","className","SetTableProperties","SetCellProperties","LinkManager","SetImageProperties"],["cols","id","height","action","cellPadding","borderColor","bgColor","border","alt","noWrap","title","target"]],initialize:function(){

Save the file and refresh the browser to see the changes.

Best regards,
Rumen
the Telerik team

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

[Brian Garson]

I've followed this example, and no matter what I do it doesn't seem to get implemented.

If I make an obvious error in the Javascript file, it gives me a Javascript error, but if i delete any of the parameters in that line you mentioned to delete in that function, nothing happens.  Are there any other steps involved for this?

thanks,

[Rumen]

Hi Brian,

If you are using a more recent version of Telerik.Web.UI.dll then you should rename the following js file

   <asp:ScriptReference Path="~/Scripts/Dialogs/DialogOpener.js" />

to

   <asp:ScriptReference Path="~/Scripts/Dialogs/RadDialogOpener.js" />


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brian Garson]

It still doesn't work, I had adjusted the reference to the RadDialogOpener.js file when I saw the name differences. 

Here's how my application is structured, may be you could pin point me to a problematic area, I have a Root Master page that contains the following ScriptManager definition:

<div><span class="Apple-style-span" style="line-height: 19px; ">&nbsp;&nbsp; &nbsp;&lt;telerik:RadScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"&gt;</span><br></div><div><span class="Apple-style-span" style="line-height: 19px;"><div>&nbsp;&nbsp; &nbsp;&lt;Scripts&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Common/Core.js" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Common/PopUp/PopUpScripts.js" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Editor/RadEditor.js" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Dialogs/RadDialogOpener.js" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Editor/Modules.js" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Spell/SpellCheckService.js" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Editor/AjaxSpellCheck.js" /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;asp:ScriptReference Path="~/Scripts/Telerik/Window/RadWindow.js" /&gt;</div><div>&nbsp;&nbsp; &nbsp;&lt;/Scripts&gt;</div><div>&nbsp;&nbsp; &nbsp;&lt;/telerik:RadScriptManager&gt;</div><div></div></span></div>

All the JavaScript files as been copied respectively to the refered Path.

The Modules.js line as been modify by removing the "className", from 

<div>&nbsp;&nbsp;Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.prototype={_nodeAttributesArray:{TABLE:["width","borderColor","cellSpacing","bgColor","className","SetTableProperties","height","cellPadding","align","border"],TH:["width","borderColor","bgColor","className","SetCellProperties","height","align","noWrap","border"],TD:["width","borderColor","bgColor","className","SetCellProperties","height","align","noWrap","border"],TR:["width","className","height"],A:["href","className","LinkManager","title","target"],IMG:["width","borderColor","className","SetImageProperties","height","align","border","alt"],INPUT:["NAME","width","height","id","title","className","value"],FORM:["className","width","height","NAME","action","id"],TEXTAREA:["className","width","height","NAME","id","rows","cols"]},_nodeInspectorAttributesArray:[["rows","NAME","width","cellSpacing","borderColor","href","alt","align","value","target","SetTableProperties","SetCellProperties","LinkManager"],["cols","id","height","action","cellPadding","border","bgColor","title","noWrap","className","SetImageProperties"]],initialize:function(){Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.callBaseMethod(this,"initialize");</div><div></div>

to

<div><div>&nbsp;&nbsp;Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.prototype={_nodeAttributesArray:{TABLE:["width","borderColor","cellSpacing","bgColor","SetTableProperties","height","cellPadding","align","border"],TH:["width","borderColor","bgColor","SetCellProperties","height","align","noWrap","border"],TD:["width","borderColor","bgColor","SetCellProperties","height","align","noWrap","border"],TR:["width","height"],A:["href","LinkManager","title","target"],IMG:["width","borderColor","SetImageProperties","height","align","border","alt"],INPUT:["NAME","width","height","id","title","value"],FORM:["width","height","NAME","action","id"],TEXTAREA:["width","height","NAME","id","rows","cols"]},_nodeInspectorAttributesArray:[["rows","NAME","width","cellSpacing","borderColor","href","alt","align","value","target","SetTableProperties","SetCellProperties","LinkManager"],["cols","id","height","action","cellPadding","border","bgColor","title","noWrap","SetImageProperties"]],initialize:function(){Telerik.Web.UI.Editor.Modules.RadEditorNodeInspector.callBaseMethod(this,"initialize");</div></div><div></div>

The page using the RadEditor use a SubMaster Page of the Root Master Page and contains the following definition 

<div><span class="Apple-style-span" style="line-height: 19px;">&lt;telerik:RadEditor ID="HTMLEditor" EditModes="Design,Html" EnableEmbeddedScripts="false" ExternalDialogsPath="~/EditorDialogs" ....<br></span></div><div></div>

Is there anything anything else?

Thanks

[Rumen]

Hi Brian,

For your convenience I have attached a fully working project that demonstrates how to hide the ClassName dropdown in the Node Inspector.

Sincerely yours,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.