| Name | Rich Text Editor in Scaffolding |
|---|---|
| Version | 0.4 |
| Product Versions | 2.7.3 |
| Author(s) | Shawn Stepper |
| Price | Free |
| License | Free |
Description/Features
Enable the Rich Text Editor in your Scaffolding textareas. Include this macro in your page, and it will convert all of your scaffolding textareas in the page to use the built in rich text editor. Only tested in Confluence 2.7.3, but may work with newer versions.
Updates
- 0.2 - 10/29/08 - fixed some IE compatibility issues. There is one lingering IE bug still, but it is working over all.
- 0.3 - 11/06/08 - fixed IE word wrapping issue.
- 0.4 - 11/06/08 - fixed image insertion.
Installation
Create a new User Macro called "scaffoldrichtext".
Uncheck "Macro has a body"
Select for output: "Macro generates HTML markup"
Enter this code:
## This macro transforms all scaffold text areas on a page to use the rich text editor. ## Conversion between WIki markup and HTML is handled properly. ## ## Author: Shawn Stepper - shawn.e.stepper at wellsfargo.com ## Version: 0.4 ## Date: 11/06/08 ## <script language="javascript" type="text/javascript" src="/plugins/servlet/tiny_mce/zip_src"></script> <script language="javascript" type="text/javascript"> // This needs to be global, because we can't pass things to callbacks var convertedHTML = ""; // Slower, but enables us to complete all conversions before submission. Without this, it won't work!!! DWREngine.setAsync(false); // Common callback for setting new value function setConvertedHTML(s) { convertedHTML = s; return(true); } // ---------------------- Loading Function ---------------------- \\ function convertToXHTML(mceId, bodyElem, mceDoc) { // Do not convert if current value is already in HTML var HTMLre= /<([^>\s]+)[^>]*>.*<\/\1>|<br.*>/im; if (HTMLre.test(bodyElem.innerHTML)) { // Don't do anything. return(true); } // Since IE destroys whitespace with inerHTML, we have to get the content from the original textarea var inst = tinyMCE.instances[mceId]; var origContent = ""; // Could be messed up due to prototype like libraries if (tinyMCE.isInstance(inst)) { // Get the textarea name var textareaName = inst.formTargetElementId; origContent = document.forms["editscaffoldform"].elements[textareaName].value; } else { // Not an instance?!? Use innerHTML origContent = bodyElem.innerHTML; } // Convert from Wiki markup to HTML WysiwygConverter.convertWikiMarkupToXHtmlWithoutPage(origContent, Scaffold.contentId, setConvertedHTML); // Set the value of the editor bodyElem.innerHTML = convertedHTML; convertedHTML = ""; return(true); } // ---------------------- Saving Function ---------------------- \\ function convertToWiki(mceId, htmlText, bodyElem) { // Convert to Wiki Markup WysiwygConverter.convertXHtmlToWikiMarkupWithoutPage(htmlText, Scaffold.contentId, setConvertedHTML); return(convertedHTML); } // ---------------------- tinyMCE Editor Init ---------------------- \\ tinyMCE.init({ mode : "textareas", content_css : '/styles/wysiwyg-action.css?spaceKey=$content.space.getKey()', popups_css : '/styles/wysiwyg-action.css?spaceKey=$content.space.getKey()', button_tile_map : true, auto_reset_designmode : true, theme : "advanced", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,formatselect,separator,separator,bullist,numlist,separator,outdent,indent,separator,conflink,confimage,forecolor,separator", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_resizing : true, theme_advanced_resize_horizontal : false, theme_advanced_statusbar_location : "bottom", theme_advanced_path : false, theme_advanced_blockformats : "p,h1,h2,h3,h4,h5,h6,macro_quote,macro_noformat,macro_panel,macro_code", plugins : "paste,confluence,safari", table_styles : "Table=confluenceTable", page_id : "${content.getIdAsString()}", context_path : '', cleanup : false, visual : false, force_p_newlines : true, force_br_newlines : false, language : 'en', save_callback : "convertToWiki", setupcontent_callback : "convertToXHTML" }); </script>
Usage
Just put {scaffoldrichtext} in your scaffolding based page.

Comments (17)
Jan 05
Shawn Stepper says:
Apparently, you can make this work in newer versions of Confluence by adding thi...Apparently, you can make this work in newer versions of Confluence by adding this line before the first "script" line:
Thanks go to the forum users here:
http://forums.atlassian.com/thread.jspa?messageID=257296700
Jan 14
Christian Nesemann says:
Hi, i can't get it to work with Confluence 2.10.1. I used the above code and al...Hi,
i can't get it to work with Confluence 2.10.1. I used the above code and also added the line but nothing happens.
Then i try correcting paths but that didn't help. So what i'm doing wrong ?
This are the source which i'm trying to add /change
Jan 14
Shawn Stepper says:
If you have a publicly visible server I could check it out for you. ShawnIf you have a publicly visible server I could check it out for you.
Shawn
Jan 15
Christian Nesemann says:
Sorry our server is not public. I have this code on a page (it's the right usa...Sorry our server is not public.
I have this code on a page (it's the right usage, isn't it)
{scaffoldrichtext} {text-data:txtINPUT}{text-data}The {scaffoldrichtext} consists out of your code with the above script changes. I think the main
problem is that Confluence is using a new RTE since v2.10 and some ressources doesn't exist the way they used to.
e.g. the file zip_src doesn't seem to exist anymore
Jan 15
Shawn Stepper says:
You are missing a critical element. It only works for textarea inputs, not text ...You are missing a critical element. It only works for textarea inputs, not text field inputs. So your code should look like:
{scaffoldrichtext} {text-data:txtINPUT|type=area|width=100%|height=400px}{text-data}Jan 15
Christian Nesemann says:
ok, have overlooked that but i also have some textareas on that page and the rt...ok, have overlooked that
but i also have some textareas on that page and the rte doesn't show up for them
Jan 28
Mel Ludowise says:
I'm also running confluence 2.10 and am encountering the same problem. In my J...I'm also running confluence 2.10 and am encountering the same problem.
In my Javascript console I was seeing the following error:
Upon debugging the issue I noticed that there isn't anything under the url "<my confluence server>/plugins/servlet/tiny_mce/zip_src".
I attempted to copy in the following javascript includes into the macro hoping that one of them would contain the necessary source:
Note - all the paths contain "/confluence" at the beginning because that's the install location on my server.
This still didn't work. In my Javascript console I'm seeing:
It's a private confluence instance so I can't grant you access to look at the problem, but any help is appreciated.
Jan 28
Shawn Stepper says:
Looking at the source code of this page, I would guess you may also need this, i...Looking at the source code of this page, I would guess you may also need this, if it is not already included:
<script type="text/javascript" src="/s/1517/13/1.0/_/download/resources/confluence.web.resources%3Aajs/atlassian.js" ></script>
That said, there are probably a lot more issues. Atlassian has made major changes to the Javascript code. It looks much much cleaner, but I won't be able to figure out how to tweak it until I get my own 2.10 instance going. We are still on 2.7.3 here. Sorry I can't be of more help yet...
Jan 28
Shawn Stepper says:
One more thing... Do you have the baseURL properly specified on the General Admi...One more thing... Do you have the baseURL properly specified on the General Administration page? That could be related.
Jan 28
Mel Ludowise says:
The baseURL is setup properly. After adding the line you suggested before the s...The baseURL is setup properly.
After adding the line you suggested before the slew of Javascript includes that I added, it still doesn't work but I get a set of brand new Javascript console errors:
Firebug's log limit has been reached. %S entries not shown. Preferences unexpected end of XML source [Break on this error] <script src="/confluence/s/1515/12/2.10/...tinyMce-src.js" type="text/javascript">\n editscaf...d=7963189 (line 504) tinymce is not defined [Break on this error] tinymce.confluence.formatter = new (function ($) { tinyMce-...matter.js (line 1) tinymce is not defined [Break on this error] var DOM = tinymce.DOM, Event = tinymce....e, lastExtID, explode = tinymce.explode; tinyMce-...vanced.js (line 9) tinymce is not defined [Break on this error] var Event = tinymce.dom.Event; tinyMce-...-paste.js (line 9) tinymce is not defined [Break on this error] tinymce.create('tinymce.plugins.EmotionsPlugin', { tinyMce-...otions.js (line 9) tinyMCE is not defined [Break on this error] tinyMCE.confLink = new ConfLink();I guess this is a good thing...
Mar 12
Keir Bowden says:
I have been struggling with rich text editing in confluence also. Much lik...I have been struggling with rich text editing in confluence also. Much like your experience, I couldn't find the correct combination of javascript includes to make it work.
At the moment I've worked around it using a separate version of TinyMCE that is provided by a custom plugin I've written. I had to make a few changes to Shawn's macro, as TinyMCE has changed quite a lot between version 2 and 3.
Atlassian appear to have done quite a lot of work around this in order to integrate tightly with Confluence, which won't be available if you go this route. For example, you can't insert images in the same way.
Feb 06
cyrille martin says:
Hi, This User Macro is only working on IE browser ? Because I have got nothing...Hi,
This User Macro is only working on IE browser ?
Because I have got nothing on FireFox under MacOS X.
Regards,
Cyrille
Feb 06
Shawn Stepper says:
It works fine in Firefox 3 in Windows, but I haven't tested on a Mac (I don't ha...It works fine in Firefox 3 in Windows, but I haven't tested on a Mac (I don't have access to one at work). Are you using Firefox 2 or 3?
Feb 22
Majinu Mariam Abraham says:
Can anyone please tell me where to find this js file <script src="/s/1418/1/...Can anyone please tell me where to find this js file
<script src="/s/1418/1/1.0/_/download/resources/confluence.web.resources:page-editor/dwr-wysiwyg-converter.js" type="text/javascript"></script>
Mar 12
Keir Bowden says:
If you aren't seeing this file it usually means its for a different Confluence v...If you aren't seeing this file it usually means its for a different Confluence version. The "s/1418/1/1.0" at the start of the URL is tied to the version of Confluence in some way - I have seen a discussion on this somewhere that explained the versioing but I haven't been able to find it again.
The best way to work out what you need to include is to edit a page using the standard Confluence Rich Text Editor and view the source. You should find a slightly different path to dwr-wysysig-convert.js that you can copy.
Apr 21
Keir Bowden says:
I've spent some time looking into the Confluence variant of TinyMCE fo...I've spent some time looking into the Confluence variant of TinyMCE for version 2.8+, and I think there will be issues attempting to use it for scaffolding pages with more than one text area.
The TinyMCE code has been enhanced to rely on a single text area (called "wysiwyg") per page, and there is plenty of Javascript code doing special things based on accessing information from the "wysiwyg" element on the page. This probably explains why some of us have not been able to find the correct set of javascript includes to allow us to use it - none of my textareas are called wysiwyg!
May 05
Shawn Stepper says:
I recently purchased a personal copy of Confluence, and will try to make this ma...I recently purchased a personal copy of Confluence, and will try to make this macro work in the latest version. Once I do, I will post the results here.
Shawn