Problem/Motivation
A decision has been made on #424400: Use BUEditor on drupal.org
However, BUeditor is very configurable, and some of us want to bikeshed a bit more on exactly which optional features should be included in the drupal.org deployment.
Proposed resolution
A custom minified javascript library should be created which implement only those features which are generally agreed to be useful to the drupal.org community.
Remaining tasks
-
Decide which of the available optional features are desired.
-
Compile a list of libraries that must be combined to implement the desired feature-set.
-
Create an editor template file whose buttons activate the desired features.
-
Write an input-filter help text that describes to the new user how to use these features.
-
Deploy all of the above to the drupal.org website.
User interface changes
This affects most textarea form inputs on drupal.org.
API changes
None.
Original report
-
I suggest using the library bue.min.all.js instead of bue.min.default.js.
With an extra 7kb we get:- Indent(TAB), unindent(Shift TAB) and auto indent(ENTER) in the textarea. This enhances readability a lot.
- Ctrl shortcuts. Accesskeys turn into ctrl shortcuts.
- Tag auto completion. Closing tags are automatically inserted during typing.
- Auto list item. Additional li tags can be inserted by just pressing Enter when the cursor is at the end of a list item.
- Find & Replace in textarea
- Cross-browser undo-redo
-
#132 by pillarsdotnet on October 7, 2011 at 6:49pm
-
We may also have unneeded libraries(IMCE?) in default.min.js. For reference, here is the list of library files.
Can you separate the list into three categories, please?
-
Libraries which implement features we all have agreed are desirable.
-
Libraries which implement features regarding which we are undecided or of mixed opinion.
-
Libraries which implement features that are not wanted or needed at this time.
-
-
- Decided: markup, popup, misc (These are required for Image/Link dialogs)
- Undecided: preview, ctrl-shortcuts, undo-redo, auto-li, tab-indent, autocomplete
- Unwanted: imce, find&replace
I've moved preview to undecided because it always displays Full HTML and not usable in non-empty textareas. OTH, ajax preview which is aware of input filters requires an additional module.
| Comment | File | Size | Author |
|---|---|---|---|
| #34 | sprite-new.png | 2.35 KB | pillarsdotnet |
| #32 | sprite.png | 2.78 KB | pillarsdotnet |
| #31 | php.png | 451 bytes | pillarsdotnet |
| #31 | code.png | 196 bytes | pillarsdotnet |
| #26 | Dorg.bueditor.txt | 13.95 KB | ufku |
Comments
Comment #1
ufku commentedI think most people would agree on including ctrl-shortcuts.
I'm not sure about the undo-redo library. It won't differ much for Firefox users as FF already handles textarea history correctly.
The difference would be the ability to undo word by word. FF's state saving period could be very long. It sometimes undoes paragraphs or the whole content whereas undo library saves states when one of "backspace, enter, space, del, V, X, comma, dot" keys is pressed or when content is entered by a button. This provides smaller undo-redo steps.
For users of other browsers the question is "Have i ever wanted to fix my browsers handling of textarea history?"
Comment #2
pillarsdotnet commentedWell, my point is this:
If Ctrl-Z works for a plain textarea, and
If BUeditor without the undo-redo library breaks Ctrl-Z handling, and
If BUeditor with the undo-redo library fixes the Ctrl-Z brokenness,
... then I think it's a no-brainer. The library should be installed to avoid the backlash from people (like me) who depend on that keystroke and who will scream bloody murder if it breaks.
Comment #3
ufku commentedWhen a button inserts some content (when textarea content is changed by javascript);
Chrome and Safari: the textarea history is lost. impossible to undo.
IE: undo is possible but the content added by js is strangely ignored(stays unchanged).
Undo-redo library not only fixes the above issues but also provides the missing per-textarea history for Chrome, Safari, and IE.
To conclude; bueditor without undo-redo library breaks textarea history in Chrome and Safari.
Comment #4
michelleI'm +1 on using the un/redo library. It's adding miniscule amounts of loading time and provides a consistent UI.
In general, I'm +1 on any feature someone thinks is useful that:
a) does not significantly increase load time
b) does not interfere with normal use of the text area so it can be ignored if not wanted
Michelle
Comment #5
MGParisi commented+1 on undo/redo and a tag that inserts [XXXXX] for the issue queue inserts
Preview, ctrl shortcuts are currently working so we can take those of the list
Comment #6
ufku commentedThe editor was deployed while i was posting this. Here are the latest changes;
I think we also need a button for php code as it is used frequently on d.o.
@MGParisi, can you find/create a php icon that fits into the current set?
Are we keeping the preview button? Note that it is incapable of displaying filtered html such as code or php-code. It displays pure html which might be inconsistent with what the user gets after form submission. Also it won't work on textareas that has already html in it.
Comment #7
MGParisi commentedthere is a code icon, its "<?"
I created it, Im not a graphic artist, but I think it fits in maybe too well because people are not noticing it. The shift shortcuts work but require shift alt, and not all of them have them (see the help button up top).
I took out the IMCE logic in the BUEditor Config, is there javascript code or something left?
+1 for image size field size increase.
Really we just need to have a process to do these things.
-The ticket [#XXXXX] functionality (Do we want this?)
-Undo/Redo
-and I don't understand ctrl support, shift+alt is annoying so ctrl only might be good if it does not get in the way of internationalization.
Comment #8
naught101 commentedThe <code> icon is good, but d.o comments also allow <?php ... ?> codeblocks too.
There is a "teaser break" icon on the comments, dunno if there's a way of removing that without removing it everywhere...
Comment #9
klonosThe php logo (in proper/smaller dimensions) seems good to you people for a php syntax highlight button?
Comment #10
MGParisi commentedPersonally I would change the current coder icon to be <> and the php coder icon to be <?php
Comment #11
klonosI have asked this here already, but was pointed here, so...
From BUeditor's features list:
I was more talking/thinking about duplicating the "File attachments" fieldset in the "Insert/edit image" pop-up. Can this be done?
Comment #12
dwwI have no problem with "Code" as the button label for inserting
<code>tags. I think<>would be cryptic and no one would know WTF that means. I care less that all of these buttons are exactly the same width than I do that they make sense and people have a sense what they do without needing to just experiment or rely on the help.I'd love a
<del>button on here, too. That could be anSicon perhaps.I'd be in favor of disabling the live preview entirely.
How often does anyone need/care about the break tag? Makes no sense on comments at all. Even on node bodies, almost nowhere does d.o use the core teaser for anything. I'd remove that entirely, too.
Might be nice to have a button to insert more blank
<li></li>lines to an existing list. IMHO, could just label that<li>;).Comment #13
klonos+1 for the
<del>button. Googling a bit about it, shows that common images useT,A,Sorabc.Comment #14
michelleI'm +1 on:
<li></li><>No opinion on
Del... I can't say I've ever used it.Michelle
PS: Formatting that post with the new bar was so nice. :)
Comment #15
dwwIn the interest of momentum and progress, I just:
<code>from<?to just "code"<?php %text% ?>button called "PHP"In IRC there was concern about confusion over the proposed
<li></li>button, especially if the label is just "li". I suggested "item" but no one jumped at that, either. Not wanting to take matters into my own hands too far, I held back on that. But, I'd still like to add something if we can figure out a good label/icon for it.Instead of a single catch-all issue for everything, I'm wondering if separate issues for specific proposals would be easier to deal with. We can tag them all "bueditor" to keep track, but then the conversations would be easier to follow for interested parties and the status would be more useful.
Comment #16
wmostrey commentedThe strike-through that was added doesn't work as expected. It replaces the selected word with the literal string
<del>%TEXT</del>instead of keeping the selected word, as it does with bold and italic.Comment #17
dwwSorry about that, now fixed. Trivial typo when setting up the button...
asdgasAHhhh.. ;)
Comment #18
Jeff Burnz commentedThe one thing I would personally would LOVE would be a button for issue links that inserted this:
[#]So I can just paste in the issue number, highlight and click...
Comment #19
naught101 commentedPerhaps for the >li> button, just use the bulleted list icon with a green plus overlayed on it in the bottom right hand corner? Problem will be that people will press it when they're not in a list, or when they're inside an existing <li>.
re #18, dreditor has a function that takes a https://drupal.org/node/1302972 style url and replaces it with
#1302972: Decide on a specific set of libraries, extensions, and icons for BUEditor as used on drupal.org. Something like that might be good.Comment #20
naught101 commentedTABLE! Please, table. Extremely useful, yet so annoying to code by hand. I didn't add it before, because I assumes from the screenshots that BUEditor didn't have it, but I just saw #240470: Adding table.
Also, I just noticed that BUEditor destroys a feature that I quite like in firefox - that textarea contents are retained after going to another page, then clicking back/forward to return to the half-completed textarea. This is quite useful if you need to grab a link or some text from your immediate history - just got back a few pages, copy what you want, go forward, paste. Unfortunately BUEditor clears the textbox when you return to the page (or at least, having it implemented causes the text box to be cleared...
Comment #21
klonos...minor edit to reflect actual capitalization in the editor's name ;)
Comment #22
michellePutting in a -1 for breaking into issues for each feature unless it's a feature that really requires a lot of discussion. That would make for a whole lot of tiny issues to follow. IMO, let's only break one off if it starts monopolizing this issue and getting a lot of back and forth.
As for the li button... ISTR there was a mention in one of these issues about a library that would add another set of them when you are at the end of your list and hit enter...
Michelle
Comment #23
ufku commentedThis happens to be a jquery bug where it resets the textarea on window unload. In order to observe the behavior, at least one input element must be inserted somewhere in the document before the textarea.
BUEditor does this for the text buttons, e.g. Code and PHP buttons in our editor.
A workaround is to set all the buttons as images.
Comment #24
naught101 commentedHrm, in that case, can we just have an image that contains the code/php text, like the B/I/
ABC/H2/3/4 buttons?Comment #25
dwwYes, if we had icons with just the text as images, I'd be happy to swap those out.
Comment #26
ufku commentedI've updated the editor on http://bueditor-drupal.redesign.devdrupal.org (drupal/drupal, bananas/bananas)
We can go on discussing further on this live example.
One can also test it locally by importing the attached editor file at admin/settings/bueditor/import. Icons will also be imported if a directory is specified in the form.
Comment #27
dwwCool, thanks ufku.
Just had another idea for a button (at least for the next few weeks/months). Something that adds this link:
@%text%: Stop subscribing, start following!
;) So, you cut/paste a username, select it, click the button and you've added social pressure to help stop a nasty habit we've had to rely on for the last 10 years. ;) See #986616-54: Update Manager fails when the primary module/theme for a project lives in a subdirectory as an example...
Comment #28
klonosIf we had #42232: Help Maintainers Manage Issue Priority by Encouraging Voting implemented it would be so much easier to decide.
@dww: Hey Derek, just something to think about... adding another comment simply to ask people to stop posting useless comments is simply adding another (equally useless IMHO) comment. Don't you agree?
Please stay put as I am in the middle of proposing a solution to finally end both "subscribe" as well as "+1" comments (without extra comments being added in the issues). Please give me the time to get my case together and present it to the public. Thanx in advance ;)
Comment #29
michelleIt does add one more comment but I don't agree that it's useless because it will (hopefully!) avoid any more sub comments being added to that issue. So you get one "sub" and one "don't sub!" and then you're done instead of "sub" "sub" "sub"... and so on.
Looking forward to your solution. :)
Michelle
Comment #30
MGParisi commentedcan we get #26, or would you all like to see an icon that is more universally accessible (Not English)
Comment #31
pillarsdotnet commentedHere's a couple of icons.
Comment #32
pillarsdotnet commentedAnd here's a replacement sprite image, with the code and php images in place:
Comment #33
MGParisi commentedI like < code > better then the current one, but think people with artistic ability (like pillars) can do abit better. The PHP is AWSOME!
Comment #34
pillarsdotnet commentedThat's the first time I've been accused of artistic ability.
The PHP image in the sprite above was copied from http://static.php.net/www.php.net/favicon.ico
The <code> is 15pt Terminus font with -1pt inter-character spacing.
Nevertheless, here's an attempt to do "a bit better".
Comment #35
klonos:)
I like the php icon in #32 better, since it has the same dimensions as the rest.
...btw, why not http://drupal.org/sites/all/themes/bluecheese/images/blockquote-66.png ??
Comment #36
pillarsdotnet commentedComment #37
naught101 commentedyes, the buttons in #32 are better than in #34
Also, it would be useful to have a button that adds "<a href="">%text%</a>"Never mind me.Comment #38
klonos#1308176: [meta] Battle plan for stopping spam/"subscribe"/"+1"/"thank you" comments (and cleaning up old ones from the db too).
...please let me know what you think about it.
Comment #39
basic commentedComment #40
lizzjoyI'm closing this issue due to inactivity. @dww, if you or anyone else wants to re-open it, please do.
Comment #41
lizzjoy