(For some reason I can't select the 7.x-2.x branch, but that's the relevant branch for this issue.)
In the Edit module, we've already implemented fairly deep integration with Aloha Editor (including a custom UI) as part of the Spark project. This issue is about migrating that integration into the Aloha module, but exclude the in-place editing aspect. That also means I'll have to make changes to the custom UI that we're using in Edit, which assumes the necessary "DOM infrastructure" for in-place editing already exists.
We've got the blessing of the original module authors: #1704414-9: Aloha switched to jQuery UI; change module to match.
This is now complete! See #14 & #15.
Comment | File | Size | Author |
---|---|---|---|
#14 | Screen Shot 2012-09-07 at 4.40.30 PM.png | 107.7 KB | Wim Leers |
#13 | Add_content.jpg | 94 KB | Wim Leers |
#11 | link-url-button.png | 29.45 KB | kingfisher64 |
#10 | documentation-1760386-10.patch | 1.4 KB | jghyde |
#6 | Screen Shot 2012-08-31 at 5.11.56 PM.png | 125.41 KB | Wim Leers |
Comments
Comment #1
quicksketchI made a new 2.x release for the project, which made the 7.x-2.x-dev option available for selection.
I should note that the *only* thing I've done in 2.x is copy over the Aloha build. All the other code still matches the 1.x branch of Aloha module. Almost all this code will probably need to be gutted. If you'd like to make a start on this Wim, go ahead.
Comment #2
Wim LeersI noticed :) And thanks! (There are so many subtleties about the project module… :))
I'll be working on this for the majority of the remainder of the week. I hope to have it functional by the weekend.
Comment #3
kingfisher64 CreditAttribution: kingfisher64 commentedThanks guys, really looking forward to this.
Comment #4
Wim LeersStatus update: I've made a lot of progress. I should have an initial version ready (and pushed) tomorrow.
I have migrated all of the following code/functionality, *and* cleaned it up:
This module can also be used *without* the Aloha module (the Aloha-specific code is marked by
/* @aloha */
in the code), in this case, it essentially is a cleaned up version of the caption_filter module. However, I think it makes sense to ship this functionality with core as well, so we may want to put this up for core inclusion after we get Aloha in. At under 12,000 bytes, it's definitely a very manageable piece of code :)Still to do, from highest to lowest priority:
Only the highest priority item I still want to get done before I push my code.
Comment #5
Wim LeersPushed!
The details outlined above still apply.
Please be aware that the UI needs serious refactoring, it's just in a "this is functional" state. I'll be working on that next (next week).
TODO (also in the README):
Commits:
- http://drupalcode.org/project/aloha.git/commit/7516db6
- http://drupalcode.org/project/aloha.git/commit/4f901f3
- http://drupalcode.org/project/aloha.git/commit/8eba190
- http://drupalcode.org/project/aloha.git/commit/66880b7
- http://drupalcode.org/project/aloha.git/commit/d18ac63
Reviews of everything, except for the UI and the remaining @todo's are already welcome :)
Comment #6
Wim LeersFYI, this is what it currently looks like. Not quite perfect, as I'm sure you can see:
Comment #7
kingfisher64 CreditAttribution: kingfisher64 commentedGreat to hear you're making good progress. If you need someone to test the mod, i'll gladly do so.
I'm doing a swot on concrete5 at the mo, first thing that strikes me is the inline editing. Aloha in time I think will be a major player in the drupal-sphere and closes the gap that some other cms's have in this area.
Thanks Wim
Comment #8
Wim LeersI didn't test this on a clean Drupal 7 installation, and I should have. I've now added installation instructions that make it work on a clean Drupal 7 ("Standard" profile) installation.
I fixed two bugs:
- http://drupalcode.org/project/aloha.git/commit/9eaf641 -> the icons font was not explicitly being required
- http://drupalcode.org/project/aloha.git/commit/62133af -> there was an implicit dependency on the Edit module for some of its CSS; I've moved the relevant CSS into the Aloha module but this still needs to be cleaned up anyway (as said in #5)
Finally, I've updated the README with installation instructions: http://drupalcode.org/project/aloha.git/commit/02ff98b. Most notably, a core patch is required for Aloha Editor to load: http://drupalcode.org/project/aloha.git/commit/02ff98b.
Comment #9
Wim LeersToggling between formats is now possible: http://drupalcode.org/project/aloha.git/commit/8573625. This code was heavily inspired by sun's wysiwyg module.
Related clean-up: http://drupalcode.org/project/aloha.git/commit/a130be3.
Currently working on the refactored & improved UI.
Comment #10
jghyde CreditAttribution: jghyde commentedWim--
excellent! I updated and improved the documentation to get a wider audience. Hopefully.
Attached is the patch.
Comment #11
kingfisher64 CreditAttribution: kingfisher64 commentedthanks for #10 instructions. Is it right that so far aloha is only showing up in the edit form page? I'm assuming that's right as it's in dev.
Possible suggestions
Link url option could do with a submit button? (screenshot). Obviously enter does the trick but will that be obvious to users?
If you're not looking for suggestions - just tell me. Don't mind just testing for bugs if it will help.
Works lovely so far Wim. Brilliant :)
Comment #12
Wim Leers#10: Thanks — will commit :)
#11: It should show up on every textarea where you have "text processing" enabled, i.e. where text formats are being used.
Comment #13
Wim LeersI just received the design from @tkoleary on what the WYSIWYG editor should look like on the back-end.
Comment #14
Wim LeersRefactored & improved UI almost ready!
Comment #15
Wim LeersDone! Commit: http://drupalcode.org/project/aloha.git/commit/d415f40.
Scales perfectly when zoomed in the browser, everything continues to look super sharp thanks to the use of an icon font. AE plug-ins' CSS files are now loaded only when needed thanks to hook_library(). Comes with RTL support already.
LoC impact: UI code clean-up, with RTL support, no more loading of Aloha's default CSS, and: 10 files changed, 278 insertions(+), 552 deletions(-) → win :)
Related AE issues:
<div>
s created for<textarea>
s (to make them editable through AE): https://github.com/alohaeditor/Aloha-Editor/issues/716I now consider this ready for reviews. The AE code is still likely to change, as we add more features (e.g. proper image insertion integration, table editing). But the way the integration works will not change, unless reviews indicate it should change :)
I'll leave this issue open as a meta issue for now, but I'll start creating more issues now that the migration is "feature complete".
Comment #16
kingfisher64 CreditAttribution: kingfisher64 commented@ #12 - Right then. Triple checked settings applied from readme. It shows up on the comments form in the frontend no probs, but AE does not show up onclick of body text. It works perfectly in backend form.
Comment #17
Bojhan CreditAttribution: Bojhan commented@Wim Could you update the issue summary, also with clear descriptions what you are looking for in terms of feedback? Also unassign, if you are looking for reviews.
Comment #18
webchick"Also unassign, if you are looking for reviews."
What..?
Comment #19
iler CreditAttribution: iler commentedAssigning this back to Wim as it should be.
Comment #20
jghyde CreditAttribution: jghyde commentedI have tested the latest git pull and it works on all textareas, node/add/ body fields and comments.
The Aloha editor doesn't appear until you focus on the textarea, that is click inside it, which may explain #16.
Comment #21
kingfisher64 CreditAttribution: kingfisher64 commentedWell that's great that it works. I was clicking the body text (logged in as admin, in case of permissions issue)
I've got drupal 7.15, tested on all latest browser versions, completed lines 7-15 of readme (checked multiple times). I'm not sure why it's working everywhere except the frontend body field for me.
Can you upload you're working aloha version & patched common.inc in a zip file jghyde for me to try?
Comment #22
webchickOh. It's working everywhere except the front-end body field because Aloha module doesn't deal with the front-end body field. :) Only the back-end. Edit module is the one that deals with front-end stuff.
At the moment, though, you can't use both Edit and Aloha module at the same time because of #1779196: Fatal error on duplicate check_markup2 function when using Aloha + Edit modules. Wim is in the process of cleaning it up.
Comment #23
kingfisher64 CreditAttribution: kingfisher64 commented#12 & #20 alludes that it's meant to work everywhere. What you said would explain everything webchick, as all but the front end body field is working. I thought that this was the case back in #11. Don't know how others have it working in the frontend body. Perhaps there's been a miscommunication and it's only working in the body backend.
Comment #24
jghyde CreditAttribution: jghyde commentedwhat's a front-end body field?
Comment #25
jghyde CreditAttribution: jghyde commentedkingfisher--
it may be working for you. here's a test case:
1. Log in as admin
2. navigate to node/add/page (or node/add/article)
3. The body textarea should have the Aloha editor within it.
4. Create a page (or article)
5. Enable comments on the page (or article)
6. After saving, the Aloha editor should appear within the comments textarea.
Comment #26
Wim Leers@kingfisher: "textarea" does not imply "body field on the front-end". It's as @webchick said: Aloha module is only intended to provide WYSIWYG editing on the back-end, not in-place editing on the front-end. See the issue summary, where this is also stated very clearly.
@Bojhan, yes, I'll update the issue summary today.
And yes, I'm going to clean up the Aloha + Edit integration.
Comment #27
kingfisher64 CreditAttribution: kingfisher64 commentedRight sorry, I clearly misunderstood this. I thought the reason aloha was chosen to be used as a front end inline editor? The functionality of the 1.x branch was precicely this.
Comment #28
Wim Leers#27: you're right. However, this project has been repurposed. This module's 2.x version is now only intended to do back-end editing, see #1704414-7: Aloha switched to jQuery UI; change module to match, #1704414-8: Aloha switched to jQuery UI; change module to match, #1704414-9: Aloha switched to jQuery UI; change module to match. Over the course of the next two weeks, the Edit module will leverage the Aloha module (*this* module), so then you *will* be able to edit on the front-end again, but better :)
Comment #29
Wim LeersReviews still welcome at any point in time.
The Drupal 8 port is tracked over at #1782326: Port Aloha 7.x-2.x to Drupal 8 (i.e. a 8.x-2.x version).
Comment #30
Wim LeersAlso see #1782332: Upgrade the Edit module so that it leverages the Aloha module.
Comment #31
NewCreation CreditAttribution: NewCreation commentedCould you please let me know where this patch should be applied?
* Apply this core patch: http://drupal.org/files/1664602-1.patch
Comment #32
Wim LeersIt's a core patch. See http://drupal.org/patch/apply.
Comment #33.0
(not verified) CreditAttribution: commentedUpdate to reflect current status.