wysiwyg editor for notes

[dnrce]

Migrated from the original issue at https://www.assembla.com/spaces/tracks-tickets/tickets/837

Just a thought here... As you all know, tracks supports attaching notes to individual todos as well as to projects. The current implementation is not wysiwyg but does support using html tags to do basic formatting. On other applications I have been using or experimenting with (namely wikimedia and drupal) I have been able to add wysiwyg support to text input fields. There are two rich text editors that I have used that seem pretty robust - [[url:http://tinymce.moxiecode.com/index.php|TinyMCE]] and [[url:http://www.fckeditor.net/|FckEditor]]. I am interested to know if there is much interest in enabling this type of support in tracks?

Originally reported by maddentim on February 2, 2009 at 12:45:26 (-0500)

[dnrce]

On February 2, 2009 at 14:01:04 (-0500), lrbalt commented:

yes, this would be a very nice idea. We need to find a nice wysiwyg editor that integrates with rails... I've seen a plugin for rails for TinyMCE, but it looks deserted...

[dnrce]

On February 2, 2009 at 14:56:14 (-0500), Vitalie Lazu commented:

I would like it to be an user preference: notes format: wysiwyg, textile, markdown, etc.

[dnrce]

On February 2, 2009 at 14:23:35 (-0500), maddentim commented:

Preferences choice sounds like a good idea.

What is supported today? I have not used textile before. I just checked it out. Looks cool. Is that what is there now? Maybe we need to advertise its presence more...

How about this: [[url:http://github.com/UnderpantsGnome/fckeditor_on_rails/tree/master]]

Maybe it would be more of a pain to integrate for what are intended to be simple notes...

[dnrce]

On February 2, 2009 at 15:16:08 (-0500), lrbalt commented:

We currently use RedCloth in Tracks, so I'd suggest to start from there.

I think we should use the wysiwyg interface for all note fields, i.e. for project notes, notes belonging to todos and recurring todos.

The plugin you reference look quite difficult to install with a lot of dependencies. I'm not sure we should want to get a lot of dependencies into Tracks for a simple editor. Any alternatives?

[dnrce]

On February 2, 2009 at 20:37:55 (-0500), maddentim commented:

I am glad I asked. In reviewing the RedCloth site, I see that it really has all that I need. Now I am thinking that incorporating a high powered wysiwyg editor would be overkill for this application.
One of my concerns is that it wouldn't be able to be packaged together with the application. When I have added FckEditor or TinyMCE to another application it has always required me to do something. Either add a plugin or drop the application folder into the parent application. To messy.
I am seeing two options:

• Incorporate buttons like Assembla here does. They just have 7 buttons for the most common things. They just pop in the characters that you need for the textile to create the effect you want. Just using them here has taught me how to do textile without the buttons.
• Or have a link for a guide on how to use the basic commands with a link to http://hobix.com/textile/ a site link this for more information. The link could just expand a space for the instructions without taking the user from what ever "page" they were on.
• Or a combination of both. I am liking the idea of buttons above the text box and an expandable guide box below.

Thoughts? While we are at it, maybe even a preview button like Assembla has so you can see what you will get before you lock it in (not that they didn't copy the preview idea from someone else. that is the beauty of open source. you don't get the guilt when you did not think of everything yourself!)

Ok, one more thought (after clicking the preview and seeing what this editor does). It seems that Assembla here interprets hitting the enter button once as a new line. In the RedCoth, we have to hit enter twice to make a new line. That is the most common formatting thing I use in these notes. And I know if I think about it that doing two enters comes out as one new line, but I usually forget and end up with a giant blob of text.

[dnrce]

On February 2, 2009 at 03:35:58 (-0500), lrbalt commented:

I'd like to start with 3. We can add a small question mark which links to getontracks.org. From there we could link to the guide

This way we can control the page Tracks links to from getontracks.org without changing the Tracks code if the remote site changes

I'm not fond of a preview button as I do not see any advantages. It's not like we are posting on a forum where submit means the whole word can see it. If the result is not ok, just edit the note.

If the newline is an issue, we can always filter the result where we replace \n with \n\n

[dnrce]

On February 2, 2009 at 12:19:47 (-0500), maddentim commented:

Sounds good. Can I help? This sounds like the type of contribution that might be good for me to get my feet wet with. Can you point me to the files that I would work on?

I agree the preview button is probably not called for...

[dnrce]

On February 2, 2009 at 14:10:39 (-0500), lrbalt commented:

Most of the work will be in the views:

• adding the buttons
• adding the javascript to handle the actions for the buttons
• modifying all forms that make use of RedCloth (todos, project notes, recurring todos)

Perhaps it is good to start to look around how the buttons are implemented on sites like assembla. Do they use some library for this?
Then try to implement it on the project notes (less invasive), see /app/views/notes/_note_edit_from.rhtml

If you like I can help by reviewing your work (easiest if you put your work on github)

[dnrce]

On February 2, 2009 at 00:14:14 (-0500), maddentim commented:

Using Firebug, I see that Assembla is using javascript for the toolbar, but it looks like it might be more wiki format oriented than textile. Not sure what impact that would have. Need to study further.

Found this too: [[url:http://terralien.com/projects/textile-toolbar/|http://terralien.com/projects/textile-toolbar/]]

I will be out of town for a couple of days, but can look at next week some.

Here is the code I found in the assembla page:

/*
2# Based on Trac /common/js/wikitoolbar.js
3# Copyright (C) 2003-2008 Edgewall Software
4# Copyright (C) 2003-2004 Jonas Borgström 
5# Copyright (C) 2004-2005 Christopher Lenz 
6# All rights reserved.
7#
8# This software is licensed under the modified BSD licens. The terms
9# are available at http://trac.edgewall.org/wiki/TracLicense.
10#
11# This software consists of voluntary contributions made by many
12# individuals.*/
13
14function addWikiFormattingToolbar(textarea, toolbarContainer) {
15 if ((typeof(document["selection"]) == "undefined")
16 && (typeof(textarea["setSelectionRange"]) == "undefined")) {
17 return;
18 }
19
20 var toolbar = toolbarContainer ? toolbarContainer : document.createElement("div");
21 toolbar.className = "small_toolbar";
22
23 function addButton(id, title, fn) {
24 var a = document.createElement("a");
25 a.href = "#";
26 a.id = id;
27 a.title = title;
28 a.onclick = function() { try { fn() } catch (e) { } return false };
29 a.tabIndex = 400;
30 toolbar.appendChild(a);
31 }
32
33 function encloseSelection(prefix, suffix) {
34 textarea.focus();
35 var start, end, sel, scrollPos, subst;
36 if (typeof(document["selection"]) != "undefined") {
37 sel = document.selection.createRange().text;
38 } else if (typeof(textarea["setSelectionRange"]) != "undefined") {
39 start = textarea.selectionStart;
40 end = textarea.selectionEnd;
41 scrollPos = textarea.scrollTop;
42 sel = textarea.value.substring(start, end);
43 }
44 if (sel.match(/ $/)) { // exclude ending space char, if any
45 sel = sel.substring(0, sel.length - 1);
46 suffix = suffix + " ";
47 }
48 subst = prefix + sel + suffix;
49 if (typeof(document["selection"]) != "undefined") {
50 var range = document.selection.createRange().text = subst;
51 textarea.caretPos -= suffix.length;
52 } else if (typeof(textarea["setSelectionRange"]) != "undefined") {
53 textarea.value = textarea.value.substring(0, start) + subst +
54 textarea.value.substring(end);
55 if (sel) {
56 textarea.setSelectionRange(start + subst.length, start + subst.length);
57 } else {
58 textarea.setSelectionRange(start + prefix.length, start + prefix.length);
59 }
60 textarea.scrollTop = scrollPos;
61 }
62 }
63
64 addButton("strong", "Bold text: *Example*", function() {
65 encloseSelection("*", "*");
66 });
67 addButton("em", "Italic text: _Example_", function() {
68 encloseSelection("_", "_");
69 });
70 addButton("heading", "Heading: .h1 Example ", function() {
71 encloseSelection("\n h1. ", " \n", "Heading");
72 });
73 addButton("link", "Link: [[url:http://www.example.com/|Example]", function() {
74 encloseSelection('[[url:http://www.example.com|', 'ExampleName]]');
75 });
76 addButton("code", "Code block: 
 example 
", function() {
77 encloseSelection("\n
\n", "\n
\n");

78 });

79 addButton("ol", "Numeric List Item: # itemA", function() {

80 encloseSelection("\n# ", "\n");

81 });

82 addButton("ul", "Bulleted List Item", function() {

83 encloseSelection("\n* ", "\n");

84 });

85 if (!toolbarContainer){

86 textarea.parentNode.insertBefore(toolbar, textarea);

87 }

88}

89

90// Add the toolbar to all <textarea> elements on the page with the class

91// 'simple_wikitext'.

92function addSimpleWikiToolbar(){

93 var re = /\bsimple_wikitext\b/;

94 var textareas = document.getElementsByTagName("textarea");

95 for (var i = 0; i < textareas.length; i++) {

96 var textarea = textareas[i];

97 if (textarea.className && re.test(textarea.className)) {

98 addWikiFormattingToolbar(textarea);

99 }

100 }

101}

102

103Event.observe(window, 'load', addSimpleWikiToolbar)

[dnrce]

On February 2, 2009 at 15:49:14 (-0500), lrbalt commented:

you can go to the source (get it from Trac; a assume that code is maintained) and see if that works?