Support forums - Add DotNetNuke Custom Button

Support forums » Products » Cute Editor for .NET » Re: Add DotNetNuke Custom Button

Add DotNetNuke Custom Button

Last post 01-28-2008, 12:52 PM by bmolzen. 5 replies.


	Sort Posts: Previous Next

01-27-2008, 1:04 PM 36575

bmolzen
Joined on 04-07-2005
Posts 7

Add DotNetNuke Custom Button

Reply Quote

I'm looking at purchasing Cute Editor for DotNetNuke.

Just trying to get a grip on how to proceed with adding a custom button to CuteEditor, using the DotNetNuke provider.

All I need, is a button that will add some html with a css class to the editor window to apply a specific style so I can get "Add Quote" functionality for my Active Forums installation.

Just need to add this DIV html into the editor window via a button:

DIV>class=NTForums_Quote>quote in here</DIV

It seems there is nothing in the provider itself to add the custom button?

Having a hard time following the documentation.

Thanks for any help to get me started.

01-27-2008, 9:54 PM 36577 in reply to 36575

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Add DotNetNuke Custom Button

Reply Quote

bmolzen,

Please follow the steps below to add a custom button to DNN.

1. Open Providers\HtmlEditorProviders\CEHtmlEditorProvider\CEHtmlEditorProvider.vb

2. In line 807, you can find this sub:

Protected Sub cntlCE_Load

3. Copy/paste the following code into it:

Dim tc as CuteEditor.ToolControl
   tc = cntlCE.ToolControls("insertcustombutonhere")

   If Not tc Is Nothing Then
      Dim Image1 As New System.Web.UI.WebControls.Image()
      Image1.ToolTip    = "Insert today's date"
      Image1.ImageUrl    = "tools.gif"
      Image1.CssClass    = "CuteEditorButton"
      SetMouseEvents(Image1)
      Image1.Attributes("onclick")="var d = new Date(); CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,d.toLocaleDateString())"
      tc.Control.Controls.Add(Image1)
  End If

4. Then add the following sub (used of mouse events)

public Sub SetMouseEvents(ByVal control as WebControl )
  control.Attributes("onmouseover")="CuteEditor_ButtonCommandOver(this)"
  control.Attributes("onmouseout")="CuteEditor_ButtonCommandOut(this)"
  control.Attributes("onmousedown")="CuteEditor_ButtonCommandDown(this)"
  control.Attributes("onmouseup")="CuteEditor_ButtonCommandUp(this)"
  control.Attributes("ondragstart")="CuteEditor_CancelEvent()"
End Sub

5. Then compile the project and copy the new provider DLL to your projects.

Hope it helps. let me know if you have any further questions.

asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx

01-28-2008, 11:35 AM 36594 in reply to 36577

bmolzen
Joined on 04-07-2005
Posts 7

Re: Add DotNetNuke Custom Button

Reply Quote

Thank you! One issue:

In the first line of the SetMouseEvents Sub, I'm getting an error:

Type "WebControl" is not defined.

Looks like the correct sub would read like:

Public Sub SetMouseEvents(ByVal control As Web.UI.WebControls.WebControl)

control.Attributes("onmouseover") = "CuteEditor_ButtonCommandOver(this)"

control.Attributes("onmouseout") = "CuteEditor_ButtonCommandOut(this)"

control.Attributes("onmousedown") = "CuteEditor_ButtonCommandDown(this)"

control.Attributes("onmouseup") = "CuteEditor_ButtonCommandUp(this)"

control.Attributes("ondragstart") = "CuteEditor_CancelEvent()"

End Sub

Now it's just a matter of figuring out where the provider is pulling images from, and what .css file it's looking at so I can get my style applied within the text editor window.

Any tips?

01-28-2008, 12:00 PM 36601 in reply to 36594

bmolzen
Joined on 04-07-2005
Posts 7

Re: Add DotNetNuke Custom Button

Reply Quote

Looks like I had to put the image into the ~\controls\ directory off the DNN root. Strange place for it.

I also just went ahead and edited every .css file in the CEH provider directory and my style was applied.

I suppose it's theme based?

Regardless, got it working... Thank you! Definitely will purchase and implement on my production site.

Thanks for your initial help.

01-28-2008, 12:05 PM 36602 in reply to 36601

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Add DotNetNuke Custom Button

Reply Quote

bmolzen,

>>Image1.ImageUrl = "tools.gif"

This ImageUrl is a regular asp.net Image path. You can do:

Image1.ImageUrl = "~/images/tools.gif"

Image1.ImageUrl = "/images/tools.gif"

And point it to any folder.

>>I suppose it's theme based?

Yes.

>>and my style was applied.

Can you explain why you need to modfiy the style?

Changing the default font style in editor

Please check the Editor.EditorBodyStyle and EditorWysiwygModeCss property.

Editor.EditorWysiwygModeCss Property
Specifies the location of the style sheet that will be used by the editable area. Multiple Style Sheets are supported. Example EditorWysiwygModeCss="example.css,~/portal.css,/default.css"

Editor.EditorBodyStyle Property
The style to be applied to the Editor body.

Cute Editor uses default font of the current page. The default font of web page is Times new roman. If you want to change the default font from Times new roman to Verdana, you can add the following code into the style sheet file:

body, td { font-family: Verdana; }

Or you can use Editor.EditorBodyStyle Property:

Editor1.EditorBodyStyle="font-family: Verdana";

01-28-2008, 12:52 PM 36605 in reply to 36602

bmolzen
Joined on 04-07-2005
Posts 7

Re: Add DotNetNuke Custom Button

Reply Quote

This is an Active Forums specific style that gets applied when the post is submitted.

I wanted to also see that style in the editor window.

I did end up using "~/images/quote.gif" which works well.

Thanks for your help!!