Button to Image library from Blog & Discussions

[franic]

Hi all,

I've managed to customize TinyMCE when editing a wiki page just fine. But I'd like to add a button to the image library from blog and discussion posts as well.
Basically I'd like to add this feature to blog and discussion posts:
[img]http://img3.hostingpics.net/thumbs/mini_403645tinymce_imagelibrary.png[/img]

For example for blogs editing I've modified postedit.get.html.ftl and I have this

editorConfig : 
      {
         <#–
         //YUI
         //             height: this.options.height + 'px',
         //             width: this.options.width + 'px',
         //             dompath: false, //Turns on the bar at the bottom
         //             animate: false, //Animates the opening, closing and moving of Editor windows
         //             markup: "xhtml",
         //             toolbar:  Alfresco.util.editor.getTextOnlyToolbarConfig(this._msg),
         –>
         //Tiny MCE
         theme:'advanced',
         theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,forecolor,backcolor",         
         theme_advanced_buttons2 :"bullist,numlist,|,outdent,indent,blockquote,|,alfresco-imagelibrary,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,removeformat",
         theme_advanced_toolbar_location : "top",
         theme_advanced_toolbar_align : "left",
         theme_advanced_statusbar_location : "bottom",
         theme_advanced_path  : false,
         theme_advanced_resizing : true,
         theme_advanced_buttons3 : null,
         language:'${locale?substring(0, 2)}'         
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The code seems all right, and according to Firebug my alfresco-imagelibrary adding is taken, but nothing new appears. Is there anything else to change in order to add this button?

Thanks.

[mikeh]

There are a few more edits you need to make:

1 - Pass the current siteId into the editorConfig. You can copy this from a few lines above. The Image Library pop-out then knows where to look for the images.
2 - Include the simple-editor.css and .js in the .head.ftl templates

<@link rel="stylesheet" type="text/css" href="${page.url.context}/modules/simple-editor.css" />
<@script type="text/javascript" src="${page.url.context}/modules/simple-editor.js"></@script>‍‍

3 - Change

new Alfresco.util.RichEditor()‍

to

Alfresco.util.createImageEditor()‍

and remove the first parameter.

Note: You'll have problems with the discussions replies page because the pop-out doesn't listen for hide events and is placed absolutely on the page (so won't get hidden).

Thanks,
Mike

[mich]

I've been trying to get this working as well. Alas it's not working yet.

Just to be clear for step 1 I've been editing the file: C:\Alfresco\tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\blog\postedit.get.html.ftl
to this:

   new Alfresco.BlogPostEdit("${args.htmlid}").setOptions(
   {
      siteId: "${page.url.templateArgs.site}",
      editorConfig:
      {
         inline_styles: false,
         convert_fonts_to_spans: false,
   siteId: "${page.url.templateArgs.site}",
         theme: "advanced",
         theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,forecolor",
         theme_advanced_buttons2: "bullist,numlist,|,outdent,indent,blockquote,|,alfresco-imagelibrary,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,removeformat",
         theme_advanced_toolbar_location: "top",
         theme_advanced_toolbar_align: "left",
         theme_advanced_statusbar_location: "bottom",
         theme_advanced_path: false,
         theme_advanced_resizing: true,
         theme_advanced_buttons3: null,
         language: "${locale?substring(0, 2)?js_string}"
      },
      containerId: "blog",
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

For step 2 I modified: C:\Alfresco\tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\blog\postedit.get.head.ftl
to this:

<#include "../component.head.inc">
<!– Tag Library –>
<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/modules/taglibrary/taglibrary.css" />
<@script type="text/javascript" src="${page.url.context}/res/modules/taglibrary/taglibrary.js"></@script>
<!– Blog Edit –>
<@script type="text/javascript" src="${page.url.context}/res/components/blog/postedit.js"></@script>

<@link rel="stylesheet" type="text/css" href="${page.url.context}/modules/simple-editor.css" />
<@script type="text/javascript" src="${page.url.context}/modules/simple-editor.js"></@script>
‍‍‍‍‍‍‍‍‍‍‍

For step 3 I'm not sure what file you are referring to. I've been trying to edit the file C:\Alfresco\tomcat\webapps\share\components\blog\postedit.js where I noticed the row "Alfresco.utils.RichEditor(….)" you've mentioned. I've changed this to this:

// Instantiate the simple editor we use for the form
//this.widgets.editor = new Alfresco.util.RichEditor(Alfresco.constants.HTML_EDITOR, this.id + //"-content", this.options.editorConfig);
this.widgets.editor = Alfresco.util.createImageEditor(this.id + "-content", this.options.editorConfig);
‍‍‍‍‍

Unfortunaly still without effect. What did I miss?