Open Atrium – Installation and WYSIWYG Editor Demonstration

At iAutomate we decided to use Development Seed’s Open Atrium solution as a base for our support web site. See our previous blog post for more information on Open Atrium. It is built on the Drupal platform and provide great flexibility to expand to our needs.

While reviewing the Open Atrium issue tracking site on github many users (including myself) have/had issues getting a WYSIWYG editor working.  For me, the first time I tried to install FCKEditor, I could not get it to work.   I then realized that I may have forgotten a step.  When I retried I got it to work.  Since then, I have had it work on various test installation without any issues.

In this video, I go through an installation of Open Atrium and the FCKEditor.  The following is the outline of the video:

 

 

Open Atrium – Installation and WYSIWYG Editor from iAutomate on Vimeo.

 

Hope this helps.

+1
Share this
  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Digg
  • del.icio.us
  • Reddit
  • email

Tags: , , , ,

Comments

  1. #1 by Jeff Miccolis on August 24th, 2009 - 10:22 am

    Thanks for taking the time to record the screen cast, I’m quite sure it’ll be useful for many people. …and I’ve just added a link to this post to the Developer FAQ on openatrium.com -> http://openatrium.com/developer_faq

  2. #2 by Alain on August 24th, 2009 - 10:34 am

    @Jeff Miccolis
    Thanks Jeff. As we expand our use of Open Atrium, we will provide more screen casts.

  3. #3 by rob on August 26th, 2009 - 5:10 pm

    thank you very much… helped me a lot

  4. #4 by Stefan on August 29th, 2009 - 1:13 pm

    Thanks for the video. I was able to disable FCKeditor on the shout box by editing the ‘FCKeditor Global profile’ and under ‘Visibility Settings’ (with Exclude radio checked) I added the line: dashboard.edit-shout

  5. #5 by Alain on August 29th, 2009 - 9:41 pm

    @ Stefan

    Thank you for that. I will be posting some additional information as we have found an issue when re-editing WYSIWYG content. Stay tuned…

  6. #6 by Todd Geist on September 12th, 2009 - 5:38 pm

    Thanks for vid.

    But one question. Why did you choose the FCK editor module over the WYSIWYG module? Is there something about Open Atrium that pushed you in that direction.

    Thanks

    eow

  7. #7 by Alain on September 12th, 2009 - 9:40 pm

    @ Todd Geist
    No particular reason. Juse use to using FCKEditor. I look forward to an updated Drupal FCKEditor Module to use the new CKEditor –> http://ckeditor.com/! Looks great!

  8. #8 by Alain on September 12th, 2009 - 9:44 pm

    For those who have installed FCKEditor in Open Atrium, you may have noticed that when you re-open a node for editing you lose your formatting. Thankfully Tanc found a work around! Have a look on gitHub –> http://github.com/developmentseed/Atrium/issues/#issue/136.

    Thanks Tanc!

  9. #9 by Peter Torr Smith on September 22nd, 2009 - 8:28 pm

    Yes, have lost formatting with FCKEditor in Open Atrium, however that link to github issues does not seem to be working. Can you explain the work around or provide an updated link? Thanks, Peter.

    @ Alain

    Alain : For those who have installed FCKEditor in Open Atrium, you may have noticed that when you re-open a node for editing you lose your formatting. Thankfully Tanc found a work around! Have a look on gitHub –> http://github.com/developmentseed/Atrium/issues/#issue/136.
    Thanks Tanc!

  10. #10 by Alain on September 22nd, 2009 - 9:27 pm

    @Peter Torr Smith

    The link no longer works. Even from my gitHub messages, the link to the post no longer works. It appears that no items appear. I am not a big fan of gitHub and this is just one more reason…

    Here is the fix that was suggested:
    Open the Seed.module file (sites/all/modules/custom/seed/).
    Go to line 208 –> function _seed_filter_form_alter(&$form).
    What we want to do is comment the content of this function.

    function _seed_filter_form_alter(&$form) {
     /* //<– Line 209
         $found = array();
         foreach (element_children($form) as $id) {

         ….

            $form[$filter_target]['#suffix'] = '’;
        }

        */ <– Line 253
    }

    This does the trick. The visuals on the form will change where you normally select the input format.

  11. #11 by Alain on September 23rd, 2009 - 1:17 pm

    It appears that Open Atrium 1.0 Beta3 addresses this issue. I have not tried it yet but for those starting out make sure to use the latest release.

  12. #12 by chris on January 8th, 2010 - 10:56 am

    Did anyone figure out how to disable CKeditor for the shoutbox feature only? Is this something you disable in the administration panel for Open Atrium or must I edit a file in the module? Thanks in advance for any advice!

  13. #13 by Alain on January 8th, 2010 - 3:55 pm

    @chris
    Go to Administer >> Configuration >> FCKEditor >> Edit Global Profile and in the Visibility Settings add “edit-shout” to the Fields To Exclude listing.

    That will do the trick!

  14. #14 by Marcel on January 24th, 2010 - 5:10 pm

    Hi,

    I used the nice method you posted here and it seems to work. However, the issue that I face now is that the Fckeditor generates text with far too much space between lines. Any idea how to solve that issue?

    Many thanks in advance.

    Btw: is it normal for the editor not to show e.g. bullet points while editing? It does show bold text by the way.

    Note:
    Fckeditor: 6.x-1.4 (module)
    FCKeditor 2.6.5

  15. #15 by Marcel on January 25th, 2010 - 2:27 pm

    So to complete my message, I have a feeling I need to do something about the input filters used in OA to make this work. However, would that mean I need to disable Strongarm and get into trouble later when upgrading OA?

    I would very much appreciate any help on this. Thanks.

  16. #16 by Alain on January 31st, 2010 - 9:54 pm

    @Marcel
    Hi Marcel,
    I ran into the same thing and had to play around with the style sheets. I’ll post my changes to help you get on your way with the visuals.

  17. #17 by Marcel de Ruiter on February 2nd, 2010 - 3:29 am

    Hi Alain,

    At least I solved the billets thing, by having the WYSIWYG API module which I am now using as a comfortable “in between” make sure that the editor uses it’s own CSS in stead of the OA CSS.

    Looking forward to you additional information. Did you do something to Strongarm?

    Thanks.

  18. #18 by Craig on March 16th, 2010 - 9:57 pm

    Hi Alain, I was just wondering what changes you made to the CSS to get the and tags to display whilst editing? Ive had a bit of a play and tried edit the “contrib/fckeditor/fckeditor.css” file and to add:

    ul{
    list-style-type: circle;
    }

    ol{
    list-style-type: decimal;
    }

    also tried:

    #xEditingArea ul{
    list-style-type: circle;
    }

    and:

    #edit-body ul{
    list-style-type: circle;
    }

    not having much luck with any of these.

    Any suggestions?

  19. #19 by Craig on March 16th, 2010 - 10:22 pm

    ive managed to get it to work by editing the css file in the theme folder. this is a bit of a hack though..

  20. #20 by Craig on March 16th, 2010 - 10:59 pm

    ok. even better than editing the theme css file is this solution. Just add this code into the contrib/fckeditor/fckeditor.css file:

    ———- CODE ———->

    #edit-body ul {
    list-style-type: disc !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
    }

    #edit-body ol {
    list-style-type: decimal !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
    }

    ———- /CODE ———->

    :)

  21. #21 by Alain on March 18th, 2010 - 4:09 pm

    @Craig
    Thanks for providing your CSS suggestions!

  22. #22 by Andrew Kumar on November 26th, 2010 - 3:11 am

    @ Stefan
    Works best if you use the following:
    *.edit-shout

  23. #23 by Dave on June 4th, 2011 - 3:06 am

    I used FCKEditor on my old forum. It’s great!

  24. #24 by Minisite Design on June 7th, 2011 - 8:01 am

    Great video! It really adds me an insights on open atrium – installation and WYSIWYG editor. Thanks for sharing this post. It’s really beneficial to the needy. Minisite Design

  25. #25 by Nick on July 29th, 2011 - 2:24 am

    Nice presentation. Need more sound volume, next time, please.

Post your comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.