Hi all,

At Amherst College, we are using the Wysiwyg module and had a need for a good HTML source editor so I modified the Wysiwyg module to add the Ace HTML editor as an editor. I figured I'd post it here in case it's useful to anyone.

I actually only added a few files, all separate and distinct from Wysiwyg so I didn't actually have to modify any of the Wysiwyg code, but I don't know a good way of adding the files I used and telling easily how to drop them into the existing Wysiwyg folder hierarchy. (for example, a diff wouldn't work because I'm not editing lines in the Wysiwyg module, just adding files)

Anyway, I just took our Wysiwyg directory (based on 6.x-2.4, the latest version), tarred it up, and attached it to this issue.

As for the version of Ace, this is tested off the latest in Github (so git clone git://github.com/ajaxorg/ace.git is the easiest way to get that) and it expects the library to be in sites/all/libraries in a folder called "ace". Should be self-explanatory and basically the same as the rest of the wysiwyg jazz and it also checks for the library as with any of the other wysiwyg libraries before allowing it to be enabled. This also expects jQuery UI to be present in sites/all/libraries. It also ignores basically all configuration options at the time being so if changing configuration options isn't working, that's basically expected behavior.

Regards,
Victor
Amherst College

Disclaimer: This is unsupported. It works for us and I thought it may be useful so we're sharing as good members of the Drupal community ;) But if it doesn't work for you, then sorry, you're on your own. There is nothing we can do to help you, we cannot offer any support and will not respond to any requests for support. If anyone wants to take this and run with it, feel free to modify, tweak, etc. to your heart's content!

It would be nice to get some version of this committed back into the Wysiwyg module at some point, but we'd probably have to remove some of the dependencies first (like the dependency on jQuery UI).

Comments

StatusFileSize
new132.2 KB
new111.73 KB
new75.06 KB
new80.36 KB
new82.05 KB
new80.37 KB
new85.36 KB

Attached are some screenshots of the Ace editor in action on our website. Sorry it's kind of difficult to tell the screenshots from the text as they both have white backgrounds. drupal.org strips any styling I apply so I can't put borders or anything on the images.

Light:
Light

Dark:
Dark

Find:
Find

Replace:
Replace

Goto Line

Preview:
Preview

Fullscreen:
Fullscreen

This works great even on D7. just need a little change to the loading of the library since d7 includes jquery ui. Thank you for saving me HOURS/Days of work :) I created a separate module locally. But i can create a patch if needed.

<?php
/**
* Perform additional actions upon loading this editor.
*
* @param $editor
*   A processed hook_editor() array of editor properties.
* @param $library
*   The internal library name (array key) to use.
*/
function wysiwyg_ace_load($editor, $library){
 
// Load jQuery UI
 
drupal_add_library('system', 'ui');
 
drupal_add_library('system', 'ui.position');
 
drupal_add_library('system', 'ui.widget');
 
drupal_add_library('system', 'ui.mouse');
 
drupal_add_library('system', 'ui.draggable');
 
drupal_add_library('system', 'ui.dialog');
 
drupal_add_library('system', 'ui.button');
}
?>

Version:6.x-2.4» 7.x-2.x-dev

There's a wysiwyg_EDITOR_load() callback that can be used for this purpose; have a look into editors/yui.inc.

Moving to D7, as I'm not sure whether we're going to be able to resolve the jQuery UI library dependency handling in D6 soonish, and jQuery UI is shipped with D7 core already.

Title:Add support for Ace (Ajax.org Cloud9 Editor)Ace Ajax Editor
StatusFileSize
new5.38 KB

Here's a patch to get this moving. It implements Ace only. It has no custom buttons or extras. As a consequence, it's much simpler, and it has no dependency on jQuery UI. This gets things awfully close, but there are a few loose ends yet:

  1. How do you expose the theme selection to the user? Right now it's just using the first in the list of defined options (Ambiance). The existence of hook_INCLUDE_themes() suggests to me that it must be meant to be user configurable. Not yet implemented. See #414496: Allow to select editor theme/skin.
  2. Is there any way to give the user a non-boolean configuration option somewhere? I want to expose the editor mode (i.e. syntax highlighting scheme: HTML, CSS, JavaScript, etc.), but I don't know if that's possible. Figured it out in later patch.
  3. I don't know the WYSIWYG API thoroughly. Can someone confirm I haven't left any essential hooks unimplemented or anything? Specifically, I did nothing in the way of plugin handling. I don't frankly know what that would mean for Ace or whether it needs to be accounted for if the editor won't use it.
  4. The "Editor appearance", "Cleanup and output", and "CSS" filter options tabs don't make any sense for Ace as they are. Is there a way to hide or disable them? Figured it out in later patch.

Title:Ace Ajax EditorAdd support for Ace (Ajax.org Cloud9 Editor)
Status:Active» Needs review

StatusFileSize
new8.7 KB
new6.6 KB

Here's an updated patch. I figured out how to add theme and mode selection to the profile settings form and hide the irrelevant settings. I also discovered that ace.js doesn't like being aggregated, so I disabled preprocessing for it. I could expose other configuration options, but I think this pretty much gets the job done for a first go. I feel pretty comfortable with the patch, if someone could review it now. :)

StatusFileSize
new8.7 KB
new601 bytes

Oops. Little error with the mode setting. This is better.

Title:Ace Ajax EditorAdd support for Ace (Ajax.org Cloud9 Editor)
StatusFileSize
new9.1 KB
new3.98 KB

Sorry for the patch spam. I tweaked and fixed a few more small things and made the rest of the major settings configurable. I think I'm done now. :)

StatusFileSize
new9.98 KB
new5.66 KB

Oh dear; I'm so sorry. I found a bug in the latest patch. Here's an updated patch. It contains a couple of other small improvements, too. Namely, I grouped the themes in the interface by "Bright" and "Dark" and fixed some of the theme names.

StatusFileSize
new9.43 KB

Oh no; using the OPTGROUPs on the theme selector broke something, but I missed it in my testing. Here's a fix, and then I'm gonna be quiet until someone reviews it. Sorry again for all the noise!

StatusFileSize
new9.65 KB
new2.95 KB

Re-added the very nice grouping of "Bright" and "Dark" themes.

+++ b/editors/ace.inc
@@ -0,0 +1,247 @@
+function wysiwyg_ace_version($editor) {
+  // @todo Detect this for real (perhaps from ChangeLog.txt) rather than
+  //   hardcoding it.
+  return '0.2.0';
+}

Other editors do parse changelog file. See markitup.inc or openwysiwyg.inc. BTW Ace has wrong version numbers in changelog, reported at: https://github.com/ajaxorg/ace/issues/1107

OTOH I've set up the editor and used it with no issues.

StatusFileSize
new9.8 KB
new825 bytes

They fixed the changelog upstream. Attached patch implements wysiwyg_ace_version().

Nice! Thank you for fixing my array merging snafu, @squaretone. And @jonhattan, thanks for getting the upstream issue fixed in Ace! As soon as that gets into the latest Ace build, your change will work great. Until then, the library will report version 0.1.0 and the module will say it doesn't support such an old version, because it's coded for 0.2.0 or later. If someone wants to confirm that the actual 0.1.0 release of Ace would work with our implementation, we could RTBC now. Otherwise we probably need to wait for the next Ace build.

Apparently they use a separate repository for actual builds: https://github.com/ajaxorg/ace-builds/—at least that's where the main web site directs you to go to download it. The repository you refer to seems to be the upstream development repository. Am I mistaken?

I noticed today that if I have a file field in the node edit form with an instance of Ace and I upload a file or remove one it detaches the Ace instance and doesn't replace it. Can anyone shed any light on the issue there and what I need to do to fix it?

StatusFileSize
new656 bytes
new9.63 KB

Ah; I figured it out.

Hi guys. I'm having difficulty getting this to work. I have downloaded the library and patched WYSIWYG. I can choose the Ace editor from the WYSIWYG profiles page, select a theme and plugins etc. Then when I edit a node and select the text format with the WYSIWYG profile assigned to it I don't see the ace editor or any syntax highlighting. Just a plain textarea, but with "grippie" removed. I get no javascript errors and the source HTML seems to update as per the kitchen sink demo. Any ideas?

StatusFileSize
new9.65 KB

To follow up my previous comment, the following styles are being output to the HTML.

.ace_editor {
  position: relative;
  overflow: hidden;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

This seems to be coming from libraries\ace\src-noconflict\ace.js

var editorCss = ".ace_editor {\
position: relative;\
overflow: hidden;\
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\
}\
...

This is easily resolved by increasing the specificity of the WYSWIYG specific ace styles. Patch attached. I'm not sure how to do an interdiff, but I simply added .wysiwyg-ace-wrapper before .ace_editor in ace.css.

StatusFileSize
new301 bytes

Thanks, @mstrelan. That's certainly a harmless change; it looks good to me. I take it everything else works for you with that tweak?

Attached is an interdiff for the patch. Here's how to create your own. :)

Yes it seemed fine for me. I tested with TinyMCE on 2 formats, no editor on a 3rd format and Ace on the 4th. Switching between formats seemed fine. The only issue I noticed is that the Ace editor was not resizeable but this is minor and could potentially be fixed later.

Is there a single patch in this thread i can use? Or do i have to apply them in order?

You can use the patch from #21.

Status:Needs review» Reviewed & tested by the community

So far no issues detected ;)

@sun/TwoD
What is the likelyhood of this feature?

I am making it part of a standard installation for our internal work and wondering if we should keep patching or to define our own hook_INCLUDE_editor().

Issue summary:View changes

Added Amherst College to my signature.

Issue summary:View changes
Status:Reviewed & tested by the community» Needs review
StatusFileSize
new9.67 KB

The ChangeLog.txt file no longer has the version number at the top of the file. The first line in the file is blank causing the ace library to fail to load. I've placed the wysiwyg_ace_version() function to loop over each line in the file until it finds the version number. Patch attached.

Status:Needs review» Reviewed & tested by the community

This works for me. Would love to see this as a part of WYSIWYG!

Status:Reviewed & tested by the community» Needs review
StatusFileSize
new10.01 KB

Hm. Applying the patch in #27 returns a few indentation and whitespace errors.
Attached a new patch which should fix that.