Smilies

Oct 20, 2010 at 11:39 AM
Edited Oct 20, 2010 at 11:46 AM

Hi there Philip,

I'm trying to add smilies to my text-editor. I've found radeditor to be great, but struggling with this item - my form members are getting all grumpy with me!

Thanks

Oct 20, 2010 at 8:05 PM

I know this can be done with a bit of javascript and some toolsfile modification. I'll check into how I've done that once and get back to you. Might be only tomorrow though.

Oct 21, 2010 at 12:27 AM
Edited Oct 21, 2010 at 12:32 AM

From the Telerik Online Help:

To create a custom dropdown via the ToolsFile.xml file use the following syntax:

<tool name="Emoticons" Name="Emoticons"  type="dropdown" PopupWidth="170px" PopupHeight="117px">
  <item  name="<img src='icons/1.gif' />"  value="icons/1.gif"  />
  <item  name="<img src='icons/2.gif' />"  value="icons/2.gif"  />
  <item  name="<img src='icons/3.gif' />"  value="icons/3.gif"  />
</tool>

Note that the type of the custom tool should be dropdown.
Then you must set this in the js file loaded by the editor:
function OnClientCommandExecuting(editor, args)
{
    var name = args.get_name();
    var val = args.get_value();
    if (name == "Emoticons")
    {
        editor.pasteHtml("<img src='" + val + "'>");        
        //Cancel the further execution of the command as such a command does not exist in the editor command list
        args.set_cancel(true); 
    }
}
and edit your config file to add this:
<property name="OnClientCommandExecuting">OnClientCommandExecuting</property>
More information about the js file can be found here:
http://radeditor.codeplex.com/wikipage?title=OnClientPasteExample

Oct 21, 2010 at 8:20 AM
Edited Oct 21, 2010 at 3:54 PM

Deleted

Oct 21, 2010 at 3:51 PM
Edited Oct 21, 2010 at 3:58 PM

Hiya, I'm plodding on with this....

I've managed to add the tool, using absolute refs (as I'm not sure of the path from the tool to the image folder).

For

<item  name="<img src='icons/1.gif' />"  value="icons/1.gif"  />

I've put:

<item  name="<img src='http://www.bikegirl.co.uk/Portals/0/Images/Forum/MemberImages/emoticons/angel.gif' />"  value="Angel"  />

Does this look OK?

I've create the editor.js based on your text above, and uploaded it into portal root/myskin/js/ folder.

I've copied it word-for-word as I couldn't see any obvious substitutions. Is that the correct thing to do?

 

The only thing I need to figure out is the config change, I think. I'm not sure where to start as I can't find a file that is called config. I'm using Easymod's Flexi2.

Jan 14, 2011 at 2:29 AM

Thank you Proeder. To complete your post, i resume what i need to do because it was not easy and it can help community :

1. From the root folder, create a new folder named "images/Emoticons" and add all your smilies files (angry_smile.gif, ...)

2. From "Providers/HtmlEditorProviders/Telerik/js", open "RegisterDialogs.js" and, at the end, add the function "OnClientCommandExecuting" described above by Proeder.

3. From the "RadEditor Config" module, choose a role from "Default Configuration" and select second tab "Toolbar Configuration"

  Place this code at the good place :

  <tools>
<tool name="ForeColor"/>
<tool name="BackColor"/>
...
<tool separator="true"/>
<tool name="Emoticons" Name="Emoticons" type="dropdown" PopupWidth="170px" PopupHeight="117px">
<item name="&lt;img src='/images/Emoticons/angry_smile.gif' /&gt;" value="/images/Emoticons/angry_smile.gif" />
<item name="&lt;img src='/images/Emoticons/angel_smile.gif' /&gt;" value="/images/Emoticons/angel_smile.gif" />
...
</tool>
</tools>

  Note "&lt;" and "&gt,;" are necessary instead of "<" and ">" for me to avoid an error...

  Save the file.

4. Select the first tab "Editor Configuration"

  Go to the "Client Script Settings" chapter of the form (vertical scrollbar), and for the first property "OnClientCommandExecuting:", type "OnClientCommandExecuting"

  Save the file.

 

After that, your editor should display emoticons list !

Jan 14, 2011 at 2:47 AM
Edited Jan 14, 2011 at 3:04 AM

To be better :

<tool name="Emoticons" type="dropdown" Text="&lt;img src='/images/Emoticons/angel_smile.gif' /&gt;" width="20px" ItemsPerRow="5" PopupWidth="170px" PopupHeight="117px"> 
...