wysiwyg editor for notes
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 - TinyMCE and FckEditor. I am interested to know if there is much interest in enabling this type of support in tracks?
Leave a comment
on 2009-02-09 19:01 *
By lrbalt
Component changed from None to Coding
Milestone set to 1.8
Component changed from None to Coding
Milestone set to 1.8
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...
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: 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...
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: 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...
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?
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?
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:
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.
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.
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
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
Most of the work will be in the views:
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)
- 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)
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: 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:
77 encloseSelection("\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)
</code></pre>
Found this too: 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 <jonas@edgewall.com>
5# Copyright (C) 2004-2005 Christopher Lenz <cmlenz@gmx.de>
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: <pre><code> 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)
</code></pre>
Updating tickets (#17, #47, #49, #83, #91, #97, #103, #107, #117, #125, #126, #175, #177, #183, #188, #197, #206, #211, #236, #240, #276, #294, #295, #305, #309, #312, #317, #324, #355, #357, #358, #371, #373, #393, #434, #452, #478, #503, #507, #535, #564, #565, #568, #569, #571, #572, #636, #668, #682, #686, #692, #715, #736, #741, #759, #773, #782, #783, #800, #828, #837)
Migrated to GitHub issue #837