Rich Text Editor in Scaffolding

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.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
  1. 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:

    <script src="/s/1418/1/1.0/_/download/resources/confluence.web.resources:page-editor/dwr-wysiwyg-converter.js" type="text/javascript"></script>
    

    Thanks go to the forum users here:

    http://forums.atlassian.com/thread.jspa?messageID=257296700

  2. 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 ?

    <script type="text/javascript" src="/s/1517/9/1.0/_/download/resources/confluence.web.resources%3Apage-editor/dwr-wysiwyg-converter.js" ></script>
    <script type="text/javascript" src="/s/1517/9/2.10.1/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-src.js" ></script>
    <script language="javascript" type="text/javascript">
    

    This are the source which i'm trying to add /change

    1. Jan 14

      Shawn Stepper says:

      If you have a publicly visible server I could check it out for you. Shawn

      If you have a publicly visible server I could check it out for you.

      Shawn

      1. 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

        1. 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}
          
          1. 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

            1. 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:

              tinyMCE is not defined
              (?)()editscaf...d=7963189 (line 560)
              [Break on this error] <span id="title-text">
              

              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:

              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-src.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-confluence-formatter.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-adapter.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-themes-advanced.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-table.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-paste.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-emotions.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-fullscreen.js" type="text/javascript">
              </script>
              <script src="/confluence/s/1515/12/2.10/_/download/resources/com.atlassian.confluence.tinymceplugin%3Aeditor-resources/tinyMce-plugins-confluence.js" type="text/javascript">
              

              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:

              tinymce._init
              Failed to run init function: TypeError: AJS.params.baseUrl is undefined
              Failed to run init function: TypeError: AJS.params.baseUrl is undefined
              Event:_pageInit starting
              

              It's a private confluence instance so I can't grant you access to look at the problem, but any help is appreciated.

              1. 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...

              2. 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.

                1. 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...

                  1. 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. 

  3. 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

    1. 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?

  4. 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>

    1. 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.

  5. 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!

    1. 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